如何实现静音/取消静音按钮进入视频区域后全程保留显示？

核心思路 #

初始隐藏静音按钮，通过Intersection Observer API监听视频容器是否进入视口，一旦检测到视频容器进入过视口，就永久显示按钮，之后无论滚动到页面任何位置都不再隐藏。该API比传统scroll事件监听性能更优，无需频繁计算元素位置。

修改后的完整代码 #

HTML（无需改动）

<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

<section class="video-container">
  <div class="video-description">
 VIDEO SECTION <br><hr>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <video id="myVideo" autoplay loop muted>
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  </video>

  <div class="content">
    <img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
  </div>
</section>

<section  class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

CSS（调整按钮初始状态，新增显示类）

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px auto 80px;
}

.video-description , .sct{
  text-align: center;
  max-width: 66%;
  margin: 0 auto 24px;
  font: inherit;
  letter-spacing: 4px;
}

#myVideo {
  border-radius: 5px;
  max-width: 46%;
  object-fit: cover;
  margin-bottom: 20px;
}

#myImg {
  top: 10%;
  right: 3%;
  position: fixed;
  z-index: 50;
  cursor: pointer;
  padding: 10px 20px;
  background: #D3D3D3;
  color: #000;
  border-radius: 5px;
  display: none; /* 初始隐藏按钮 */
}

#myImg.show {
  display: inline-block; /* 控制按钮显示的类 */
}

JavaScript（添加视口监听逻辑）

var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
var videoContainer = document.querySelector(".video-container");

// 声明静音/取消静音图标
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"

// 配置视口监听
var observer = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      img.classList.add("show"); // 显示按钮
      observer.disconnect(); // 触发后停止监听，避免重复操作
    }
  });
}, { threshold: 0.1 }); // 容器10%进入视口时触发

// 启动监听
observer.observe(videoContainer);

// 页面加载时检查容器是否已在视口内
window.addEventListener('load', function() {
  var rect = videoContainer.getBoundingClientRect();
  var isInViewport = rect.top < window.innerHeight && rect.bottom > 0;
  if (isInViewport) {
    img.classList.add("show");
    observer.disconnect();
  }
});

// 静音切换逻辑保持不变
function myFunction() {
  video.muted = !video.muted;
  img.src = video.muted ? unmuteImg : muteImg;
}

额外说明 #

• 给video标签添加了muted属性，解决浏览器要求自动播放视频必须静音的限制，避免“滚动到区域才播放”的问题。
• threshold值设为0.1，可根据需求调整（比如0表示容器边缘接触视口就触发）。
• 按钮显示后立即停止监听，确保按钮不会再被隐藏。

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