HTML5 video loop src change on end play function not working
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 common 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")
Related videos on Youtube
Dhamu
I am working as Developer - HTML, CSS, jQuery, AngularJS, PHP, MYSQL, Wordpress, OpenCart, CI, YII, PhoneGap mobile application development.
Updated on September 16, 2022Comments
-
Dhamu over 1 year
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();