Loop video from the selected duration

Question

I can't make the video to loop after 2 seconds. It should loop after the video pauses. I'm not sure hot to make it happen. The functionality works fine, but doesn't loop.

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>

score 3 · Accepted Answer · answered May 16 '19 at 09:47

3

If you want the video to immediately go back to the start after 2 seconds and continue playing, simply set currentTime back to 0 within the timeupdate hanler. Your current logic setting currentTime is in the wrong place, and the try/catch around it is unnecessary. Try this:

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>

answered May 16 '19 at 09:47

Rory McCrossan

331,213
40
305
339

Brilliant! thanks dude! I need to functionality one that plays the video fror 2 seconds (on loop) and the other one till the end (on loop) Can I use this code and make to functions? – user173420 May 16 '19 at 10:20
Sure. To loop when the video ends research the `ended` event. The logic to restart the video is the same as the above, thoug – Rory McCrossan May 16 '19 at 10:21
Rory, would you be able to help me with this question please? https://stackoverflow.com/questions/56167309/play-video-in-loop-with-different-timing-and-function – user173420 May 16 '19 at 11:19

score 0 · Answer 2 · answered May 16 '19 at 09:53

You can put this there at your code:

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

This works, but note that the end result is that you add a new `timeupdate` event handler in every loop — Rory McCrossan, May 16 '19 at 09:55

Loop video from the selected duration

2 Answers2