在JavaScript / HTML5中暂停后恢复视频播放?

时间:2016-09-19 17:11:12

标签: javascript html5 html5-video

我试图暂停视频然后恢复播放。但我认为我不知何故需要清除暂停功能?我已经尝试了myVideo.play()的迭代,我可以让它发挥,但只是短暂的爆发。任何帮助都会受到欢迎。

<!DOCTYPE html>
<html>
<head>
<title> Html5 Video Test </title> 
<meta charset="UTF-8">
</head>

<body> <
<div style="text-align:center">

  <button onclick="playPause()">Play/Pause</button>

  <video id="video1" width="420" autoplay>

    <source src="test.mov" type="video/mov">
  <source src="test.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<script>


var myVideo = document.getElementById("video1");

myVideo.addEventListener("timeupdate", function(){
    if(this.currentTime >= 1 * 2) {
        this.pause();
    }
});

</script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望您的事件监听器只触发一次(所以当您下次播放视频时,它不会立即再次暂停)。如果是这样,请试一试:

var myVideo = document.getElementById("video1");

// Give this function a name so we can refer to it later.
function pauseOnce() {
   if (this.currentTime >= 1 * 2) {
       this.pause();

       // Our work is done. Remove the event listener. (We need a reference to
       // the function here.)
       this.removeEventListener("timeupdate", pauseOnce);
   }
}

myVideo.addEventListener("timeupdate", pauseOnce);