Fancybox popup + JSVideo HTML5 Video - Why am I losing control?

Question

I use jQuery Fancybox and JSVideo plugins, ultimately I want the video to pop up through fancybox and play HTML5 video in this popup menu

I have this job - the only problem is that the video controls are not what I expect ... it does not have jsvideo controls. I don't know if its fancybox or css thing or both

html is simple - it's a thumbnail pointing to javascript

<a title="test" name="test" href=""javascript:;" class="fancyvideo5"><img alt="kirk monteux micro-agentur.de grafik design" src="http://www.micro-agentur.com/media/bilder/grafik220.jpg" /></a> 

and javascript looks like this:

 <script type="text/javascript"> $(document).ready(function () { $("a.fancyvideo5").click(function () { var url = $(this).attr('name'); $.fancybox({ 'padding': 7, 'overlayOpacity': 0.7, 'autoDimensions': false, 'width': 640, 'height': 480, 'content': '<div><div class="video-js-box vim-css">' + '<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' + '<source src="' + url + '.mp4" />' + '<source src="' + url + '.webm" />' + '<source src="' + url + '.ogv" />' + '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + '<param name="allowfullscreen" value="true" />' + '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + '<!-- Image Fallback. Typically the same as the poster image. -->' + '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + ' title="No video playback capabilities." />' + '</object>' + '</video>' + '</div></div>', 'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); }, 'onClosed': function () { $("#fancybox-inner").empty(); } }); return false; }); // fancyvideo VideoJS.setupAllWhenReady(); }); </script> 

the name in the html link is just the full path to the file, so I have mp4 somewhere on the server.

There are controls .. but I think its HTML5 controls are by default, not jsvideo controls ...

If I select fancybox from it - and just put jsvideo inline, like this

 <!-- Begin VideoJS --> <div class="video-js-box"> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <video id="example_video_1" class="video-js" width="320" height="240" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." /> </object> </video> <!-- Download links provided for devices that can't play video in the browser. --> <p class="vjs-no-video"><strong>Download Video:</strong> <a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, <a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, <a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br> <!-- Support VideoJS by keeping this link. --> <a href="http://videojs.com">HTML5 Video Player</a> by VideoJS </p> </div> <!-- End VideoJS --> 

Is the video with the right controls included - is it because I'm trying to insert fancybox content?

thanks

Answer 1

Peter was right about onComplete. If it forces a Flash player, then VideoJS works as a minimum, whereas before there were no browser controls by default. This only forces the flash backup if it does not think that it can play the file.

VideoJS uses the "type" attribute to verify that you apparently deleted. Add back:

 type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 

for MP4, and you can see how it works. You will also want to add the type back to other sources. Hope this helps.

Answer 2

Try putting VideoJS.setupAllWhenReady(); in $.fancybox.onComplete .

The content of your fancybox is probably not in the DOM when jsVideo tries to apply video controls.

Like this:

 <script type="text/javascript"> $(function () { $("a.fancyvideo5").click(function () { var url = $(this).attr('name'); $.fancybox({ 'padding': 7, 'overlayOpacity': 0.7, 'autoDimensions': false, 'width': 640, 'height': 480, 'content': '<div><div class="video-js-box vim-css">' + '<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' + '<source src="' + url + '.mp4" />' + '<source src="' + url + '.webm" />' + '<source src="' + url + '.ogv" />' + '<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' + '<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' + 'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' + '<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' + '<param name="allowfullscreen" value="true" />' + '<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' + '<!-- Image Fallback. Typically the same as the poster image. -->' + '<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' + ' title="No video playback capabilities." />' + '</object>' + '</video>' + '</div></div>', 'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); VideoJS.setupAllWhenReady(); }, 'onClosed': function () { $("#fancybox-inner").empty(); } }); return false; }); // fancyvideo }); </script> 

Edit: This plugin may make a difference to use: http://videojs.com/jquery/

Answer 3

I hope you already have the fix. You lacked other formats and the tag type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' . This worked for me. :)

Answer 4

This is what worked for me. Of course, you have to adapt to your needs.

Code in the head:

 <script type="text/javascript"> $(document).ready(function () { $("a.fancyvideo5").click(function () { var url = $(this).attr('name'); $.fancybox({ 'padding': 7, 'overlayOpacity': 0.7, 'autoDimensions': false, 'content': '<div class="video-js-box">' + '<video class="video-js" width="635" height="475" controls preload>' + '<source src="' + url + '"' + 'type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"' + '/> ' + '</video>' + '</div>', 'beforeShow': function () { VideoJS.setupAllWhenReady(); }, }); }); }); </script> 

Image Link:

 <a class="fancyvideo5" name="video/animation/animation_zemibank.mp4"><img src="images/misc/spotlight_images/spotlight_animation.png" width="248" height="145" alt="Film" /></a> 

Answer 5

 <div class="video-js-box"> <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --> <!-- Download links provided for devices that can't play video in the browser. --> <p class="vjs-no-video"> <a href="video/video-2011-11-27-20-26-40.mp4">video</a> </p> </div> 

Answer 6

I also tried to do this and finally used this work for me using the approach below.

 jQuery(document).ready(function(){ jQuery("a#videolink").fancybox({ frameWidth: 800, frameHeight: 450, overlayShow: true, overlayOpacity: 0.7 }); }); <a id="videolink" href="#MYID" title="Test Video"> <img src="mp4test.jpg" width="248" height="145" /> </a> <div style="display:none"> <video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin" controls preload="auto" width="300" height="300" data-setup="{}" > <source src="mp4test.mp4" type='video/mp4'> </video> </div> 

Answer 7

To write this script in a simpler style, you must use the beforeLoad fancybox property. It is in this redefinition that you define your content. In my case, the attr element contains the name of the file, so I can install several sources of video format.

 $("a.fancybox_video").fancybox({ 'padding': 7, 'overlayOpacity': 0.7, 'autoDimensions': false, 'width': 640, 'height': 480, 'beforeLoad': function() { this.content = '<video width="640" height="480" controls="controls">'+ '<source src="' + $(this.element).attr('name') + '.mp4" type="video/mp4"></source> ' + '<source src="' + $(this.element).attr('name') + '.webm" type="video/webm"></source>' + 'Your browser does not support the HTML 5 video tag'+ '</video>'; }, 'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); }, 'onClosed': function () { $("#fancybox-inner").empty(); } });