在按钮点击时播放随机视频

我应该先说我不擅长JS，而且我还在努力学习它。

我有10个mp4s，我需要在点击按钮时随机播放一个。我很难做到这一点，我到处寻找解决方案，但都无济于事。

这是我到目前为止所知道的：

HTML

<div class="videoHolder">
    <video id="video" autoplay muted>
    Your browser does not support the video tag.
    </video>
</div>
<button type="button" name="button">Push to Play</button>

var videos = [
    "mp4s/video1.mp4",
    "mp4s/video2.mp4",
    "mp4s/video3.mp4",
    "mp4s/video4.mp4",
    "mp4s/video5.mp4",
    "mp4s/video6.mp4",
    "mp4s/video7.mp4",
    "mp4s/video8.mp4",
    "mp4s/video9.mp4",
    "mp4s/video10.mp4",
];

var videoId = 0;
var elemVideo = document.getElementById('video');
var elemSource = document.createElement('source');
elemVideo.appendChild(elemSource);

elemVideo.addEventListener('ended', play_next, false);


function play_next() {
    if (videoId == 10) {
        elemVideo.stop();
    } else {
        video.pause();
        elemSource.setAttribute('src', videos[videoId]);
        videoId++;
        elemVideo.load();
        elemVideo.play();
    }
}
play_next();
</script>

不幸的是，这并不能满足我的需求。这段代码将在页面加载时逐个播放所有10个视频，然后停止。我需要它只播放随机10个视频中的一个，当有人按下“一键播放”按钮。我需要它在10点之后继续。

就像我说的，我一点都不擅长JS，我能够通过浏览和修改找到这段代码。

转载请注明出处:http://www.yhsswkj.com/article/20230526/2127202.html

相关阅读