关键在于按需触发资源加载与精准控制播放时机，使用IntersectionObserver判断视口进入、data-src延迟加载、muted+playsinline绕过自动播放限制，并配合preload="metadata"、poster、防抖及暂停离屏视频等策略优化体验。
网页视频列表实现“滚动到可视区域才加载并播放”，关键在于**按需触发资源加载 + 精准控制播放时机**，避免首屏卡顿、带宽浪费和自动播放被拦截。这不是简单监听 scroll 事件，而是结合浏览器原生能力与合理策略的组合方案。
用 IntersectionObserver 判断是否进入视口
这是现代浏览器推荐的方式，性能好、无抖动、不依赖 jQuery。它能准确知道某个 video 元素是否出现在用户当前可视区域内，且不随滚动频繁触发。
- 给每个 video 标签加上 data-src 属性，存放真实视频地址，src 先留空或设为占位符
- 创建一个 IntersectionObserver 实例，阈值（threshold）建议设为 0.1～0.2，让视频快进入时就开始准备
- 当 entry.isIntersecting 为 true，再赋值 src 并调用 load()，之后可选择自动播放或等用户交互
加载后控制播放行为要避开浏览器限制
移动端和新版桌面浏览器普遍禁止非静音自动播放。若想“进视口即播”，必须满足两个硬性条件：
- video 标签必须带 muted 属性（即使你后续想取消静音，也得先 muted 才能播）
- 添加 playsinline 属性，确保 iOS 上内联播放而非全屏
- 调用 play() 后要用 catch 捕获可能的错误，比如 The play() request was interrupted，并降级为显示封面图+播放按钮
配合 preload 和 poster 提升体验
光靠 IntersectionObserver 不够，还要从加载策略上优化感知速度：
- video 标签设置 preload="metadata"：只加载时长、宽高、封面等基本信息，不拉视频流，节省首屏流量
- 用 poster 属性指定一张高质量缩略图，视频未加载完成前就展示，避免白屏或闪烁
- 如果列表项多，可对已播放过的视频做缓存标记，再次滚入时跳过重新 load，直接 play()
滚动中防抖与状态管理不能少
用户快速滚动时，可能多个 video 几乎同时触发，容易造成资源争抢或播放冲突：
- 在 observer 回调里加个 flag，比如 video.dataset.loaded = 'true'，防止重复加载
- 暂停离开视口的视频：监听 isIntersecting 变为 false 时调用 pause()，但注意不要误停正在手动播放的视频（可加 data-playing 标记）
- 对长列表，建议搭配虚拟滚动（如 vue-virtual-scroller 或 react-window），避免一次性挂载几百个 video 标签
