jQuery bind:媒体结束前运行函数

Question

我正在构建一个简单的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'

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

Answer 1

我给出的第一个答案有一些问题。我已将其修改为正确的

var myVid = document.getElementById("video1");

myVid.addEventListener('timeupdate', function() {
    if( (myVid.duration - myVid.currentTime ) < 20000 ) {
        console.log("less than 20 seconds left"); 
    }
});

这要求您为视频标签提供一个 id，并且 console.log 应替换为您想要在函数内执行的任何操作。不过我已经测试过这个并且效果很好。

在您的情况下，您需要运行一个循环并将事件绑定到每个视频，但请确保引用实际视频而不是其属性之一，例如长度或项目。

如果您将此代码复制并粘贴到<script>本示例的“亲自尝试”部分的标签中，它将起作用。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_progress

这是视频对象属性和事件的参考

http://www.w3schools.com/tags/ref_av_dom.asp