如何实现进入id为videos的section时取消视频静音、离开时静音？

这个功能必须通过JS事件监听器实现——CSS只能控制元素样式，无法直接操作视频的muted属性（媒体元素的状态控制属于DOM操作范畴）。下面提供两种可靠的实现方案：

方案1：Intersection Observer API（推荐，性能优先） #

这是现代浏览器推荐的方式，通过监听元素与视口的交叉状态变化触发逻辑，无需频繁监听scroll事件，性能更优。

HTML结构 #

<section id="videos">
  <video src="your-video-source.mp4" muted autoplay loop>
    你的浏览器不支持HTML5视频播放
  </video>
</section>

JS代码 #

// 获取目标区域和视频元素
const videosSection = document.getElementById('videos');
const targetVideo = videosSection.querySelector('video');

// 配置观察者参数
const observerConfig = {
  root: null, // 以浏览器视口作为检测根容器
  rootMargin: '0px',
  threshold: 0.1 // 当区域可见度达到10%时触发回调
};

// 交叉状态变化的回调逻辑
const handleIntersection = (entries) => {
  entries.forEach(entry => {
    // 根据交叉状态切换静音
    targetVideo.muted = !entry.isIntersecting;
  });
};

// 初始化并启动观察者
const sectionObserver = new IntersectionObserver(handleIntersection, observerConfig);
sectionObserver.observe(videosSection);

方案2：Scroll事件监听（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的旧浏览器（如IE11及更早），可以用scroll事件结合元素位置检测实现。

JS代码 #

const videosSection = document.getElementById('videos');
const targetVideo = videosSection.querySelector('video');

// 判断元素是否在视口中的工具函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= viewportHeight &&
    rect.right <= viewportWidth
  );
}

// 滚动时检测并切换静音状态
function handleScroll() {
  targetVideo.muted = !isInViewport(videosSection);
}

// 绑定事件监听
window.addEventListener('scroll', handleScroll);
// 页面加载时初始化状态
window.addEventListener('load', () => {
  targetVideo.muted = !isInViewport(videosSection);
});

注意事项 #

• 视频必须添加autoplay属性：浏览器默认禁止无交互的音频自动播放，但静音状态下的autoplay是允许的，进入区域后取消静音即可正常播放声音。
• 部分浏览器可能要求用户先与页面交互（如点击）才能开启音频，测试时注意这一限制。
• Intersection Observer兼容性：支持Chrome 51+、Firefox 55+、Edge 15+，若需兼容更老环境，优先选择scroll事件方案。

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