HTML5 Video - pause for a few seconds then continue playback

Question

I have a HTML5 video element in my page and what I'd like to happen is when it reaches the 3 second mark, it needs to pause for 2 seconds and then continue playback.

The video length is about 8 seconds.

<video id="video" playsinline autoplay muted loop>
  <source src="video.mp4" type="video/mp4"/>
  <source src="video.webm" type="video/webm"/>
</video>

Answer 1

This does it

const video = document.getElementById('myVideo');
function playVid() {
    video.play();
    window.setTimeout(pauseVid, 3000);
}
function play() {
    video.play();
}
function pauseVid() {
    video.pause();
    window.setTimeout(play, 5000);
}

Answer 2

setTimeout() .currentTime & timeupdate

Go to the link above to understand why setTimeout() ain't so great.

.currentTime Property

This property is used by <audio> and <video> tags to get/set playback time in seconds. In the following demo it is used to get the time:

var t = this.currentTime;

timeupdate Event

This event fires 4 times a second while an <audio> or <video> tag is playing. In the demo both a <video> and <audio> tag are registered to to the timeupdate event:

video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);

---

Setup

[controls] Attribute

Added so the time can be reviewed as the demo runs, it's optional and recommended that it not be used in production.

<audio> Tag

An <audio> tag has been added as a timer, The attributes [muted] and [autoplay] are required:

<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>

Both tags will start playing and are listening to the timeupdate event and will call a function at a predetermined time:

function tick(e) {
  var t = this.currentTime;
  if (t >= 3) {
    this.pause();
    video.removeEventListener("timeupdate", tick);
  }
}

function tock(e) {
  var t = this.currentTime;
  if (t >= 5) {
    video.play();
    timer.removeEventListener("timeupdate", tock);
  }
}

Basically when the <video> and <audio> tags are triggered every 250ms, they are calling those functions:

1. <video> calls function tick()

2. if the playback time is 3 or more seconds it pauses.

3. to avoid constant triggering every 250ms, the eventListener is removed.

4. <audio> calls function tock()

5. if the playback time is 5 or more seconds it will play the <video>.

6. for the same reason as the <video>, the eventListener is removed.

---

Demo

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

video.addEventListener("timeupdate", tick);
timer.addEventListener("timeupdate", tock);

function tick(e) {
  var t = this.currentTime;
  if (t >= 3) {
    this.pause();
    video.removeEventListener("timeupdate", tick);
  }
}

function tock(e) {
  var t = this.currentTime;
  if (t >= 5) {
    video.play();
    timer.removeEventListener("timeupdate", tock);
  }
}

<video id="video" playsinline muted loop controls autoplay width='300'>
  <source src="https://html5demos.com/assets/dizzy.mp4" type="video/mp4"/>
</video>
<audio id='timer' src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' muted controls autoplay></audio>