尝试从列表中播放随机视频作为背景

Question

对 HTML 相当陌生，所以我需要一些帮助。我正在尝试播放随机视频作为我网站的背景。我已经播放了视频部分，但我希望它从目录中选择一个随机视频并在每次页面加载时播放

这是播放视频的部分代码

<source src="1.mp4" type="video/mp4">

“1.mp4”是我在每次页面加载时尝试更改的内容。我在名为“bg”的目录中有一个文件夹，其中存储了一些其他视频，标记为 1.mp4、2.mp4 等等，直到 5.mp4。我不知道如何随机选择其中一个视频，并将其设置为上面代码中的源。

感谢您的帮助！

Answer 1

我认为您需要添加一些简单的 JavaScript。完整代码如下：

<source src="" id="RandomVid" type="video/mp4">
<script>
    window.onload = function(event) {
        
    document.getElementById("RandomVid").src = Math.floor(Math.random() * 4 + 1).toString() + ".mp4";
  
  //Remove the code below in the real thing
  alert(document.getElementById('RandomVid').src);

    }
</script>

删除alert(document.getElementById('RandomVid').src); 在您的真实事物中，因为这只是向您显示正在播放的视频的测试。

解释：

window.onload在窗口完全加载时触发代码。

document.getElementById("RandomVid").src 获取 RandomVid 的 src 属性。

Math.floor(Math.random() * 4 + 1) 得到一个介于 1 ~ 5 之间的随机数。

.toString() + ".mp4" 将随机数变成字符串并在末尾添加“.mp4”

这是我在电脑上运行的例子（请看右手和src属性）