November 11, 2009

FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration

Posted in Tutorials by john | Tags: fancyplayer, jQuery, Tutorials

I have recently decided to revisit the FancyPlayer code and after receiving feedback on the blog from our visitors, here’s the new more comprehensive integration of FancyBox and FlowPlayer.

Click here to see the demo for the updated version »

People were asking for full Fancybox support, basically the gallery function using the “rel” attribute and the posibility to use mixed video/images galleries, so I have now added that. I have decided to stick to the “don’t touch the original code” of the two plugins rule, so that made it a bit more difficult, yet not impossible. Now you can add several videos and images as a gallery by using the “rel” attribute for the links and Flowplayer customization is possible as well (the look of control buttons, deactivate fullscreen etc).

Here’s the code inside fancyplayer.js which allows you to customize Flowplayer look and behaviour (the settings are pretty much self-explanatory):
controls: { backgroundColor: 'transparent', progressColor: 'transparent', bufferColor: 'transparent', all:false, scrubber:true, volume:true, mute:true, play:true, height:30, autoHide: 'always' },
Just modify it accordingly to your needs.

The new code available for download on the demo page (just check the page for link setup and the fancyplayer.js file).

An important change based also on user feedback is the use of Fancybox’ native function for opening an image by setting the “href” attribute to the image that the link is on. There was a small issue with the previous code since no actual image was loaded in the Fancybox and it would show the “null” text just before loading the video player. I have decided to change the code accordingly so it is now using the “name” attribute to tell the Javascript what to do next depending on if it’s an image or a video file it has to load.

If the “name” attribute of the link is “image”, it just loads the image from the path set in the “href” attribute as Fancybox would normally do (you can see in the demo that the second link is to an image of the Cadbury Gorrilla, while the other two are videos), if it’s a link to a flash video file it will first load the image file from “href” (I am linking to the actual image the link is on in the demo, which is recommended since that image is already loaded in the visitor’s browser), thus getting rid of the “null” issue, and then calls Flowplayer and loads the video.

I have also made a small adjustment to the dimensions of the container based on feedback from conrad (thanks). 20px added both to width and height of the outer FancyBox div so it would adjust accordingly and show the true video size. The distortion was caused by the extra pixels of the white frame I had not taken into consideration.

One last addition based on steve z’s comment. If you want to trigger FancyPlayer when the page is loaded just add this <script> inside your page’s <head> or right inside fancyplayer.js (skip the $(document).ready in this case):
$(document).ready(function() { $("#mylink").focus(); $("#mylink").click(); });

Just make sure to add the id “#mylink” to the image/video link you want to open first.

As usual, I recommend that, if you want more information about customizing the 2 plugins, you should visit their respective pages here for Fancybox: http://fancybox.net/ and here for Flowplayer: http://flowplayer.org/ . Looking forward to your comments as well as links to pages where you have implemented this.

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!

39 Comments to “FancyPlayer Revisited – jQuery Fancybox and Flowplayer Complete Integration”

February 19, 2010 at 9:56 pm
Fernando says:

For anyone interested – I’ve solved my problem and created the interactive cd with Video Lightbox – http://videolightbox.com/

Great product!
February 24, 2010 at 9:02 am
kurt says:

That’s awesome thanks a lot!
February 24, 2010 at 8:49 pm
Risk says:

Hello,

I currently test a local version of the latest FancyPlayer with online videos, but when my videos appears they are small( 220:150) I don’t understand what is the problem because my videos are 720:480. How to change automatically the proportions of the FlowPlayer ?

And How to show the fullScreen Icon ?

Thanks.
February 25, 2010 at 1:26 pm
john says:

@Risk: When you use thisoffline, that is open the html file on your computer locally, due to security restrictions, the Flash player’s attributes canot be accessed/modified, so FlowPlayer swf doesn’t adjust to the video size. It’s not an issue once you upload it to the server.
As for having the fullScreen icon visible that’s a matter of adding it to the “controls” part in the fancyplayer.js file. Just add “fullscreen:true;” in there like this for example:
…
all:false,
fullscreen:true,
scrubber:true,
…
Hope this solves your problem, Let us know how it worked out.
March 4, 2010 at 5:49 am
MattM says:

I love FlowPlayer
Though, I had problems downloading the code from the demo page. For me, it seems like the link is broken.

The big problem I’m facing though, is that in IE the video and images are not displaying at their true resolution. In Firefox it looks perfect. I saw in some of the other posts that there was a size issue before, I’m not sure if it was addressed for IE.
March 4, 2010 at 7:59 pm
MattM says:

My apologies, I rebuilt my app and now it’s working perfectly. FancyPlayer is awesome!! Thank you for making it!
March 6, 2010 at 3:15 am
Farrah says:

I’m wondering if there’s a setting to stop the popup from automatically closing when the .flv video ends. I would like to only have the popup close when the X is clicked.

Thanks for all your hard work!
March 6, 2010 at 5:48 pm
john says:

@Mark: Thank you for your messages. Great to hear you managed to use it in one of your projects. If you want, you can leave us a link here so we can have a look. Thanks.
@Farrah: It’s very easy to stop the modal window from closing on video end. Just remove or comment out the following lines inside the “fancyplayer.js” file:
onFinish:function(){
$(’#fancy_close’).trigger(’click’);
}
That is the call that triggers a click on the close button when the video clip ends. Removing it will prevent this from happening.

I would also like to let you know I’ve modified the code for the demo in order to include the FlowPlayer content and captions(subtitles) plugins requested by @Jason Eveland in a comment: Here’s my message to him:

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!
March 9, 2010 at 4:46 pm
Scott says:

Yeah, VideoLightbox.com is cool! Thanks for sharing..