0

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
István Bálinth
  • 93
  • 1
  • 8

2 Answers2

2

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);
}
pistou
  • 2,799
  • 5
  • 33
  • 60
ellipsis
  • 12,049
  • 2
  • 17
  • 33
  • This has a potential problem: if the video has not loaded and started playing by the time this code runs, then it will not pause exactly at 3 seconds. Ideally this code should be wrapped in an event handler for the video load/play. – Alvaro Montoro Dec 25 '18 at 10:11
  • Thank you. This works only for the first time. When the movie restarts doesn't pause at 3 seconds. – István Bálinth Dec 25 '18 at 10:59
  • I have edited the answer. This one is a bit messy but does the job. Only problem is that, if you deliberately pause the video, you wont get the same pause and play effect. – ellipsis Dec 25 '18 at 12:08
1

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68