0

我正在使用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 正在工作，因为我可以很好地淡出视频元素。

4

1 回答 1

2

几件事：

  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-视频的结尾

_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');
      } 
   });
 });
于 2012-05-08T12:57:11.010 回答