从所选持续时间循环视频

Question

我不能让视频在2秒后循环播放。 它应该在视频暂停后循环播放。 我不确定是否会发生这种情况。 功能正常，但不循环。

 function playVideo() { var starttime = 0; // start at 0 seconds var endtime = 2; // stop at 2 seconds var video = document.getElementById('videoElm'); video.addEventListener("timeupdate", function() { if (this.currentTime >= endtime) { this.pause(); // SHOULD LOOP HERE? } }, false); //suppose that video src has been already set properly video.load(); video.play(); try { video.currentTime = starttime; } catch (ex) { //handle exceptions here } } playVideo(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <video id="videoElm" autoplay muted controls loop> <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm"> </video> </div> 

Answer 1

如果您希望视频在2秒后立即返回到开始并继续播放，只需在timeupdate hanler中将currentTime设置回0即可。 您当前的逻辑设置currentTime位于错误的位置，并且不需要try/catch 。 试试这个：

 var starttime = 0; // start at 0 seconds var endtime = 2; // stop at 2 seconds var video = document.getElementById('videoElm'); function playVideo() { video.addEventListener("timeupdate", function() { if (this.currentTime >= endtime) { this.currentTime = 0; // change time index here } }, false); video.load(); video.play(); } playVideo(); 

 <div> <video id="videoElm" autoplay muted controls loop> <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm"> </video> </div> 

Answer 2

你可以把它放在你的代码中：

function playVideo() {
  var starttime = 0; // start at 0 seconds
  var endtime = 2; // stop at 2 seconds
  var video = document.getElementById('videoElm');

  video.addEventListener("timeupdate", function() {
    if (this.currentTime >= endtime) {
      this.pause();
      starttime = 0;
      playVideo();
    }
  }, false);

  //suppose that video src has been already set properly
  video.load();
  video.play();
  try {
    video.currentTime = starttime;
  } catch (ex) {
    //handle exceptions here
  }
}

playVideo();