All geek questions in one place

HTML5 video loop src change on end play not working

I have several videos playing one after another 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 a warning before the game, it works. But without warning, this is not so. Initialize the second video playback:

 videoPlayer.src = nextVideo; alert("a"); videoPlayer.play();
+4
source share
1 answer

The html5 video element has its own eventtype onended, you do not 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 just one format for your video is not enough, since no format is supported by all major browsers.

EDIT:

LINK
Source: w3schools

At Media Events
Events triggered by media files such as video, images, and audio (apply to all HTML elements, but are most commonly used in environments such as <audio> , <embed> , <img> , <object> and <video> ):

onended: Script to run when the media reaches the end (useful event for messages such as "thanks for listening")

+11
source

Source: https://habr.com/ru/post/1490220/

More articles:


All Articles