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!

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

November 21, 2009 at 3:42 pm
security says:

thanks good FancyBox
November 23, 2009 at 8:04 pm
Chris says:

Thanks for this! I’ve combined your code with jCarousel Lite to create a kick-ass portfolio for an awards entry site (unfortunately it’s behind a password so I am unable to share).
December 1, 2009 at 2:19 am
will merrick says:

i cannot seem to position div#fancy_outer to render at the same position in safari/ff? is there another spot that i can alter to position it?

thanks, will
December 1, 2009 at 11:14 am
john says:

Thank you all for your comments. Great to see that FancyPlayer was useful for your projects.
@Chris : you could set up a small demo on a public page and send us the link. We would love to see how you combined it with jCarousel lite.
@Will: I’m not sure I understand your question. Are you trying to change the default positioning of the fancybox modal window ? Cause I’ve tested FancyPlayer on all major browsers on both Windows and Mac OS X, and no positioning issues were found. Please try to be more descriptive and I’ll see what I can do to help you.
December 4, 2009 at 6:16 pm
Chris says:

Here’s a demo page of the portfolio site, thanks again for your work – you probably saved me a ton of time.

http://bit.ly/8PYOas
December 7, 2009 at 9:05 pm
Jaspero says:

Can this work with streaming video URL rather than getting the video from a file server?
December 7, 2009 at 11:39 pm
john says:

@jaspero. Since I used Flowplayer (http://flowplayer.org) for this tutorial, you might want to check its streaming abilities, here’s a link to an RMTP plugin for it: http://flowplayer.org/plugins/streaming/rtmp.html . Good luck with your project and let us know how it turns out.

@chris: Thank you for the demo link. It doesn’t seem to work though, I don’t see the carousel, maybe some files aren’t being loaded because of permissions on your server. Let us know if you can fix that. Thanks.
December 8, 2009 at 2:01 am
Philip says:

Hello. Im feeling a bit retardet and cant make it work (im new to this) My problem is that i cant figure out where to put the link to my flv. video ive tried having it on a server and just putting it in the folder writing the path to in in the “name” and “rel” also ive tried to writing the path in the var videopath in the head. thanks again
December 8, 2009 at 11:27 pm
john says:

@philip: Hello. No need to be feeling bad if things don’t work out at first. We all have to learn from our mistakes and get things right in the end. I recommend you download the code from the tutorial page and take a good look at it, even reuse it for your project. Just remember to include all files, JS, CSS, the FlowPlayer SWF files and your FLVs. This last version of FancyPlayer uses the “name” atribute for the actual link to the .flv file. If you need more assistance, just let us know the URL of your project and I’ll take a look at it and see what’s wrong. Thank you for your interest in FancyPlayer.
December 8, 2009 at 11:37 pm
Jaspero says:

@John: Thank you I will definitely post back when I have it in production.

@Philip: I haven’t implemented the links through rel or name. My videos are anchor tags with a class name that triggers the overlay. You might want to try including a url with http (full absolute path without the flv video name) in the var videopath.
December 9, 2009 at 8:43 pm
Philip says:

Cool! and thanks for the quick reply
December 14, 2009 at 4:12 pm
Rene says:

How do I add multiple key licenses?
December 14, 2009 at 11:25 pm
rene says:

nevermind, i got it
December 18, 2009 at 10:35 am
Sergeu says:

John, thank You for Your time and Your knowelage. But you have a sligt error in fancyplayer.js (line 49, extra comma), which IE hates very much.

Also, You’ve forgotten to add a flowplayer.controls.swf into archive, which causes TypeError 1009 error after “fresh” install.

BTW, in my case, FF player window does not resize to video’s size and in IE sound does not stop, when video is closed.

Have You the same problems? (Yes, it can be seen on demo page, too).
December 21, 2009 at 1:08 am
john says:

Hello Sergeu. Thank you so much for your feedback and sugggestions regarding FancyPlayer. I am reviewing the code and will post the necessary corrections immediately.
I have also taken a look at your website and portfolio and I like it a lot. Please let us know if you will use FancyPlayer for any of your projects.