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

时间:2016-04-10 03:41:37

标签: javascript youtube html5-video

我有一个像时间(秒)的点数组:

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

我希望视频从1到5播放然后暂停。然后发生一些事件(如按钮点击),它从5到7播放然后暂停,依此类推。我怎么能用js / jquery做到这一点?

1 个答案:

答案 0 :(得分:3)

只需排队时间(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++;
        ....