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