Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JWPlayer 6.4 RTMP streaming with Fancybox and HTML5 fallback


A while back I was trying to get this to work with shadowbox, but kept failing. I have since found a solution that uses Fancybox instead. It's even possible to use custom parameters on *both* the longtail player (e.g., dynamic streaming) and fancybox (e.g., open effects) scripts. Also, this embed falls back great on iphone and ipad.

At any rate I thought this code block would help someone down the road.

bc.. <script type="text/javascript">
jQuery(window).load(function() {
jQuery("a.fancybox").fancybox({
'content':'<div id="videospace">Loading the Video...</div>',
maxWidth : '100%',
maxHeight : '100%',
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeBtn : false,
openEffect : 'fade',
closeEffect : 'fade',
padding : 0,
scrolling : 'no',
autoDimensions : true,
helpers : {
closeClick : true,
title : {
type : 'outside'
},
overlay : {
locked : false,
css : {
'background' : 'rgba(40, 33, 33, 0.80)'
}
}
},
afterShow: function() {
jwplayer('videospace').setup({
playlist: [{
image: "http://www.example.com/cover-image.jpg",
sources: [{
file: "rtmp://www.example.com/application/mp4:myVideo.mp4"
},{
file: "http://www.example.com/myVideo.mp4"
}]
}],
height: 528,
primary: "flash",
autostart: true,
width: 900
});
}
});
});
</script>



Here's a page where we have it working: http://www.rockbrookcamp.com/describe/camp-videos/

4 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks for sharing this, super helpful!

JW Player

User  
0 rated :

Hi Jeff say your Rockbrookcamp site and the example code for using fancybox with JW player 6. I have been trying to get you code to work but have had no luck. What am I doing wrong?

<a class="a.fancybox" title="Spin Bike Setup Video" href="/#inline" ><img class="aligncenter size-full wp-image-5835" title="Spin Bike Setup Video" alt="Spin Bike Setup Video" src="/images/video_player/holder.jpg" /></a>

<script type="text/javascript">
jQuery(window).load(function() {
jQuery("a.fancybox").fancybox({
'content': '<div id="copvideo1">Loading the Video...</div>',
maxWidth: '100%',
maxHeight: '100%',
fitToView: true,
width: '100%',
height: '100%',
autoSize: true,
closeBtn: false,
openEffect: 'fade',
closeEffect: 'fade',
padding: 0,
scrolling: 'no',
autoDimensions: true,
helpers: {
closeClick: true, title: {
type: 'outside'
}, overlay: {
locked: false,
css: {
'background': 'rgba(40, 33, 33, 0.80)'
}
}
},
afterShow: function() {
jwplayer('copvideo1').setup({
playlist:[{
image: "/images/video_player/holder.jpg",
sources:[{
file: "video/spin_bike_setup_cop_sd.mp4",
label: "360p"
},{
file: "video/spin_bike_setup_cop_hd.mp4",
label: "720p"
}]
}],
height: 512,
primary: "flash",
autostart: true,
rtmp: {bufferlength: 5},
width: 912
})
}
})
});
</script>


JW Player

User  
0 rated :

Fixed the the problem! Thanks Jeff for your sample code..awesome contribution!

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it!

This question has received the maximum number of answers.