如何编写带有多个循环视频的 HTML5 全屏视频播放器？

Question

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>

Answer 1

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);
    }