HTML页面每次重新加载时如何实现自动切换播放新的背景视频

实现逻辑 #

在原有代码基础上加入少量JavaScript代码即可，每次页面加载时会从你预设的视频列表中随机选取一个，自动替换到video标签的资源地址实现切换效果。

完整代码示例 #

你原有video代码不需要改动，只需要在页面底部添加如下JS逻辑即可：

<!-- 原有背景视频代码保持不变 -->
<video id="vidtest" autoplay muted loop>
  <source src="videos/vid.mp4" type="video/mp4">
</video>

<!-- 新增随机切换视频逻辑 -->
<script>
// 把你所有要用作背景的视频的实际路径填到这个数组里
const bgVideoList = [
  'videos/vid1.mp4',
  'videos/vid2.mp4',
  'videos/vid3.mp4',
  'videos/vid4.mp4'
]

window.addEventListener('DOMContentLoaded', () => {
  // 生成随机索引值
  const randomIndex = Math.floor(Math.random() * bgVideoList.length)
  // 获取对应DOM元素
  const videoElement = document.getElementById('vidtest')
  const sourceElement = videoElement.querySelector('source')
  // 替换为随机选中的视频地址
  sourceElement.src = bgVideoList[randomIndex]
  // 重新加载视频并触发播放
  videoElement.load()
})
</script>

注意事项 #

• 数组里填写的视频路径要和你本地实际存储的文件路径完全对应，避免出现加载失败的问题
• 建议给video标签添加poster属性设置兜底静态背景图，避免网络较差时视频加载过程中出现空白
• 提前压缩所有背景视频的体积，减少加载耗时，提升用户访问体验

内容的提问来源于stack exchange，提问作者Hunain Ahmed