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”

December 21, 2009 at 3:33 pm
john says:

I have tested this with IE6 (unfortunately there is still a percentage of people using this 10-year old browser) after removing the extra comma on line 49 as Sergeu pointd out. Except from the tutorial page layout looking broken the script works just great. The Flowplayer controls .swf is included in the download archive (flowplayer.controls-3.1.1.swf) so anyone having issues might want to upgrade their Flash player. Thank you for your feedback.
January 21, 2010 at 8:30 pm
James says:

I’m loving the fancyplayer! I’ve got a question though:

Is it at all possible to have the movie load into the overlay on clicking the fullscreen button?

I’ve got the flowplayer onbeforefullscreen command in:
onBeforeFullscreen: function() {
alert(’Going to FullScreen Baby!’);

return false;

},

But everytime I try to call a function to fancy player, the players stop working and don’t laod the videos….
January 22, 2010 at 9:53 am
Tetyana says:

Hello, John! Thank you a lot for this tutorial and examples! I had been playing around video in fancybox for a long time before I’ve found this page =)

But I have the same problem as Sergeu. Sound doesn’t stop with IE 7 when I close video I’ve just updated my flashplayer, but it doesn’t help.
http://www.borninfall.com/temp/cv/index.html
January 22, 2010 at 11:50 am
john says:

@James: Thanks for your interest. I see what you are trying to do, although I think it’s a long call. I’ve worked with calling JS functions from flash over at UserBooth (http://www.userbooth.com) and it works fine in most cases. I see a simpler sollution in your case. Use the Flowplayer configuration parameters to hide the maximize button and use a small image button on one side of or under the player for triggering the FancyPlayer window (and maybe hide the normal player as well in order to avoid issues with flash objects overlapping).

@Tetyana: Thanks for pointing that out. I have ammended the code inside fancyplayer.js under callbackOnClose. The player object to be removed was #fancy_content_api not #fancy_div_api. So the player is unloaded now when the Close button is clicked in IE as well. Make sure to download the updated code. Let us know the URL of the final website you’ll be using this on.
January 28, 2010 at 8:00 am
Asif says:

On demo page http://www.burconsult.com/tutorials/fp2/index.html , IE8 giving following error and so that no video is playing online.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Thu, 28 Jan 2010 07:27:24 UTC

Message: Not implemented

Line: 19
Char: 15990
Code: 0
URI: http://www.burconsult.com/tutorials/fp2/js/jquery-1.3.2.min.js
January 31, 2010 at 6:35 pm
Fernando says:

Hello, I’m trying to use the FancyPlayer but I can’t seem to make it work with relative file paths, I’m building an interactive cd so I need to have everything relative-wise.

Just wondering if you know how to make this work?

Thanks!!

Fernando.
February 3, 2010 at 11:56 am
john says:

@Asif: I have tested the demo on several browsers and it’s working even in IE6. I have just seen it in IE8 and could’t see any issue. Maybe it’s an issue with your browser, some plugin acting weird. If anyone else is experiencing this, please let us know.

@Fernando: I see you’re trying to use this for a local page. I haven’t tried it yet, but maybe specifying the complete local path may work. I’ll do some testing and let you know. As someone mentioned in a comment JWPlayer seems to have better suport for playing local files, I’ll have to look into it and maybe make a new version using JWPlayer.
February 5, 2010 at 2:34 pm
Ben Sparrow says:

Hello,
I’ve got a similar problem to @Tetyana in that the music doesn’t stop when you close the video. I fixed it by putting in a player.pause(); line against the callbackOnClose function.
Cheers
Ben
February 6, 2010 at 8:08 am
Shamima Sultana says:

Very resourceful site
February 7, 2010 at 1:58 am
IkalianPark says:

I’m getting the following error when I try to get a video to play when the page loads:
200, Stream not found, NetStream.Play.StreamNotFound, clip: ‘[Clip] ‘http://www.ikalianpark.com/undefined”

It looks like the clip’s location is being lost somewhere along the way.
Playing the video by clicking the link works fine though. Any ideas?
February 7, 2010 at 1:58 am
IkalianPark says:

I’m getting the following error when I try to get a video to play when the page loads:
200, Stream not found, NetStream.Play.StreamNotFound, clip: ‘[Clip] ‘http://www.ikalianpark.com/undefined”

It looks like the clip’s location is being lost somewhere along the way.
Playing the video by clicking the link works fine though. Any ideas?
February 8, 2010 at 11:42 pm
IkalianPark says:

I fixed that error by changing $(”#mylink”).focus(); to $(”#mylink”).hover();
February 9, 2010 at 5:39 pm
Rich Gates says:

This is exactly what I’m looking for, for a new project I am doing. Are there any plans on making this a WordPress plugin?

Thanks!
February 16, 2010 at 11:05 pm
john says:

@IkalianPark: Considering the error message you mentioned, it must have been a path error. Glad to see you found a fix and thanks for letting us know.

@RichGates: Thank you for your interest in FancyPlayer. We’re considering releasing this as a WP plugin in the future along with other plugins we’ve been working on. No release date though, but if you need help implementing this on a WP site, let me know and I’ll gladly assist you.
February 19, 2010 at 5:11 am
Mike says:

Hello

maybe you can make the same but using Jwplayer?

Regards