HTML5 视频 - 暂停几秒钟然后继续播放

Question

我的页面中有一个 HTML5 视频元素，我想要发生的是当它达到 3 秒标记时，它需要暂停 2 秒然后继续播放。

视频长度约8秒。

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

Answer 1

这样做

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

转到上面的链接以了解为什么setTimeout()不是很好。

.currentTime属性

<audio>和<video>标签使用此属性来获取/设置以秒为单位的播放时间。 在以下演示中，它用于获取时间：

var t = this.currentTime;

timeupdate事件

当<audio>或<video>标签正在播放时，此事件每秒触发 4 次。 在演示中， <video>和<audio>标签都注册到timeupdate事件：

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

---

设置

[controls]属性

添加以便在演示运行时可以查看时间，它是可选的，建议不要在生产中使用。

<audio>标签

添加了一个<audio>标签作为计时器，属性[muted]和[autoplay]是必需的：

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

两个标签都将开始播放并监听timeupdate事件，并将在预定时间调用函数：

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>和<audio>标签每 250 毫秒触发一次时，它们会调用这些函数：

1. <video>调用function tick()

2. 如果播放时间为 3 秒或更多秒，则暂停。

3. 为避免每 250 毫秒不断触发，删除了 eventListener。

4. <audio>调用function tock()

5. 如果播放时间为 5 秒或更长时间，它将播放<video> 。

6. 出于与<video>相同的原因，删除了 eventListener。

---

演示

 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>