Search code examples
htmlhtml5-videoplayback

How can I get a video to only loop once

How can I get an html5 video to loop only once?

I'm using the html video tag and my video lasts for ten seconds. I need 20 seconds of video playback.

Solution

  • You could set the autoplay to true and then call play() on the element when it reaches the end. Perhaps not the best approach but I think it should work, this example is using jQuery:

    $(document).ready(function() {
  // set this variable to the number of times you like to loop the video
  var loop = 1; 
  // this event will be invoked when the media has reached the end
  $('#video').on('ended', function() {
    // check if we should replay the media
    if(loop--) {
      // replay the video
      this.play();
    }
  });
});

    The markup should be something like this:

    <video src="test.ogg" id="video" autoplay></video>