IntersectionObserver能准确监听视频滚动进出视口，但需正确配置threshold为[0,1]、rootMargin为"0px"，并检查video.readyState和paused状态，避免因CSS裁剪、动态加载或后台标签页导致误判。
IntersectionObserver 能否准确监听视频滚动进出视口
可以，但默认配置下容易误判——IntersectionObserver 的触发依赖于 rootMargin 和 threshold，而视频元素常因父容器有 overflow: hidden、或自身被 transform 或 opacity: 0 遮蔽，导致 isIntersecting 始终为 false，看似“没进过视口”。务必确认目标元素真实渲染且未被裁剪。
监听视频并自动暂停的关键配置
核心是让 observer 在视频完全移出视口时触发暂停，同时避免滚动抖动反复触发。推荐配置如下：
-
threshold设为[0, 1]：既能捕获“刚进入”（0），也能捕获“完全离开”（1），但暂停只响应isIntersecting === false且intersectionRatio === 0 -
rootMargin保持空字符串或"0px"：避免提前触发；若需“提前暂停”（如上滑 50px 就停），可设"50px 0px 0px 0px"，但会增加误停概率 - 使用
video.pause()前检查video.readyState >= HTMLMediaElement.HAVE_METADATA，否则可能报错InvalidStateError
实际绑定时常见的三个坑
不是所有视频都能直接观察——尤其当页面用框架（React/Vue）动态挂载、或视频由 src 异步加载时，容易出现 observer 实例化早于 DOM 插入、或 src 未就绪就调用 pause()。
- 确保
new IntersectionObserver执行前，video元素已存在于 DOM 中（可用document.querySelector验证返回非null） - 避免对多个
video复用同一个 observer 实例后忘记调用unobserve，否则旧节点残留监听会引发内存泄漏 - Chrome 97+ 对后台标签页中
video的play()/pause()有更严格策略；若用户切到其他 tab 后再切回，intersectionRatio可能仍为 0，但video.paused已为true，此时重复调用pause()虽无害，但建议加if (!video.paused) video.pause()防冗余
一个最小可行的实操片段
不依赖框架，纯原生 JS，适用于静态页面或手动注入场景：
const videos = document.querySelectorAll('video[data-autopause]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const video = entry.target;
if (entry.isIntersecting === false && entry.intersectionRatio === 0) {
if (video.readyState >= video.HAVE_METADATA && !video.paused) {
video.pause();
}
}
});
}, { threshold: [0, 1] });
videos.forEach(video => observer.observe(video));
注意：data-autopause 是推荐的标记方式，比 querySelector('video') 更可控，避免误伤背景视频或广告视频。
真正难的不是写这十几行，而是确认每个 video 的 CSS 渲染层级、父容器 overflow 行为、以及是否在 SSR/ hydration 阶段被延迟挂载——这些都会让 isIntersecting 值“看起来合理，实则失效”。
