I want to code an HTML5 video player without any controls. Just autoplay and loop multiple videos from a directory "my website/media" fullscreen.
The tag including "autoplay loop" and some CSS to get the video fullscreen is working fine for me, but I can't play more than one video.
Is it possible to add more videos without using any controls or visible playlists? Just playing all videos from my directory automatically in the loop?
<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>
There is an "ended" event you can listen for on a element. You can do something like this to replace the src with a new video after the first one ends.
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "http://mysite/myMovie2.m4v";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.