使HTML5视频在指定时间停止

Question

我的页面中有一个HTML5视频元素.我想播放的视频持续时间为10分钟.

我必须从第1分钟到第5分钟播放视频的一部分.
我可以通过设置其currentTime属性从特定时间开始.
但是我如何在特定时间停止jQuery或JavaScript的视频？

Answer 1

TL; DR:听听"timeupdate":

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();
    }
});

在JavaScript中等待某些东西的常用方法是等待事件或超时.在这种情况下,超时是不可能的,用户可能会自己暂停视频.在这种情况下,停止不会在您的特定时间,但更早.

定期检查时间也太昂贵了:您要么经常检查(因此浪费宝贵的处理能力),要么经常检查不足,因此您不会在正确的时间停下来.

然而,这currentTime是一个可检查的属性,幸运的是,有timeupdate媒体元素的事件,描述如下:

当前播放位置作为正常播放的一部分或以特别有趣的方式改变,例如不连续.

结论是你可以简单地听timeupdate,然后检查你是否通过了标记:

// listen on the event
video.addEventListener("timeupdate", function(){
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(this.currentTime >= 5 * 60) {
        // pause the playback
        this.pause();
    }
});

请记住,只要用户尝试跳过5分钟,这将暂停.如果您想允许跳过并且最初只暂停视频超过5分钟标记,请删除事件监听器或引入某种标志:

var pausing_function = function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pausing_function);
    }
};

video.addEventListener("timeupdate", pausing_function);

Answer 2

该timeupdate事件正是您正在寻找的，但它仅以大约 2 fps 的速度触发，这太慢而无法在精确的时间停止。

对于这些情况，我使用requestAnimationFrame以 60 fps 触发并稍微减少结束时间，从而修复了小的“滞后跳跃”：

const onTimeUpdate = () => {
    if (video.currentTime >= (endTime - 0.05)) {
      video.pause()
    } else {
      window.requestAnimationFrame(onTimeUpdate)
    }
}
window.requestAnimationFrame(onTimeUpdate)