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

How to add listener to a video playback

本文关键字：视频 播放 添加 侦听器      更新时间：2023-09-26

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

我试过：

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

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

do while

造成同样的问题。

那我该用什么？

要跟踪视频的进度，可以使用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秒）

视频与承诺配合得很好。这里有一个例程，它在特定的时间点暂停，并返回一个承诺，当这种情况发生时（或者视频因其他原因暂停，或者结束），该承诺就会实现。

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

请注意，视频结束也被视为视频"暂停"（触发暂停事件），因此当视频结束时，承诺也将实现。

调整你希望使用你最喜欢的承诺库。如果你想反向运行视频（负播放速率），你需要解决这个问题。：-）

相关文章：