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

这样做-

<script> 
var vid = document.getElementById("myVideo"); 
function playVid() { 
vid.play(); 
window.setTimeout(pauseVid, 3000); 
}
function play()
{ vid.play(); } 
function pauseVid() 
{ 
vid.pause();
window.setTimeout(play, 5000);
}
</script>

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);
  }
}

基本上，每250毫秒触发一次<video>和<audio>标签时，它们就会调用这些函数：

1. <video>呼叫function tick()

2. 如果播放时间为3秒或更长时间，它将暂停。

3. 为避免每250毫秒持续触发一次，会删除eventListener。

4. <audio>呼叫function tock()

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

6. 出于与<video>相同的原因，事件监听器被删除。

---

演示

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>