代码之家 › 专栏 › 技术社区 › Pam

javascript addEventListener暂停和播放视频

addeventlistener video html javascript

Pam · 技术社区 · 6 年前

我有一个HTML格式的视频。我希望视频在播放后暂停5秒,所以我使用了AddEventListener。我还有两个按钮可以调用restart()或jump()。

当我播放我的视频时,会在我的视频上调用事件侦听器。它在5秒时暂停,但5秒后无法播放(我已尝试删除侦听器,但视频不再暂停)。当我调用jump()时,它将花费我10秒,但当我尝试播放它时,它将继续暂停。当我调用reset()时,视频将再次播放5秒,这是有意义的,因为我有一个监听器。当我调用jump()时,如何让它在10秒后播放?一开始我想我得把我的听者移开,但我相信我仍然需要它,因为我希望视频在15秒后暂停。或者我需要在其他地方打电话给removeEventListener?

var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5) {
    this.pause();       
}
});


function restart(){
    video.currentTime = 0;
}

function jump(){ 
    video.currentTime = 10; 
    if (video.currentTime >=15){
       video.pause
    }
}

HTML

<video id="myvid" width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<button onclick="restart()">restart</button>
<button onclick="jump()">jump</button>

1 回复 | 直到 6 年前

Kavian K. 6 年前

您必须将暂停时间保存在变量中。然后您可以在跳转功能中使用它:

var video = document.getElementById( 'myvid' ),
    pausedtime = 0;

video.addEventListener( 'timeupdate', function() {
    if ( this.currentTime >= pausedtime + 5 ) {
        this.pause();
        pausedtime = this.currentTime
    }
});

function restart(){
    video.currentTime = 0;
    pausedtime = 0;
    video.play()
}

function jump(){
    pausedtime += 5;
    video.currentTime = pausedtime;
    video.play()
}

<video id="myvid" width="320" height="240" controls>
    <source src="http://iandevlin.com/html5/media-player/parrots.mp4.mp4" type="video/mp4">
    <source src="http://iandevlin.com/html5/media-player/parrots.webm" type="video/webm">
</video>

<br>

<button type="button" onclick="restart()">Restart</button>
<button type="button" onclick="jump()">Jump</button>