javascript - SEO 友好的 HTML5 视频 (video.js) 介绍，带有叠加淡出功能

Question

我正在使用video.js插件并有一个视频介绍，在我的网站加载时播放。它的工作原理是在页面加载后立即自动播放，并且它位于一个 div 容器中，该容器是 z 索引的并覆盖在我的主页上。

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

理论上很好，只是每个人都有不同的连接速度，并且 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

几件事:

1. 只有一个doc.ready主页上的所有脚本都需要 fxn
2. 使用 on()方法(使用 jQuery 1.7+)
3. 最重要的是，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');
      } 
   });
 });