移动端h5多视频需按需加载、单点聚焦、轻量响应：点击播放时暂停其他视频；用intersectionobserver预加载可见区域元信息；添加playsinline等属性适配移动端全屏限制；自动播放须静音且由用户手势触发。
移动端H5页面中多个视频共存时，既要保证用户点击播放的体验流畅，又要避免滚动引发的抖动、误播、资源浪费等问题。核心不是“全都要”，而是“按需加载、单点聚焦、轻量响应”。
单视频焦点控制：点击即播，其余自动暂停
同一页面有多个<video></video>时，应确保任意时刻最多一个在播放。这不是视觉优化，而是防止音频冲突和系统资源争抢的关键逻辑。
- 监听所有
video元素的play事件，触发时遍历其他video并调用pause() - 推荐用
forEach.call兼容老浏览器，避免this指向错误；也可用for...of配合event.currentTarget - 注意：不要在
scroll或touchmove里做播放控制——这会卡顿，应只响应play和click
滚动预加载：只加载可见区域的元信息
列表页含10+个视频时，全部设preload="auto"会导致首屏卡顿、流量激增、内存溢出，尤其在低端安卓机上极易崩溃。
- 默认统一设
preload="none"，再用IntersectionObserver监听进入视口的video - 进入可视区后，先设
preload="metadata"，加载封面、时长等基础信息，控件可立即响应 - 用户真正点击播放时，再设
preload="auto"或调用load()，触发完整视频加载 - 移出可视区较远（如超过2个视口）时，清空
src并重置preload="none"，释放内存
移动端交互适配：避开全屏陷阱与触摸误触
iOS Safari强制全屏、Android小窗错位、控制条太小难点……这些不是Bug，是平台策略，需主动适配而非强行覆盖。
- 必须添加
playsinline属性，否则iOS下点击直接跳全屏，破坏页面上下文 - 结合
webkit-playsinline和x5-playsinline（微信/QQ内核）提升兼容性 - 禁用原生全屏按钮：用
controlslist="nodownload noremoteplayback nofullscreen"精简控件 - 触摸区域放大：CSS中给
video父容器加padding: 12px，实际点击热区比视觉区域更大
自动播放策略：静音+用户手势缺一不可
现代浏览器已全面限制无交互自动播放。想实现“进页即播”，必须同时满足两个硬性条件。
- 视频必须带
muted属性，且不能在播放中途取消静音（否则会中断） - 首次播放必须由明确用户手势触发（click/touchend），之后才能用
play()续播 -
autoplay仅作提示，不可依赖；更可靠的做法是监听canplay后调用play()，并catch拒绝错误 - 若需循环预告片，可用
loop+muted+autoplay组合，但主内容视频仍需用户点击启动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
