如何实现网页每次重载时随机切换背景视频 现有代码不生效如何解决

问题原因 #

你的代码无法正常运行通常是两个核心问题导致：

• 脚本执行时机早于DOM渲染：如果脚本放在<head>标签内，或者<video>元素之前，运行时还没渲染出id为video-source的元素，获取节点会返回null，赋值操作失效
• 未主动触发视频加载：修改<source>标签的src属性后，浏览器不会自动读取新地址加载视频，需要手动调用video元素的load()方法触发加载流程

修复后的完整代码 #

首先是HTML基础结构（确保和你的实际代码匹配）：

<video id="bg-video" autoplay muted loop playsinline>
  <source id="video-source" src="" type="video/mp4">
</video>

修复后的JS代码：

document.addEventListener('DOMContentLoaded', function() {
  const videoElement = document.getElementById('bg-video');
  const sourceElement = document.getElementById('video-source');
  const videos = [
    "videos/vid1.mp4",
    "videos/vid2.mp4",
    "videos/vid3.mp4"
  ];
  // 随机选取视频，用videos.length替代硬编码的3，后续新增视频无需修改此处逻辑
  const randomVideo = videos[Math.floor(Math.random() * videos.length)];
  sourceElement.setAttribute('src', randomVideo);
  // 触发视频重新加载
  videoElement.load();
  // 兼容浏览器自动播放规则，静音状态下可正常触发播放，出错时打印日志方便排查
  videoElement.play().catch(err => console.log('自动播放被拦截:', err));
});

注意事项 #

• 确认所有视频的相对路径和实际文件位置匹配，路径错误会导致视频加载404
• 主流浏览器默认禁止非静音视频自动播放，所以<video>标签必须加上muted属性才能正常自动播放
• 移动端需要添加playsinline属性，避免视频触发全屏播放
• 代码通过DOMContentLoaded事件包裹，无需调整脚本放置位置，放在<head>或者<body>内都可正常运行

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