如何向现有的 onClick 视频事件添加随机、连续的视频自动播放？

Question

好的，我是一个 JavaSript 新手，所以请原谅我对此的无知。我有一个图像的现有 onClick 事件，它通过调用两个函数从数组触发自动循环随机视频 ("player1")：

function setMp4Source01(){
    var videos = [
        "video1",
        "video2",
        "video3",
    ], videos = videos[Math.floor(Math.random() * videos.length)];
    player1.setVideoSource("content/videos/" + videos + ".mp4");
}

和

function play(){
    player1.play();
}

通过这个

<img src ... onclick="setMp4Source01();play();"/>

所以我的问题是：让这个 onClick 事件做它已经在做的事情的最优雅的方法是什么 AND 也让第一个随机视频结束时，另一个随机视频在没有任何用户的情况下立即播放 intervention/interaction，然后是第三个随机视频，依此类推？

换句话说，我点击这张图片，videos 数组中的一个随机视频开始播放，然后该视频一结束，另一个随机视频就开始播放了相同的数组会自动开始播放（无需我再次单击图像），然后无限期地播放另一个视频等。

Answer 1

您可以观察视频播放器并使用 ended 事件调用随机化器函数，然后在设置新源后播放视频。

player1.addEventListener('ended',nextVideo,false);

function nextVideo() {
    setMp4Source01();
}

这里还有其他检测视频结束的方法：Detect when an HTML5 video finishes

编辑：

要将所有代码放在一起，您的 JS 应如下所示：

var videos = ["video1", "video2", "video3"];
var player1 = document.getElementById("myPlayer");

function setMp4Source01() {
    var currentVideoIndex = Math.floor(Math.random() * videos.length);
    var currentVideo = "content/videos/" + videos[currentVideoIndex] + ".mp4";
    player1.src = currentVideo;
    player1.load();
    player1.play();
}
player1.addEventListener('ended', nextVideo, false);

function nextVideo() {
    setMp4Source01();
}

如何向现有的 onClick 视频事件添加随机、连续的视频自动播放？

How to add random, continuous video autoplay to existing onClick video event?

javascript

random

video

onclick

autoplay