如何在 html 页面中播放多个视频

Question

我想在视频结束时播放 720p (1280x720) 分辨率的视频，并在视频结束时自动播放并循环替换为数组中的另一个视频。

第一个视频效果很好，但它没有自动播放，并且在它结束之后。 它不会继续播放另一个视频。

这是我的代码：

            <div class="content-left">
                <video controls id="myVideo" width="1280" height="720" autoplay></video>
                    <script>
                    var videoSource = new Array();
                    videoSource[0]='videos/bluevideo.mp4';
                    videoSource[1]='videos/redvideo.mp4';
                    videoSource[2]='videos/yellowvideo.mp4';
                    var videoCount = videoSource.length;

                    document.getElementById("myVideo").setAttribute("src",videoSource[0]); 

                    function videoPlay(videoNum)
                        {
                    document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]);
                    document.getElementById("myVideo").load();
                    document.getElementById("myVideo").play();
                        }
                        document.getElementById('myVideo').addEventListener('ended',myHandler,false);
                        function myHandler() {
                        i++;
                        if(i == (videoCount-1)){
                        i = 0;
                        videoPlay(i);
                        }
                        else{
                        videoPlay(i);
                        }

                            }

                    </script>

            </div>

我哪里做错了？ 任何人都可以帮助我吗？非常感谢。

Answer 1

您有一个变量i您在myHandler中递增。 但是，它没有在任何地方声明。 您应该在事件处理程序的代码之外声明它，并将值设置为第一个索引：

var videoSource = new Array();
videoSource[0] = 'videos/bluevideo.mp4';
videoSource[1] = 'videos/redvideo.mp4';
videoSource[2] = 'videos/yellowvideo.mp4';
var videoCount = videoSource.length;
var i = 0;
document.getElementById("myVideo").setAttribute("src", videoSource[0]);

function videoPlay(videoNum) {
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);

function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }

}