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]; I want the video to play from 1 to 5 and then pause. Then some event happens (like button cl
Solution 1:
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 requestAnimationFramefunction 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
}
}
}
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++;
....
Post a Comment for "Play Html5 Video And Pause At Specific Points In Time"