HTML 视频播放器比选择一个随机文件，自动播放，然后等待 5 分钟并再次启动脚本

【问题标题】：HTML video player than chooses a random file, autoplays it, then waits 5 minutes and starts the script againHTML 视频播放器比选择一个随机文件，自动播放，然后等待 5 分钟并再次启动脚本
【发布时间】：2020-08-09 21:33:51
【问题描述】：

我正在尝试制作一个带有没有控件的视频播放器的网页。视频播放器从列表中选择一个随机视频，播放它，等待 5 分钟，然后从列表中选择另一个随机视频并一直播放。

我得到了以下代码，但它不起作用。加载页面时没有播放视频。

该目录包含单个 HTML 文件中的代码和 3 个 WEBM 文件（vidplayer.html 1.webm 2.webm 3.webm）。

    <html>
    <body>
        <video id="video" width=800 height=600 muted autoplay> <\video>

        <script>
            var vidList = ["1.webm", "2.webm", "3.webm"];

            var video = document.getElementById("video");

            function randInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            }

            video.src = vidList[randInt(0,3)];

            while(true){
                setTimeout(video.src = vidList[randInt(0,3)], 300000) ;
            }
        <\script>
    <\body>
    <\html>

【问题讨论】：

标签用/ 关闭，而不是用\。其他一切看起来都很好。

标签： html html5-video

【解决方案1】：

注意结束的html标签：<\script>应该是</script>等等。

您的 while(true) 是一个无限循环，正在创建无限超时。

你可能想这样做：

setInterval(function changeVideo() {
  video.src = vidList[randInt(0, 2)];
}, 300000);

setInterval 将每 300000 毫秒无限期地调用一次。

这与 setTimeout 调用本身的结果相同：

setTimeout(function changeVideo() {
  video.src = vidList[randInt(0, 2)];
  setTimeout(changeVideo, 300000);
}, 300000);

如果您希望三个视频的数字介于 0 和 2 之间，您应该调用 randInt(0, 2) randInt 的创建方式。

你可以看到它在工作，有几个视频，视频之间有 15 秒的延迟here

【讨论】：