播放 Html5 视频并在特定时间点暂停

Posted 2023-05-08

【中文标题】播放 Html5 视频并在特定时间点暂停

【英文标题】：Play Html5 video and pause at specific points in time

【发布时间】：2016-07-31 05:53:52

【问题描述】：

我有一个像这样的时间点（秒）数组：

var points = [1,5,7,9,23,37];

我希望视频从 1 点播放到 5 点，然后暂停。然后发生一些事件（如按钮单击），它从 5 播放到 7，然后暂停等等。如何使用 js/jquery 做到这一点？

【参考方案1】：

只需排队时间（currentStopTime）并检查视频的currentTime。如果 currentTime >= currentStopTime 则暂停视频，将 currentStopTime 设置为数组中的下一个时间。

var points = [1,5,7,9,23,37],
    index = 1,
    currentStopTime = points[index];

// start video using: video.currentTime = points[0], then video.play()

// run this from a timeupdate event or per frame using requestAnimationFrame
function checkTime() 
    if (video.currentTime >= currentStopTime) 
        video.pause();
        if (points.length > ++index)        // increase index and get next time
            currentStopTime = points[index]
        
        else                                // or loop/next...
            // done
        
    

然后当暂停时，启用一个动作，只需调用 play() 重新开始视频。如果您需要准确的重启时间，请通过添加以下内容强制该时间：

...
    if (video.currentTime >= currentStopTime) 
        video.pause();
        video.currentTime = currentStopTime;
        index++;
        ....