Loop HTML5 Videos on "ended" Event

Question

An html5 video plays. Once it has finished, the script below is called, which incriments to the next video which it adds to the next line and begins playing it. How do I turn this into a loop so once that second video finishes playing, it will append a third video, and so on?

<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 seeing the changes, here is some logic that should do what you're asking...

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 about adding the loop attribute to your video tag? W3 Resource

Answer 2

Try to use it help you?

In 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 3

Try to use it help you for jQuery?

In 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> 

Answer 4

HTML 5 video can be looped by using the 'loop' attribute:

loop="loop"

Browsers without loop support can be supported via:

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

Reference