Question

好的，我是一名JavaSript新手，所以请原谅我对此的无知。我有一个onClick事件，用于通过调用两个函数从一个数组触发自动循环随机视频（＆＃34; player1＆＃34;）的图像：

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 也使得当第一个随机视频结束时，另一个随机视频会在没有任何用户干预/互动的情况下立即播放，之后是第三个随机视频，依此类推？

换句话说，我点击此图片，视频阵列中的随机视频开始播放，然后视频结束后，同一阵列中的另一个随机视频会自动开始播放（无需我再次点击图像），然后无限期地点击另一个视频等。

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视频事件添加随机，连续的视频自动播放？

1 个答案: