播放Html5视频并在特定时间点暂停 [英] Play Html5 video and pause at specific points in time

问题描述

我有一系列时间点（秒），如下所示：

I have an array of points in time (seconds) like this :

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

我希望视频从1到5播放然后暂停。然后发生一些事件（如按钮点击），它从5到7播放，然后暂停，依此类推。如何使用js / jquery执行此操作？

I want the video to play from 1 to 5 and then pause. Then some event happens (like button click) and it plays from 5 to 7 and then pauses and so on. How can I do this using js/jquery ?

推荐答案

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

Just queue up the times (currentStopTime) and check the currentTime of the video. If currentTime >= currentStopTime then pause video, set currentStopTime to next time in the array.

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（）再次启动视频。如果您需要准确的重启时间，请通过添加以下内容强制执行该时间：

Then when paused, enable an action to happen, simply call play() to start video again. If you need an accurate restart time then force that time by adding:

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

这篇关于播放Html5视频并在特定时间点暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！