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

Question

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

У меня это работает - единственная проблема в том, что элементы управления видео не то, что я ожидаю ... у него нет элементов управления jsvideo.

HTML-код прост - его миниатюра указывает на 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>     

и 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 где-то на сервере.

Есть элементы управления ... но я думаю, что это стандартные элементы управления видео 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

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

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

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> 

Редактировать: Этот плагин может иметь отношение к использованию: http://videojs.com/jquery/

Answer 3

Вот что у меня сработало.Конечно, вам нужно будет настроить его под свои нужды.

Код в голове:

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

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

Answer 5

Чтобы написать этот скрипт в более простом стиле, вы должны использовать свойство 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(); }
});

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

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