Fancybox popup + JSVideo HTML5 Video - Почему я теряю контроль?

Question

Я использую JQuery плагинов FancyBox и JSVideo, в конечном счете, я хочу видео всплывать через FancyBox и есть воспроизведение видео в формате HTML5 в этом всплывающем окне

У меня это работает - единственная проблема заключается в том, что видео управляет не то, что я ожидал ... это не есть jsvideo controls..i не знаю, если его FancyBox или CSS вещь, или оба

HTML, просто - его значок, который указывает на яваскрипта

<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>  

и javascript выглядит так:

<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> 

имя в ссылке html - это всего лишь полный путь к файлу, поэтому у меня есть mp4 где-то на сервере.

Там будут controls..but я думаю, что его по умолчанию HTML5 управления видео, а не управляет jsvideo ...

Если я взять FancyBox из него - и просто поставить jsvideo инлайн как этот

<!-- 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 --> 

Входит видео с надлежащими элементами управления - это потому, что я пытаюсь вставить содержимое fancybox?

Благодаря

Answer 1

Петр был прав насчет OnComplete. Если это заставляет Flash-плеер, то VideoJS работает как минимум, тогда как раньше вы видели настройки браузера по умолчанию. Это только заставляет флэш-резерв, если он не думает, что он может воспроизвести файл.

VideoJS использует атрибут «type» для проверки, который, по-видимому, вы удалили. Добавить обратно в:

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

к MP4, и вы можете увидеть, как он работает. Вы также захотите добавить тип обратно к другим источникам. Надеюсь, это поможет.

Answer 2

Попробуйте положить VideoJS.setupAllWhenReady(); в $.fancybox.onComplete.

Содержимое вашего fancybox, вероятно, не находится в DOM, когда jsVideo пытается применить элементы управления видео.

Как это:

<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: Этот плагин может быть уместным использовать: http://videojs.com/jquery/

Answer 3

Надеюсь, у вас уже есть исправление. Вам не хватало других форматов и тега type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'. Это сработало для меня. :)

Answer 4

Это то, что сработало для меня. Разумеется, вам придется подстраиваться под свои нужды.

код в голове:

<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> 

Ссылка на изображение:

<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

я пытался для этого тоже, и, наконец, эту работу для меня, используя приведенный ниже подход ,

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

Чтобы написать этот скрипт в более простом стиле, вы должны использовать свойство beforeLoad fancybox. В этой переопределении вы определяете свой контент. В моем случае элемент attr содержит имя файла, поэтому я могу установить несколько источников видеоформата.

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