I have a number of videos playing one by one in the same HTML5 video player

HTML

<video id="homevideo" width="100%" autoplay autobuffer>
    <source src="app/video1.mp4" type='video/mp4' />
</video>

JS

video_count = 1;
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
    video_count++;
    if (video_count == 4) video_count = 1;
    var nextVideo = "app/video" + video_count + ".mp4";
    videoPlayer.src = nextVideo;
    videoPlayer.play();
}, false); 

If I put an alert before playing, it's working. But without the alert it's not. Initialize the second video play:

videoPlayer.src = nextVideo;
alert("a");
videoPlayer.play();

I have a number of videos playing one by one in the same HTML5 video player

HTML

<video id="homevideo" width="100%" autoplay autobuffer>
    <source src="app/video1.mp4" type='video/mp4' />
</video>

JS

video_count = 1;
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
    video_count++;
    if (video_count == 4) video_count = 1;
    var nextVideo = "app/video" + video_count + ".mp4";
    videoPlayer.src = nextVideo;
    videoPlayer.play();
}, false); 

If I put an alert before playing, it's working. But without the alert it's not. Initialize the second video play:

videoPlayer.src = nextVideo;
alert("a");
videoPlayer.play();

• javascript
• html
• html5-video

1 Answer 1

The html5 video element has an own eventtype onended, you dont need your own eventlistener.

Html:

<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="app/video1.mp4" type='video/mp4'/>
</video>

and

Script:

video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 4) video_count = 1;
        var nextVideo = "app/video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };

PS: Keep in mind that providing only one format for your video is not enough since no single format is supported by all major browsers yet.

EDIT:

LINK
Source: w3schools

At Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most mon in media elements, like <audio>, <embed>, <img>, <object>, and <video>):

onended: Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")