视频滚动出视口时自动暂停可降低资源消耗，推荐用intersectionobserver监听并控制play/pause，需处理静音、自动播放策略及兼容性降级。
当视频元素滚动出视口时，自动暂停播放，能显著降低 CPU/GPU 占用和电量消耗。HTML5 的 <video></video> 标签配合 IntersectionObserver 是实现这一效果最轻量、兼容性好（Chrome 51+/Firefox 55+/Safari 12.1+）的标准方案。
基础观察器设置：监听进入/离开视口
创建一个只关心「是否在视口内」的观察器，阈值设为 0（默认），触发回调时检查 isIntersecting：
const videoObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const video = entry.target;
if (entry.isIntersecting) {
video.play().catch(e => console.warn("自动播放被阻止", e));
} else {
video.pause();
}
});
}, { threshold: 0 });
然后对所有需要控制的 <video></video> 元素调用 observe()：
document.querySelectorAll('video[data-autopause]').forEach(video => {
videoObserver.observe(video);
});
关键细节：处理静音与自动播放策略
现代浏览器普遍禁止有声音的视频自动播放。若视频需静音播放（常见于背景视频），必须显式设置 muted 和 autoplay 属性，并确保 playsinline（iOS 兼容）：
<video muted autoplay playsinline data-autopause></video>- JS 中调用
play()前，确认video.muted = true（避免因静音状态丢失导致失败） - 首次用户交互（如点击）后，可尝试取消静音，但需用户手势触发
增强体验：添加淡入/暂停过渡（可选）
直接暂停可能造成视觉突兀。可在暂停前加短延时（如 200ms），给用户留出“即将离开”的缓冲；或结合 opacity 动画平滑过渡：
- 监听
isIntersecting === false时，先加类名（如leaving）触发动画 - 动画结束后再执行
pause()，避免音频残留 - 进入时移除类并
play()，保持连贯性
注意事项与兜底方案
部分老旧安卓 WebView 或特殊环境可能不支持 IntersectionObserver。建议做简单降级：
- 用
if ('IntersectionObserver' in window)判断支持性 - 不支持时，退回到基于
scroll+getBoundingClientRect()的手动检测（性能稍差，但可用） - 对
video元素统一加preload="metadata"，避免预加载全片浪费带宽
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
