<a id="viewflv" href="js/player.swf?file=video.flv&autostart=1"
title="Test Flv">Click to view FLV video</a>
<script type="text/javascript"> //<![CDATA[
$(function() {
$("#viewflv").click(function() {
$.fancybox({
'autoscale' : false,
'transitionIn' : 'none',
'transitionOut': 'none',
'padding' : 0,
'title' : this.title,
'width' : 370,
'height' : 301,
'type' : 'swf',
'href' : this.href,
'swf' : { 'wmode':'transparent', 'allowfullscreen':'true' }
});
return false;
});
});
// ]]> </script>
Wednesday, June 9, 2010
JW Player on Fancybox
Using the advise from this thread, here's how I got JW Player working inside FancyBox (to play FLV files in a lightbox):
Subscribe to:
Post Comments (Atom)
Works perfectly. Exactly what I was looking for. Thanks so much.
ReplyDelete1st hit on google, spot on!
ReplyDeleteCheers.
Hi nice code but i have an problem in IE.
ReplyDeleteWhen i close the popup i get many scripterrors.
Very often
Line 48 character 12
But just in IE
And I was so happy found the code :(
cheers
Kruemel
Brilliant and correct in every way. Cheers!
ReplyDeletedidn't work =s
ReplyDeleteWorks perfectly, thank you mate :D
ReplyDeleteIt works like a charm!
ReplyDeleteI added a "'skin' : 'modieus.swf'" but dosent works. Any ideas? Thanks!
Solved!
ReplyDeletehref="player.swf?file=video.mov&skin=modieus.swf&autostart=1"
It works!
What if I want to use plugins? How would I load them using this method?
ReplyDeleteOh never mind, I figured out I could serialize an object to be able to load the plugins I wanted:
ReplyDeletevar params = {
'width': '640',
'height': '368',
'file': 'sample/bitrates.xml',
'plugins': {
'qualitymonitor-2': {}
'captions-2': {
file: "sample/captions.xml"
}
}
};
$("#viewflv").attr("href", "js/player.swf?" + $.param(params));
Thx , working perfectly
ReplyDeleteWork great, if you don't need to support iPhones or iPads. The beautify of JWPlayer is it's ability to server non-Flash based video when needed. How do you integrate JWPlayer with Fancybox and maintain HTML5 support?
ReplyDeleteIf I remember the last time I tried, I ended up adding browser capability testing and going the HTML5 video route when it's supported, otherwise it fell back on JWPlayer.
DeleteThank you so much for sharing this. You're great!
ReplyDeleteBig help, thanks!
ReplyDeletegreat, but I have one problem in Google Chrome. when click on video it's not show like pop up, it redirect and play video in full screen. pls help!
ReplyDeleteThanks man! works like my bitch....on fire!
ReplyDeleteThanks very very much u helped me saving lots of times!!!
ReplyDeleteThank you so much! It worked for me and I combined your idea with auto pop up Fancybox when a page is open. How can I share the whole code? it won't let me paste it :-s
ReplyDeleteHmm, try htmlencoding your code before pasting. For example, I pasted this:
Delete$(x).css("font-weight","bold");
So it would be like this:
ReplyDelete<!DOCTYPE html>
<html>
<script type="text/javascript" src="http://myhp.cri.hp.com/ticomunica/fancybox/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://myhp.cri.hp.com/ticomunica/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="http://myhp.cri.hp.com/ticomunica/fancybox/source/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#yt").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 960,
'height' : 720,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
</script>
<body onload='$("#yt").trigger("click");'>
<p><a id="yt" title="" href="http://myhp.cri.hp.com/ticomunica/wp-content/plugins/flv-embed/flvplayer.swf?file=http://myhp.cri.hp.com/ticomunica/aniversario9.flv&autostart=1"></a></p>
</html>