javascript - 从选定的持续时间循环播放视频

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 秒后立即返回开始并继续播放，只需设置 currentTime返回0在 timeupdate 内汉勒。您当前的逻辑设置 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>