August 3, 2009

FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial

Please be advised this tutorial has been updated in a new post with better integration of Fancybox and Flowplayer based on visitor feedback.

Click here to see the updated tutorial »

I have used these two javascript plugins in a recent small project for a client who is selling a bar and wanted a photo and video gallery for potential buyers to see. I didn’t want to go the YouTube/object embed road, so this is what I came up with. Flowplayer is undisputedly a great flash video player versatile enough even for most projects with its free version and Fancybox I had used before in several other projects.
Fancybox is a fine modal box capable of showing pretty much any kind of content. The guys over at Flowplayer.org have released their own jQuery tools library which integrates perfectly with Flowplayer. I wanted the best of two worlds.

The integration proved to be a challenge since the iframe mode in Fancybox would NOT work with a page using Flowplayer. I had used JW Player in an earlier project this year and iframe mode worked great in that case using the SWFObject js to embed the player. But since I liked Flowplayer’s interface and capabilities better, I decide to give it a shot. Did a lot of testing and rewriting since then , so I’ll try to cover it all. This may end up turning into a plugin of its own after adding some extra options and functionality, so keep an eye on WGDB.

Click here to see the demo.

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 Fancybox.net 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(); }); },
This 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.

Here are some links to the resources used in the demo:

FancyBox jQuery plugin: http://fancybox.net/
Flowplayer: http://flowplayer.org
First video: vid I shot a couple of weeks ago for a client who was selling a café bar – encoded to FLV with Quicktime
Second video: v2 of the infamous Cadbury Gorrila ad – downloaded from http://labs.paulicio.us/viewport/#5 (awesome WP theme btw)
Third video: foreign beer ad downloaded from http://www.mymp4clips.com/bottle_opener.html (1st thing that came up in google for “mp4 clip) – reencoded to m4v for iPhone with Quicktime. (You must have the latest version of the Adobe Flash Player (9.115+) in order to play files with h264 encoding.)
Popcorn image on the preloading image: http://www.iconshock.com
jQuery Preloading function: http://www.innovatingtomorrow.net/2008/04/30/preloading-content-jquery

Please don’t hesitate to comment and send us links to your implementations of this tutorial or any ideeas you might have for improving it!

Author: john (5 Articles)

Burconsult is a web consulting and development studio based in the south of Spain, founded a few years ago by Ionut «John» Burchi. I define myself as a jack-of-all-web-trades, and have been addicted to the whole web business for ten years now. Thought I would start sharing some of the experience with the rest of the community on this blog. Your comments are appreciated and I will try to answer any doubts you might have. Thank you for reading my tutorials and keep up the good work!

32 Comments to “FancyPlayer – jQuery Fancybox and Flowplayer Integration Tutorial”

March 2, 2010 at 8:30 pm
Jason Eveland says:

How can I add the captioning plug-in? I’m trying to add the timed.xml file to the flowplayer. I have downloaded the plugin for captioning but not sure how to make it work. Any help would be appreciated.
March 3, 2010 at 11:39 pm
john says:

@Jason Eveland: Hi, thank you for your interest in FancyPlayer. I have looked into the captions issue and have updated the fp2 demo here: http://www.burconsult.com/tutorials/fp2/index.html . You have to add 2 plugins to FlowPlayer in order for it to work: content and captions. I have quickly put together some code and managed to make it work (take a look at the index.html and fancyplayer.js source. It’s a quick fix so the code is not very optimised but it works. The first video has captions enabled, just watch it. The image (2nd element) doesn’t call for the FlowPlayer to load so no problem there. The 3rd element (beer commercial video) has no subtitles so I just used a hack to make it load an empty .srt file and hide the CC button.
I’m afraid I don’t have time to update the tutorial or code for now, so I hope this information helps.
Good luck with your project and please let us know how it goes and if you need more assistance!