核心思路是用 rootMargin 提前感知 + muted 强制静音 + preload="metadata" 控制加载粒度，在用户看到前完成静音初始化与首帧缓冲；muted 必须写死 HTML 中，配合 playsinline 和防误触策略实现高效滚动播放。

核心思路不是“等视频进视口再处理”，而是用 rootMargin 提前感知 + muted 强制静音 + preload 克制加载粒度，在用户真正看到前就完成静音初始化与首帧缓冲，避免非必要音频解码和带宽消耗。

静音必须前置，不能依赖进入后设置

浏览器对自动播放有严格策略：只要视频含音频轨道且未静音，play() 必然被拒绝。所以muted 属性必须写死在 HTML 中，不可靠 JS 动态添加（部分 iOS 版本会忽略）。同时配合 playsinline 防止全屏，确保移动端可控：

• <video class="auto-muted" muted playsinline preload="metadata">
• 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) 减少监听开销