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

Question

我想编写一个没有任何控件的 HTML5 视频播放器。只需自动播放和循环目录中的多个视频 "my website/media" 全屏。

包括 "autoplay loop" 和一些 CSS 在内的用于全屏播放视频的标签对我来说工作正常，但我不能播放多个视频。

是否可以在不使用任何控件或可见播放列表的情况下添加更多视频？只是在循环中自动播放我目录中的所有视频？

<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>

Answer 1

有一个 "ended" 事件可以在元素上监听。您可以这样做，在第一个视频结束后用新视频替换 src。

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

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

How to code a HTML5 fullscreen video player with multiple videos in loop?

html

javascript

css

html5-video