网页随机视频默认静音失效问题排查请求

咱们来一步步拆解你遇到的问题，核心有三个关键点导致默认静音不生效，甚至鼠标悬停的静音切换也会失效：

1. 重复ID导致DOM获取完全错误 #

你给外层<section>和所有<video>元素都用了id="videos"，但HTML里ID必须是唯一的！document.getElementById("videos")只会返回页面中第一个匹配的元素——也就是那个<section>标签，而section元素根本没有muted属性，所以你一开始写的document.getElementById("videos").muted = true完全是无效操作，根本没作用到视频上。

2. 克隆后的随机视频未设置默认静音 #

你成功克隆了随机视频并替换到页面中，但在调用randomVideo.play()之前，没有给这个克隆后的视频设置muted = true，所以它播放时自然会有声音。

3. 静音切换函数中的变量未定义 #

你的play()和mute()函数里用了video变量，但这个变量从来没被声明或赋值过，浏览器根本不知道它指向哪个视频元素，所以鼠标悬停/移出时的静音切换逻辑也无法生效。

修正后的完整代码 #

我帮你把这些问题都修复了，代码里加了注释说明修改点：

<div id="mixmen" onmouseover="toggleMute(false)" onmouseout="toggleMute(true)" onclick="window.open('http://ap-mixmen.com/', '_blank')">
  <div class="video">
    <!-- 修改section的ID为唯一值，避免和video重复 -->
    <section id="video-container">
      <!-- 去掉所有video的重复ID，不需要也不能重复 -->
      <video preload="none" style="height:100%">
        <source src="imgs/mixmen.mp4" type="video/mp4">
      </video>
      <video preload="none" style="height:100%">
        <source src="imgs/mixmen2.mp4" type="video/mp4">
      </video>
      <video preload="none" style="height:100%">
        <source src="imgs/mixmen3.mp4" type="video/mp4">
      </video>
      <video preload="none" style="height:100%">
        <source src="imgs/mixmen4.mp4" type="video/mp4">
      </video>
    </section>
  </div>
  <script>
    (function () {
      "use strict";
      const videoContainer = document.getElementById("video-container");
      const videos = videoContainer.getElementsByTagName("video");
      // 随机选择一个视频并克隆
      const randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
      randomVideo.removeAttribute("controls");
      randomVideo.setAttribute("preload", "auto");
      // 关键：给克隆的视频设置默认静音
      randomVideo.muted = true;
      
      // 替换原容器内容
      const containerClone = videoContainer.cloneNode();
      containerClone.appendChild(randomVideo);
      videoContainer.parentNode.replaceChild(containerClone, videoContainer);
      
      // 播放视频
      randomVideo.play();
      
      // 把当前播放的视频存到全局，让切换函数能访问到
      window.currentVideo = randomVideo;
    })();

    // 合并静音切换函数，更简洁
    function toggleMute(isMuted) {
      // 使用全局保存的currentVideo变量
      if (window.currentVideo) {
        window.currentVideo.muted = isMuted;
      }
    }
  </script>
</div>

关键修改点总结 #

• 给section设置唯一ID，移除所有video的重复ID，避免DOM获取混乱；
• 在克隆视频后立即设置randomVideo.muted = true，确保默认静音；
• 将当前播放的视频存到全局变量window.currentVideo，让切换函数能正确访问到目标元素；
• 合并了play()和mute()为一个toggleMute()函数，逻辑更清晰。

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