时间戳

首页 > 解决方案 > HTML 视频播放器比选择一个随机文件，自动播放它，然后等待 5 分钟并再次启动脚本

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

问题描述

我正在尝试制作一个没有控件的视频播放器的网页。视频播放器从列表中选择一个随机视频，播放它，等待 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>

标签： htmlhtml5-video

解决方案

注意结束的 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 秒的延迟

推荐阅读