如何将监听器添加到视频播放中答案

【问题标题】：How to add listener to a video playback如何将监听器添加到视频播放中
【发布时间】：2013-07-11 21:58:00
【问题描述】：

我不知道如何在视频播放中添加监听器。我希望它最终在达到特定播放时间（即 10 秒）时停止。

我试过了：

while( video.currentTime != timeToStop){
            video.play();
        }

但这会导致浏览器挂起，可能是因为我一直在启动 video.play()。

do while

导致同样的问题。

那我应该用什么？

【问题讨论】：

你想做什么？您的代码没有显示任何有关添加侦听器的信息。您希望监听器何时运行？视频什么时候开始？什么时候结束？您可以监听一些事件，例如video.addEventListener("ended", someFunction);。如果你想监听每一个tick，你可以使用timeupdate事件
这是您可能想要的示例：jsfiddle.net/XK4NW
很好，这正是我所需要的。谢谢，您想将其作为答案发布还是我应该删除此问题？

标签： javascript jquery html html5-video

【解决方案1】：

要跟踪视频的进度，您可以使用timeupdate 事件并检查视频的currentTime 属性是否已超过最大值。这是一个例子：

window.addEventListener("load", function () {
    var video = document.getElementById("video1"),
        timeToStop = 2;

    video.addEventListener("timeupdate", function () {
        if (this.currentTime >= timeToStop) {
            this.pause();
        }
    }, false);
}, false);

演示： http://jsfiddle.net/eGw52/

（示例使用 2 秒，而不是 10 秒）

【讨论】：

【解决方案2】：

视频与 Promise 配合得很好。这是一个在特定时间点暂停并返回一个承诺的例程，当这种情况发生（或视频因其他原因暂停，或结束）时会履行。

function pause_at (video, t) {
    var promise=new Promise ();

    function reached() {
        promise.fulfill (video.currentTime);
        video.removeEventListener ("timeupdate", timeupdate);
        video.removeEventListener ("pause", reached);
    }

    function timeupdate () {
        if (video.currentTime >= t) {
            reached ();
            video.pause ();
        }
    }

    video.addEventListener ("timeupdate", timeupdate);
    video.addEventListener ("pause", reached);
    return promise;
}

用法：

pause_at (video,60).then (function () {alert ("At 60-second mark!");});
video.play ();

请注意，视频结束也被认为是视频“暂停”（触发了 pause 事件），因此当视频结束时，promise 也会实现。

根据您的喜好调整您最喜欢的 Promise 库。如果您想向后播放视频（负播放率），则需要解决此问题。 :-)

【讨论】：