FancyPlayer – jQuery Fancybox and Flowplayer Integration |

Home Lightbox & Dialog & OverlayFancyPlayer – jQuery Fancybox and Flowplayer Integration

FancyPlayer – jQuery Fancybox and Flowplayer Integration

14 years ago Views

16767

3815

n/a

FancyPlayer – jQuery Fancybox and Flowplayer Integration

As for most jQuery plugins, there is no special HTML markup to do in order to fire up Fancybox, jus give the elements you would like to use this plugin a certain class so you can use that as a selector in Javascript. Here’s the code I used in the demo:

<ul id="videos">
<li>
<a href="videos/tour.flv" class="video_link"><img src="images/tour_video.png" width="218" height="148" alt="tour" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="videos/gorilla.flv" class="video_link"><img src="images/gorilla_video.png" width="218" height="148" alt="gorilla" style="margin-bottom:4px" /></a>
</li>
<li>
<a href="videos/bottleopener.mp4" class="video_link"><img src="images/bottleopener_video.png" width="218" height="148" alt="bottleopener" style="margin-bottom:4px" /></a>
</li>
</ul>

So we have 3 links with the class .video_link. We will use this class later in order to fire up Fancybox. I have used an ul in the demo just for layout reasons. You can use text, images or other elements as links to trigger the effect. Of course you should remember to include all the necessary CSS and Javascript in the <head> of the page:

<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/flowplayer-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/fancyplayer.js"></script>

We include the CSS files first in order to avoid issues with some browsers. We have the stylesheet that comes with fancybox (with slight modifications I will cover below) and a style.css sheet for the demo layout.
You can guess the respective versions of the JS plugins from the filename. We have jQuery, Flowplayer, Fancybox, the Easing plugin (optional) and the Fancyplayer file which works the integration magic.
If you download the demo files and take a look at the directory structure you will notice I chose a folder named videos to hold the video files and the 2 swfs needed by Flowplayer ( the player itself: flowplayer-3.1.1.swf and the player controls: flowplayer.controls-3.1.1.swf). You will have to do the same or change the path variable swfplayer we will cover next. Keep in mind I have NOT included the video files in the code archive for download due to file size and some of the functions will not work locally (the player resize function) due to security limitations. There are two variables which you will have to declare next in the head of the page:

<script type="text/javascript">
var videopath = "http://www.burconsult.com/tutorials/fancyplayer/";
var swfplayer = videopath + "videos/flowplayer-3.1.1.swf";
</script>

The videopath variable is the path to the root folder holding the videos directory. This may not please everyone especially if you want to use this with videos scattered over different folders or servers, but with minimal modifications it should work for any given case. The swfplayer variable is the path to the Flowplayer swf needed to play the video files as mentioned just before.

I have made some small modifications to the fancybox css code in order to move all images used by the plugin to the general images folder and to add a background image to the “fancy-div” element which appears very briefly before flowplayer is loaded in its place. Thus, background:url paths have been changed to ../images/bgimage and #fancy_div was given a background: url(’../images/video_bg.png’) no-repeat . You can skip this or declare it in you own stylesheet if you don’t want to modify the original plugin css. There is a download link to an editable PNG containing the elements used in the example (video link images with Flowplayer logo and the video_bg.png image) on the demo page. You could modify this and add your website logo for example.

Now let’s get our hand dirty with the FancyPlayer Javascript code.

Here is the first part:

