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

时间:2018-12-25 09:37:51

标签: javascript video

我的页面中有一个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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

setTimeout() .currentTimetimeupdate

转到上面的链接以了解为什么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>