Question

我正在使用video.js插件，并在我的网站加载时播放视频介绍。一旦页面加载，它就会通过自动播放工作，它位于一个被z索引并叠加在我的主页上的div容器中。

我将jquery设置为delay()，然后fadeOut()显示我的主页。

理论上说只有每个人都有不同的连接速度，fadeOut()经常发生得太早或太晚。

当视频停止时，有fadeOut()我的div的方法吗？

这是我的jQuery：

$(document).ready(function() {
        $("#overlay-video").delay(10000).fadeOut('slow');
   });

编辑：我刚刚尝试了以下内容，但这也不起作用：

$(document).ready(function(){
  $("#movie-id").bind('ended', function(){
    alert("planet earth");
  });
});

感谢您回复我的HTML看起来像这样：

<div id="overlay-video">
    <!-- Begin Video.js -->
    <video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
    </video>
    <!-- End Video.js -->
</div>

我的jQuery正在运行，因为我可以淡出视频元素。

Answer 1

夫妻俩：

主页上的所有脚本只需要一个doc.ready fxn
使用on()方法（使用jQuery 1.7 +）
最重要的是，fadeOut()需要位于on('ended')函数

作为一般HTML5 <video>解决方案，这应该有效：http://jsfiddle.net/trpeters1/XzCMb/1/

$(document).ready(function(){
    $("#movie-id").on('ended', function() {             
        console.log('im done');
        $("#overlay-video").delay(10000).fadeOut('slow');
    });
});

但是，Video-js似乎需要调用video.js对象，所以请改为：http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video

_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
   this.addEvent("ended", function(){ //adding "ended" event to video-js object
     {   console.log('im done');
        $("#overlay-video").delay(10000).fadeOut('slow');
      } 
   });
 });

SEO友好的HTML5视频（video.js）介绍与叠加淡出

1 个答案: