video - jQuery 绑定(bind) : run function before media ends

Question

我正在构建一个简单的 php 页面，该页面使用 HTML5 视频和 jQuery 绑定(bind)函数来连续播放视频播放列表，以便在当前视频结束后淡入并播放下一个视频。

将函数绑定(bind)到 ended 事件效果很好，但我想在视频结束前 20 秒触发淡入和播放函数(比方说)。

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

我的 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();
  } 
});

非常感谢您的帮助，我能够使用您的精彩评论拼凑出一个答案，而其他看似无关紧要所以帖子:

Uncaught TypeError: Object [object Object] has no method '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 应该替换为您想在函数内执行的任何操作。不过我已经测试过了，效果很好。

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

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

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

这里是视频对象属性和事件的引用

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