首页随机视频播放代码突发故障求助（多浏览器异常）

核心问题 #

1. 脚本语法错误：原代码的<script>标签内包含HTML换行标签<br />，这些标签会被当作JavaScript代码的一部分，直接导致语法错误，使得Chrome、Edge、Vivaldi等浏览器无法执行随机逻辑，视频加载失败；Firefox的错误处理机制可能跳过部分错误，但仅执行到最后一个视频的逻辑。
2. 浏览器自动播放限制：现代浏览器要求视频播放必须由用户主动交互（如点击）触发，原代码中页面加载时直接调用randomVideo.play()会被浏览器拦截。
3. 动态集合风险：getElementsByTagName返回的是动态HTMLCollection，DOM结构变化时可能出现不可预期的行为。

修复后的完整代码 #

<div class="videosaccueil">
  <section id="videos">
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video1.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video2.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video3.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video4.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video5.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video6.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video7.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video8.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video9.mp4">
    </video>
    <video playsinline controls preload="none">
      <source type="video/mp4" src="/wp-content/uploads/2018/videos/video10.mp4">
    </video>
  </section>
  <script>
    (function () {
      "use strict";
      const videosSection = document.getElementById("videos");
      // 把所有视频元素转换为静态数组，避免动态集合的问题
      const videos = Array.from(videosSection.getElementsByTagName("video"));
      
      // 隐藏所有初始视频，只在用户点击后显示随机视频
      videos.forEach(video => {
        video.style.display = "none";
      });

      // 创建点击触发随机播放的逻辑（绑定到视频容器）
      videosSection.addEventListener("click", async () => {
        // 随机选择一个视频
        const randomIndex = Math.floor(Math.random() * videos.length);
        const randomVideo = videos[randomIndex].cloneNode(true);
        
        // 清空当前section，添加随机视频
        videosSection.innerHTML = "";
        randomVideo.style.display = "block";
        randomVideo.setAttribute("preload", "auto");
        videosSection.appendChild(randomVideo);

        // 尝试播放视频，处理浏览器自动播放限制
        try {
          await randomVideo.play();
        } catch (err) {
          // 如果自动播放被阻止，用户可以手动点击控件播放
          console.log("自动播放被阻止，请点击播放按钮");
        }
      });
    })();
  </script>
</div>

修复说明 #

1. 移除语法错误：完全删除了脚本内的<br />标签，确保JavaScript代码可以正常解析执行。
2. 处理自动播放限制：通过用户点击事件触发视频加载与播放，同时添加try/catch捕获自动播放失败的情况，引导用户手动播放。
3. 优化视频选择逻辑：将动态HTMLCollection转换为静态数组，避免DOM变化导致的集合异常；初始隐藏所有视频，点击后再显示随机视频，符合“点击播放随机展示”的需求。
4. 简化DOM操作：直接清空原section并添加随机视频，替代原有的克隆section再替换的复杂逻辑，更简洁可靠。

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