Fancybox 弹出窗口 + JSVideo HTML5 视频 - 为什么我失去控制？

Question

我正在使用 JQuery 插件 Fancybox 和 JSVideo，最终我希望通过 fancybox 弹出一个视频，并在该弹出窗口中播放 HTML5 视频

我可以正常工作 - 唯一的问题是视频控件不是我所期望的......没有 jsvideo 控件..我不知道它是 fancybox 还是 css 东西，或者两者兼而有之

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

带有适当控件的视频 - 是因为我试图将 a 填充到 fancybox 内容中？

谢谢

Answer 1

Peter 关于 onComplete 的看法是正确的。如果它强制 Flash 播放器，那么 VideoJS 至少会运行，而如果您看到浏览器的默认控件，则它之前不会运行。仅当 Flash 认为无法播放该文件时，它才会强制 Flash 回退。

VideoJS 使用“type”属性来检查，看起来您已经删除了该属性。添加回：

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

到 MP4，您可能会发现它可以工作。您还需要将该类型添加回其他源。希望有帮助。

Answer 2

尝试将 VideoJS.setupAllWhenReady(); 放入 $.fancybox.onComplete 中。

当 jsVideo 尝试应用视频控件时，fancybox 的内容可能不在 DOM 中。

像这样：

<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

我希望你已经解决了。您缺少其他格式和 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

要以更简单的方式编写此脚本，您必须使用 fancybox 的 beforeLoad 属性。
正是在这种重新定义中，您定义了您的内容。
就我而言， 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(); }
});