HTML5: Play videos one after the other in a video tag from an array?

Question

I have been trying to play a few videos in HTML5 video tag one after the other.

I came across a few similar questions and tried to write my code based on the given answers to those questions.

However, I can only play the first video from the array and it keeps looping the first video !

So, This is my code:

I store the videos in an array like this:

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"]

I try to start the videos in a click event like so:

videoSource = ["vidoe1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"]

$(document).on('click','.playBtn', function(e){

var videoCount = videoSource.length;
var video_index     = 0;
var video_player    = null;

function onload(){
            videosToPlay = document.getElementById("videosToPlay");
            video_player = document.getElementById("idle_video");
            video_player.setAttribute("src", videoSource[video_index]);
            videosToPlay.play();
        }

function onVideoEnded(){    
            if(video_index < videoSource.length - 1){
                video_index++;
            }
            else{
                video_index = 0;
            }
            video_player.setAttribute("src", videoSource[video_index]);
            videosToPlay.play();
        }


onload();

$("#videosToPlay").bind("ended", function() {
    //alert('Video ended!');
    onVideoEnded();
});



});

And this is my video tag:

<video id="videosToPlay" width="100%" preload="none" controls playsinline>

<source id="idle_video" src="" type="video/mp4">

</video>

Could someone please advice on this issue?

Thanks in advance.

Answer 1

This should work:

videoSource = ["video1.mp4", "video3.mp4", "video44.mp4", "video55.mp4", "video9.mp4"];

$('.playBtn').click(function(e){

var videoCount = videoSource.length;
var video_index     = 0;

function onload(){
            videosToPlay = document.getElementById("videosToPlay");
            videosToPlay.addEventListener('ended',onVideoEnded,false);
            videosToPlay.src=videoSource[video_index];
            videosToPlay.play();
        }

function onVideoEnded(){    
            video_index++;
            if (video_index > videoCount-1) video_index = 0;
            videosToPlay.src=videoSource[video_index];
            videosToPlay.play();
        }


onload();

});

Also delete source element in video tag.

Check it and answer if it worked :)