Fancybox popup + JSVideo HTML5 Video - Why do i lose my controls?

Question

I'm using JQuery plugins Fancybox and JSVideo, ultimately i want a video to popup via fancybox and have the HTML5 video play in that popup

I have this working - the only problem is that the video controls are not what i expect...it does not have the jsvideo controls..i dont know if its a fancybox or a css thing, or both

The html is simple - its a thumbnail that points 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 the 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 of the file, so i have an mp4 somewhere on the server.

There are controls..but i think its the default HTML5 video controls, and not the jsvideo controls...

If i take fancybox out of it - and just put the 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 -->

Video with proper controls come in - is it because im trying to stuff a into the fancybox content?

Thanks

Answer 1

Peter was right about the onComplete. If it's forcing the Flash player, then VideoJS is at least running, whereas it wasn't before if you were seeing the browser's default controls. It only forces the Flash fallback if it doesn't think it can play the file.

VideoJS uses the the "type" attribute to check, which it looks like you've removed. Add back in:

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

to the MP4, and you might see it work. You'll want to add the type back to the other sources as well. Hope that 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 the 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 might be relevant to use: http://videojs.com/jquery/

Answer 3

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

Answer 4

This is what worked for me. You'll have to customize to fit your needs, of course.

Code in 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 was trying for this too and finally had this work for me by using the below approach.

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 more simple style, you have to use the beforeLoad property of fancybox. It is in that redefination that you define your content. In my case, the attr element contains the name of the file, thus I can set multiple video format source.

$("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(); }
});