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”

July 6, 2010 at 3:37 pm
Balajee says:

its a nice tutorial. i’m looking for similar kind of tutorial on using jw player for swapping text on paricular duration of time. tutorials available for Flash action script.. but i need to implement it using javascript (jquery) . Can someone help!.
July 6, 2010 at 3:39 pm
Balajee says:

That should be similar to Slidesync plugin for Jw player.. But i dont wanna use that plugin .. instead i need the javascript to make that job done.
July 13, 2010 at 9:59 pm
Kevin says:

Any deadline on when we can suspect an working update for 1.3.1? Cant wait
Thanks for the great plugin…
July 29, 2010 at 4:18 pm
Peter Schmidler says:

Dear John, Thanks for sharing this! I’ve been checkin it out for days now and thinking about using it as a base for some projects. There’s one thing I’m confused about though. When I use the same image in the href for different videos your script seems to handle them as if they were one, and shows all kinds of strange behaviors like e.g. showing the same title for all videos. Since I use one Thumbnail for all Videos on the Page I have a problem.
July 29, 2010 at 4:44 pm
Peter Schmidler says:

One other thing I noticed: the gallery buttons are not horizontally centered over the videos but over the images they are. Where did you change the styles of the icons when showing a video?
August 5, 2010 at 6:47 pm
Coloring Pages says:

Good read. Needed more pictures though.
August 5, 2010 at 8:39 pm
Coloring Pages says:

Wow this takes me back. Adding to my bookmarks thanks.
August 6, 2010 at 1:53 am
wholesale new era hats says:

Thanks for posting this. Very nice recap of some of the key points in my talk. I hope you and your readers find it useful! Thanks again
August 6, 2010 at 2:00 am
New Era Hats says:

The dissertation chapters should be perfectly composed by distinguished thesis service, when people want to present a writing talent. Thus, this is manifestly that you understand the right way to finish a superb issue referring to this topic. Thank you very much for distributing this.
August 6, 2010 at 12:44 pm
Coloring Pages says:

Adding to my bookmarks thanks. Where is your contact details though?
August 7, 2010 at 9:21 pm
PAMP Suisse gold bars says:

It appears that you have placed a lot of effort into your article and I require more of these on the net these days. I sincerely got a kick out of your post. I don’t really have much to say in response, I only wanted to comment to reply wonderful work.
August 8, 2010 at 8:36 pm
lenen says:

BKR problemen? Nu Geld lenen zonder BKR toetsing? Op zoek naar betrouwbare aanbieders? Wij vergelijken banken die u toch kunnen helpen aan een betrouwbare
August 13, 2010 at 8:29 am
Kew says:

Hey John, very cool script. Any ideas on when it will work with the newest versions? Im in really need of the script. Keep up the good work
August 29, 2010 at 11:21 am
Steve says:

Dear John,

Thanks for this, it is great. However I do have a small problem : how to change the width and height of the video ? It does choose the size of the video by itself!

As I don’t have any “control” variable in the “fancyplayer.js”, I can’t do what you explain above.

Well I tried to copy/past the code of (fancyplayer.js) of your demo page on mine, but when I do that, it doesn’t work anymore. (I don’t understand javascript but the content of the fancyplayer.js file of your demo page is way different than the one I have downloaded from the site).

Thanks for your help. I’m sure its easy to modify the width and height of the page – you juste need to know how to do it

Steve
August 30, 2010 at 10:42 pm
john says:

Hello Steve,

I understand your frustration. I know JavaScript can be like that sometimes. First please make sure you are working with the right version of the scripts. If you are using the code downloaded from the FancyPlayer 2 – http://www.burconsult.com/tutorials/fp2 – page then it’s a matter of changing 2 lines inside fancyplayer.js as explained before.

If you want the size of the video player (keep in mind the actual fancybox window is a bit larger due to the white padding), then all you have to do is specify it instead of letting it be read from the media to be played: That means changing the values of the variables clipwidth and clipheight in these 2 lines:

var clipwidth = clip.metaData.width;
var clipheight= clip.metaData.height;

to whatever specific size you want the video player to have, for example:

var clipwidth = 600;
var clipheight= 480;

This way the script will always load the videos at this size. Try it with a clean copy of the demo files and let me know if you managed to get it to work. Cheers.