Зацикливание видео с выбранной продолжительности

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>

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();