Question

我无法想象如何为视频播放添加监听器。我希望它最终在达到特定的播放时间（即10秒）时停止。

我试过了：

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

但是它导致浏览器挂起，可能是因为我一直在发起video.play（）。

do while

导致同样的问题。

那我该怎么用？

Answer 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);

DEMO： http://jsfiddle.net/eGw52/

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

Answer 2

视频与承诺很好地配合。这是一个在特定时间点暂停的例程，并返回一个在发生这种情况时实现的承诺（或者视频因某些其他原因暂停或结束）。

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 ();

请注意，视频结尾也被视为视频“暂停”（暂停事件已触发），因此视频结束时也会实现承诺。

调整，因为您希望使用自己喜欢的promises库。如果您想向后运行视频（负回放率），则需要修复此问题。： - ）

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

2 个答案: