How do I pause an HTML video and resume automatically over a loop?

Question

I have a 4 second long video embedded in my HTML page using video tag. I need to pause the video for 2 secs first at 2.99s, 3.44s and then at 4.00s. For that to happen the video needs to resume from previous instance.

But after long hours of effort I haven't been able to find a solution. Thus far I have just been able to get the video paused for >=2.99s but it does not resume even after I had used setInterval function.

Here is the code:

var vTag = document.getElementById('video');

setInterval(function() { pVideo();}, 2000);

function pVideo() {
      vTag.ontimeupdate = function(e) {
      cTime = vTag.currentTime;
      (cTime >= 2.9 || cTime >= 3.44 || cTime >= 4.00) ? vTag.pause(): vTag.play();
 };
};

PS: The video is being used as a background video for header section.

Answer 1

Try this.. this is a fully working code

HTML

<video id="video" autoplay muted loop>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

JS

var vTag = document.getElementById('video');
vTag.play();
var wasPausedBefore1 = 0;
var wasPausedBefore2 = 0;
var wasPausedBefore3 = 0;

vTag.ontimeupdate = function(e) {
    cTime = vTag.currentTime;
    if (cTime < 1) { 
        wasPausedBefore1 = 0; 
        wasPausedBefore2 = 0; 
        wasPausedBefore3 = 0;
    } else if (cTime > 2.8 && cTime < 3.1 && wasPausedBefore1 == 0) {
        vTag.pause();
        wasPausedBefore1 = 1;
        setTimeout(function() {
            vTag.play();
        }, 4000);
    } else if(cTime > 3.3 && cTime < 3.6 && wasPausedBefore2 == 0){
        vTag.pause();
        wasPausedBefore2 = 1;
        setTimeout(function() {
            vTag.play();
        }, 4000);
    } else if(cTime > 3.8 && cTime < 4.0 && wasPausedBefore3 == 0){
        vTag.pause();
        wasPausedBefore3 = 1;
        setTimeout(function() {
            vTag.play();
        }, 4000);
    }
};

And here is a working fiddle : https://jsfiddle.net/o9mknsx0/1/

Answer 2

Use setTimeout instead of setInterval .

I'm not sure if you'd be able to catch the times you need using timeupdate since it fires either every 200ms or 250ms but I'd do it like so:

var vTag = document.getElementById('video');

vTag.addEventListener('timeupdate', function() {
    var cTime = vTag.currentTime;
    if(cTime === 2.99 || cTime === 3.44 || cTime === 4)) {
        vTag.pause();
        setTimeout(function() {
            vTag.play();
        }, 2000);
    }
});

For it to catch your times like 2.99 and 3.44 then you need to poll for it every 10ms using setInterval .

setInterval(function() {
    var cTime = vTag.currentTime;
    if(cTime === 2.99 || cTime === 3.44 || cTime === 4) {
        vTag.pause();
        setTimeout(function() {
            vTag.play();
        }, 2000);
    }
}, 10);

Answer 3

You'll need to update your if statement to track the pause values somehow, otherwise your video will not play because after 2.9 seconds, the if will always return true for all those conditions.

var vTag = document.getElementById('video');

setInterval(pVideo, 2000); //function reference

var nextPause = [2.9, 3.44, 4.00];
var pauseIndex = 0;
function pVideo() {
    vTag.ontimeupdate = function(e) {
        cTime = vTag.currentTime;
        var pauseTime = nextPause[pauseIndex];
        if (cTime >= pauseTime) {
            vTag.pause();
            setTimeout(vTag.play, 2000); //unpause after 2 seconds
            if (++index <= nextPause.length) index++
            else index = 0;
        }
    }
};

This is untested and my logic may be flawed, but I feel like the concept is sound.

Put all your pause times into an array, and track the last used index (resetting as well, if need be (looping video)). Then, if the if statement matches, pause the video and run a timeout for 2 seconds to play the video again.