Всплывающее окно Fancybox + JSVideo HTML5 Video - Почему я теряю контроль?

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

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

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

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

Попробуйте поставить 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/< /а>

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

Это то, что сработало для меня. Конечно, вам придется настроить его в соответствии с вашими потребностями.

Код в голове:

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

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

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>  

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