Fancybox弹出式菜单+ JSVideo HTML5视频 - 为什么我失去了我的控件？

我使用jQuery插件的fancybox和JSVideo，最终我希望有一个视频，通过弹出的fancybox并在该弹出窗口中的HTML5视频播放Fancybox弹出式菜单+ JSVideo HTML5视频 - 为什么我失去了我的控件？

我有这样的工作 - 唯一的问题是，视频控件不是什么我期待...它不具备jsvideo controls..i不知道如果它是一个的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在服务器上的某个地方。

有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内容？

感谢

来源

2010-11-24 Jerrold

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

VideoJS使用“type”属性来检查，它看起来像你已经删除。添加回：

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

到MP4，你可能会看到它的工作。您还需要将该类型添加回其他来源。希望有所帮助。

来源

2010-11-25 19:25:48 heff

这样做 - 谢谢你们是男性之间的国王 – Jerrold 2010-11-27 19:13:48

尝试把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/

来源

2010-11-24 21:48:45

nope - moving VideoJS.setupAllWhenReady（）;不工作 - 一些奇怪的行为 - 它强制流式播放器（闪回回退）呈现，而不是HTML5视频。任何其他想法？谢谢你 – Jerrold 2010-11-24 22:03:15

我希望你已经得到了解决。您错过了其他格式和type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'标记。它为我工作。 :)

来源

2011-05-03 06:52:20 techm

这是为我工作。当然，您必须自定义以适应您的需求。

代码头：

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

来源

2012-01-03 17:14:09 user1106485

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

来源

2012-05-04 13:55:17 jolly

wthe相同的java脚本不能在铬合作 – jolly 2012-05-04 13:58:02

我是想这个也是一样，最后通过使用下面的方法有这个工作对我来说。

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>

来源

2013-02-26 12:43:17 Purus

要以更简单的样式编写此脚本，您必须使用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(); } 
});

来源

2013-04-17 10:34:52 kmas

Fancybox弹出式菜单+ JSVideo HTML5视频 - 为什么我失去了我的控件？

回答

相关问题