$(document).ready(function() {
function preloadImages()
{
for(var i = 0; i<arguments.length; i++)
{
$("<img>").attr("src", arguments[i]);
}
}
preloadImages("images/video_bg.png");

This doesn’t have much to do with the integration itself, it just sets it so the code is executed whe the DOM is ready and using a small preloading function borrowed from here, it preloads the video_bg.png image so it will show up instantly when the first video is played. As mentioned before, this is optional, and added to the demo simply for aesthetics. Now we start setting our Fancybox plugin for use on our video links. As a quick note, you can continue using fancybox to display whatever else it supports (image galleries, iframe or ajax content etc.) as documented on the website, since no modifications are done to the plugin code.

var videoclip='';
var player='';
$(".video_link").hover(function(){
videoclip=$(this).attr('href');
$(this).attr({"href":"#video_box"});
},
function(){
$(this).attr({"href":""+videoclip+""});
});
$(".video_link").fancybox({
'hideOnContentClick':false,
'overlayOpacity' :.6,
'zoomSpeedIn' :400,
'zoomSpeedOut' :400,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',

First, we declare the two variables we will use for playing videos in FancyPlayer: videoclip, which takes its value from the “href” attribute of the clicked link, and player, which is covered in the next code section. As an extra “protection” measure, we can have the browser status bar show a “fake” element #video_box as the link’s path on hover in case we don’t want visitors to see the direct link to the flash video file.

Then we fire up the Fancybox plugin on all elements having the .video_link class using normal Fancybox arguments. These you can find documented on the plugin’s website and the names are pretty self-explanatory anyway: the opacity of the overlay in percentage (60% in our case), the time it takes to show or hide the box, and the optional Easing plugin we can use for cool show/hide effects (documented on the plugin’s website – sorry for repeating this so many times).

Now for the true integration code. As mentioned at the beginning of this tutorial, I wanted to take the easy iframe way out and found out it didn’t work in Flowplayer’s case, so the obvious option was to use Fancybox’s wonderful callbackonShow option, which will run whatever function you like when the content is displayed inside the fancybox wrapper.
So here it goes:

'callbackOnShow' :function(){
player = $f("fancy_div",swfplayer,{
play:{opacity:0},
clip:{
autoPlay:true,
autoBuffering:true,
url:videopath+videoclip+'',
onStart:function(clip){
var wrap=jQuery(this.getParent());
var clipwidth = clip.metaData.width;
var clipheight= clip.metaData.height;
var pos = $.fn.fancybox.getViewport();
$("#fancy_outer").css({width:clipwidth,height:clipheight});
$("#fancy_outer").css('left',((clipwidth + 36)> pos[0]?pos[2]:pos[2]+Math.round((pos[0]-clipwidth-36)/2)));
$("#fancy_outer").css('top',((clipheight + 50)> pos[1]?pos[3]:pos[3]+Math.round((pos[1]-clipheight-50)/2)));
},
onFinish:function(){
$('#fancy_close').trigger('click');
}
}
});
player.load();
$('#fancy_close').click(function(){
$("#fancy_div_api").remove();
});
},

his is a larger piece of code so I’ll try and explain it step by step. It has better formatting in the demo code in case you wonder. A lot of this I have added later to the code for better layout and customization.

So, using the callbackonShow option, we trigger a function based on Fancybox to create our player, by replacing the #fancy_div container with our Flowplayer swf (declared in the swfplayer variable). The rest is Flowplayer configuration code down to the player.load() function which loads up the player with the selected options. You notice the url variable is built using previously declared videopath and videoclip variables and since we would like our video to load immediately autoPlay and autoBuffering are set to true.

UPDATE: In order to use this with Flowplayer’s commercial version you just need to add a line with the key you get from them under player configuration just like this:

'callbackOnShow' :function(){
player = $f("fancy_div",swfplayer,{
key: '#$flowplayerkeycode',
play:{opacity:0},
...

One of our visitors ran into this issue while implementing this on a client’s website, so I thought of updating the tutorial with this information.

Since we might have videos of various resolutions playing with the fancyPlayer, I decided to get the width and height of the clip (metaData) about to be played and resize the Fancybox viewport (+ Flowplayer swf) to the actual video resolution, as well as center the player on the page (left, top position). The code is basically the one used by Fancybox when the user resizes or scrolls the browser window adapted to match the clip played inside Flowplayer.

All this is triggered by Flowplayer using the onStart option and decided to use the onFinish option to close the FancyBox window by triggering a click on the #fancy_close element (yes, the little x button on the top right side). Since DOM is handled differently on different browsers,for extra security, a remove() function is called on the main #fancy_div_api when Fancybox is closed, in order to avoid the invisible player effect, when thebox is no longer there but Flash player wasn’t unloaded and audio can still be heard. Flowplayer uses the player.unload() function which I’ve played with first, but this does the job as well very nicely.

This is it for the Fancybox and Flowplayer integration. I have tested it with all major browsers and it worked very well. There are some issues which I would like to take care of in a future “release”. The “gallery” option in Fancybox (using the rel attribute) will break the thing. I’ll work out a sollution hopefully and also try to turn this into a plugin of itself, which could be fired up side by side with Fancybox with all its available options.