视频仅在20%进入视口时静音播放，preload="metadata"减流量，IntersectionObserver精准控制，不支持者降级轮询并按需加载。
核心思路是：只在视频真正可见时才启动播放，且全程静音，避免音频干扰与策略拦截；同时控制资源加载节奏，防止预加载浪费带宽。
关键 HTML 属性配置
每个视频元素需明确声明行为边界：
- muted：必须添加，否则浏览器会拒绝自动播放
- playsinline：iOS Safari 中禁用全屏跳转，保障内联体验
- preload="metadata"：仅加载时长、宽高、首帧等元数据，不拉取视频主体，显著降低初始流量
- 移除
autoplay属性：由 JS 主动控制，确保逻辑可控
IntersectionObserver 的精准触发设置
避免“刚露头就播”或“已滑走还在播”，推荐阈值与时机组合：
- threshold: 0.2：视频垂直方向至少 20% 进入视口才触发播放，兼顾响应性与防误触
- rootMargin: "0px"：不额外扩展观察区域，防止提前加载
- 播放前检查
video.readyState >= HTMLMediaElement.HAVE_METADATA，避免因元数据未就绪而报错
播放控制中的流量保护机制
不只是“进就播、出就停”，还要主动管理资源生命周期：
- 进入视口时调用
video.play()，失败则忽略（静音视频成功率极高，无需重试） - 离开视口时立即
video.pause()，并可选执行video.load()清空缓冲（适用于长页面多视频场景，释放内存与缓存） - 对非首屏视频，可延迟初始化 observer（如监听到用户滚动加速后再批量挂载），减少初始 DOM 观察开销
兼容性与兜底处理
面向真实网络环境，需考虑弱网与旧设备：
- 不支持 IntersectionObserver 的浏览器（如 IE 或极老 Android WebView），可降级为 scroll + getBoundingClientRect 轮询，但仅启用
preload="none"，完全依赖用户点击才加载 - 引入 W3C 官方 polyfill，体积小（约 4KB），不影响现代浏览器性能
- 服务端可配合 User-Agent 判断，对低带宽设备（如 Chrome on 2G）返回更小分辨率的视频源（通过
<source>的media属性或 JS 动态赋值src）
