intersectionobserver 配合 threshold 实现视频自动启停，核心是依据元素在视口中的可见比例（如 threshold: 0.5）触发播放，而非简单出现即播；需复用 observer、防抖动、区分静音逻辑并优化多视频场景。
用 IntersectionObserver 配合 threshold 实现视频自动启停，核心在于**让播放行为与元素在视口中的可见比例强关联**，而非简单“出现即播放”。关键不是设成 [0]，而是根据业务场景选择能反映“真正可观看”的阈值（如 0.5 表示 50% 进入视口才触发）。
理解 threshold 如何影响触发时机
threshold 是一个数字或数字数组，表示目标元素的可见比例达到多少时触发回调。它不是“是否在视口内”的开关，而是“可见度临界点”的标尺：
-
threshold: 0：元素哪怕只有 1px 进入视口就触发（灵敏但易误启） -
threshold: 0.5：元素至少 50% 面积在视口内才触发（推荐用于主视频，确保用户大概率看到） -
threshold: [0, 0.25, 0.5, 0.75, 1]：多级触发，适合做渐进式加载或精细控制（如 25% 时预加载，75% 时开始播放）
基础实现：单视频自动启停
监听单个视频容器，当其可见比例 ≥ 0.5 时播放，
const video = document.querySelector('video');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
video.play().catch(() => {}); // 忽略自动播放策略限制
} else {
video.pause();
}
});
},
{ threshold: [0, 0.5] } // 必须包含 0.5 才能捕获该比例变化
);
observer.observe(video.parentElement); // 推荐观察外层容器，避免 video 自身尺寸影响 intersectionRatio 计算
进阶技巧：避免抖动与提升体验
滚动过程中 intersectionRatio 可能频繁微小波动，导致反复启停。可通过以下方式稳定行为：
- 添加最小停留时间：记录进入高可见状态的时间，仅当持续 ≥ 300ms 才播放
-
忽略短暂离开：离开时若
intersectionRatio仍 > 0.1，不立即暂停，防滚动抖动误判 -
区分静音/有声逻辑：默认静音播放（
video.muted = true），仅当用户主动点击才取消静音，兼容浏览器自动播放策略 -
手动控制 playbackRate：进入时设为
video.playbackRate = 1，退出时设为0（暂停）而非直接pause()，更可控
多视频列表场景下的优化建议
页面含多个视频时，不要为每个视频新建 observer（性能差），应复用一个 observer 并统一管理：
- 用
Map缓存每个视频元素及其播放状态、上次触发 ratio - 在回调中遍历
entries，按entry.target匹配对应视频，独立判断启停 - 对非首屏视频，可设更高 threshold（如 0.8），避免过早加载资源
- 配合
rootMargin（如'100px'）提前触发，让视频在进入视口前完成解码，减少卡顿
