如何用JavaScript或jQuery实现视频静音？解决广告关闭后发声问题

我完全懂你的困扰——你现在的代码只是把广告容器隐藏了，但里面的视频其实还在后台悄悄播放，所以声音一直停不下来。咱们不用搞复杂的JS知识，只需要在关闭广告的同时主动暂停视频就行，我直接给你改好代码，再把关键修改点给你讲明白：

修改后的完整代码 #

<script>
  // 6秒后自动关闭广告并停止视频
  window.setTimeout(function() {
    const adContainer = document.getElementById('closead');
    const adVideo = document.getElementById('dbx');
    
    adContainer.style.display = 'none';
    adVideo.pause(); // 暂停视频播放，停止声音
    adVideo.currentTime = 0; // 重置视频到开头（优化体验，可选）
  }, 6000);
</script>

<div class="advertisement" id="closead">
  <a target="_blank" rel="nofollow" href="http://www.sitename.com">
    <video id="dbx" style="object-fit: fill;" autoplay="" width="100%" height="100%">
      <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    </video>
  </a>
  <button 
    onfocus="this.blur();" 
    class="closecss" 
    style="position:absolute;bottom: 2px;right: 0px;z-index: 999;background: #32b02b;color: #fff;padding: 13px;border-radius: 4px;font-weight: bold;cursor: pointer;border: 1px solid #2b9825;box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 #299023, 0 2px 3px 0 rgba(0, 0, 0, 0.25);"
    onclick="
      const adContainer = document.getElementById('closead');
      const adVideo = document.getElementById('dbx');
      
      adContainer.style.display = 'none';
      adVideo.pause();
      adVideo.currentTime = 0;
    "
  >
    SKIP AD
  </button>
</div>

<style>
  .advertisement { 
    position: absolute; 
    z-index: 99; 
    height: 100%; 
  }
</style>

关键修改点说明 #

• 原来的问题：你之前的代码只是把广告容器closead设为display:none，但视频元素dbx还存在于页面中，会继续后台播放，所以声音不会停止。
• 核心修复：每次关闭广告时，新增了两个关键操作：
  1. adVideo.pause()：直接暂停视频播放，声音会立刻停止
  2. adVideo.currentTime = 0：把视频重置到开头，万一以后广告需要重新显示，体验会更流畅（这个是优化项，可选但推荐）
• 小规范优化：把setTimeout里的字符串执行逻辑换成了函数写法，这是更安全、更符合JS规范的做法。

这样修改后，不管是自动倒计时关闭还是手动点击SKIP AD，视频都会彻底停止播放，声音也会跟着消失啦！

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