我正在构建一个简单的php页面,它使用HTML5视频和jQuery绑定功能背靠背播放视频播放列表,以便在当前视频结束后淡入并播放下一个视频.

将函数绑定到已结束事件的效果非常好,但我想在视频结束前20秒启动fadeIn&play功能(比如说).

但我似乎无法弄清楚如何让这种魔力发生.这甚至可能吗？

我的HTML:

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

我的jQuery:

$('video').bind("ended", function(){
   $(this).fadeOut(20000).next().fadeIn(20000).get(0).play(); 
});

解决了!

$('video').on('timeupdate', function(event) {
  var current = Math.round(event.target.currentTime * 1000);
  var total = Math.round(event.target.duration * 1000);

  if ( ( total - current ) < 20000 ) {
    $(this).fadeOut(2000).next().fadeIn(2000).get(0).play();
  } 
});

非常感谢帮助人员,我能够使用您的精彩评论和其他看似无关的 SO帖子拼凑出一个答案:

未捕获的TypeError:对象[object Object]没有方法'addEventlistner'

如果有人有一个更清洁的方式把它放在一起这太棒了,但这似乎对我的目的很好.