Loop HTML5 Video at the "Completed" Event

Question

Play html5 video. As soon as it finishes, the script below is called, which leads to the next video, which it adds to the next line and starts playing it. How to turn this into a loop as soon as the second video finishes the game, does it add the third video, etc.?

<div> <video id="video0" autoplay> <source src="video0.mp4" /> </video> </div> 

.

 var i=0 $('video'+i).on("ended", function() { i++; $(this).parent().append('<br /><video id="video' + i + '" autoplay><source src="video' + i + '.mp4" /></video>'); }; 

Answer 1

Updated answer:

After re-reading your question and looking at the changes, here is some logic that should do what you ask ...

 var i = 0; var numVideos = 5; var addVideo = function() { i++; var nextVideo=$('<video id="video' + i + '" autoplay><source src="video' + i + '.mp4" /></video>'); nextVideo.on('ended', addVideo); $(this).after('<br />').after(nextVideo); }; $('video0').on('ended', addVideo); 

Original answer:

How to add loop attribute to video tag? Resource W3

Answer 2

HTML 5 videos can be looped using the loop attribute:

 loop="loop" 

Support for browsers without loop support can be supported through:

 $("#video").bind('ended', function(){ this.play(); }); 

Link

Answer 3

Try using it to help you?

In the Head tag:

  <script type="text/javascript" language="javascript"> video_count = 1; function run() { video_count++; var videoPlayer = document.getElementById("homevideo"); if (video_count == 4) video_count = 1; var nextVideo = "ModelVideo/1/video" + video_count + ".mp4"; videoPlayer.src = nextVideo; videoPlayer.load(); videoPlayer.play(); }; </script> 

In body tag:

  <div style="width: 30%;"> <video id="homevideo" width="100%" controls autoplay onended="run()"> <source id="ss" src="ModelVideo/1/video1.mp4" type='video/mp4'/></video> </div> 

Answer 4

Try using it for jQuery?

In the Head tag:

  <script type="text/javascript"> $(document).ready(function () { v_count = 1; $("#video").bind('ended', function () { v_count++; if (v_count == 4) v_count = 1; $("#sovideo").attr("src", "ModelVideo/1/video" + v_count + ".mp4"); $("#video").load(); this.play(); }); </script> 

In body tag:

  <div style="width: 30%;"> <video id="video" width="100%" controls> <source id="sovideo" src="ModelVideo/1/video1.mp4" /> </div>