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

带有适当控件的视频进来 - 这是因为我试图填充fancybox内容吗？

由于

Answer 1

尝试将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 2

彼得对onComplete是正确的。如果它正在强制使用Flash播放器，那么VideoJS至少会运行，而如果您看到浏览器的默认控件则不会。如果它不认为它可以播放文件，它只会强制Flash回退。

VideoJS使用“type”属性进行检查，看起来你已经删除了。加入：

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

到MP4，您可能会看到它有效。您还希望将类型添加回其他来源。希望有所帮助。

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

Fancybox弹出+ JS视频HTML5视频 - 为什么我会丢失我的控件？

7 个答案: