我的页面中有一个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>
答案 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()
.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>
标签时,它们就会调用这些函数:
<video>
呼叫function tick()
如果播放时间为3秒或更长时间,它将暂停。
为避免每250毫秒持续触发一次,会删除eventListener。
<audio>
呼叫function tock()
如果播放时间为5秒或更多,它将播放<video>
。
出于与<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>