核心思路是用 rootmargin 提前感知 + muted 强制静音 + preload="metadata" 控制加载粒度，在用户看到前完成静音初始化与首帧缓冲；muted 必须写死 html 中，配合 playsinline 和防误触策略实现高效滚动播放。
核心思路不是“等视频进视口再处理”，而是用 rootMargin 提前感知 + muted 强制静音 + preload 克制加载粒度，在用户真正看到前就完成静音初始化与首帧缓冲，避免非必要音频解码和带宽消耗。
静音必须前置，不能依赖进入后设置
浏览器对自动播放有严格策略：只要视频含音频轨道且未静音，play() 必然被拒绝。所以muted 属性必须写死在 HTML 中，不可靠 JS 动态添加（部分 iOS 版本会忽略）。同时配合 playsinline 防止全屏，确保移动端可控：
<video class="auto-muted" muted playsinline preload="metadata"></video>- preload 设为
metadata：只拉取时长、宽高、关键帧信息，不下载音视频流，节省初始带宽 - 避免
preload="auto"：它可能触发完整音轨预加载，尤其在 4G/弱网下明显增加流量
用 rootMargin 实现“预静音”而非“后静音”
传统做法是等 isIntersecting === true 才调 play()，但此时用户已滑到视频位置，首帧延迟+音频解码可能已发生。应提前干预：
- 设置
rootMargin: "150px"：让 IntersectionObserver 在视频距离视口顶部还有 150px 时就触发回调 - 回调中立即执行
video.load()或video.play().catch(() => {})—— 即使失败也不影响，重点是触发浏览器开始解码元数据并准备静音播放上下文 - 这样用户滑到时，视频已处于“可秒播”状态，无需重新协商、解码或请求音频流
按需启用音频，而非默认加载
绝大多数滚动场景下，用户并不需要听——静音是常态，有声是例外。可设计两级控制：
- 默认所有视频保持
muted = true，且不设audioTracks相关属性 - 仅当用户主动点击播放控件（非自动播放）时，才执行：
video.muted = false; video.play(); - 若需保留音轨但默认静音，可在 HTML 中加
disableRemotePlayback和webkit-playsinline，进一步抑制后台音频行为
防误触与资源回收
滚动快、反复进出视口时，频繁 play()/pause() 可能引发解码器重置或重复加载。建议：
- 用
video.pause()而非video.currentTime = 0，避免重置解码器 - 离开视口后不清空
src，保留已缓存的元数据；再次进入时直接复用 - 对长期不可见（如停留超 30s 未进入）的视频，可主动调用
observer.unobserve(video)减少监听开销
