html5移动端视频播放需平衡流畅性与功耗，核心是按需解码渲染、即时暂停；关键控制点包括播放触发时机（静音+内联+用户手势）、编码选择（h.264 baseline 3.0、禁b帧）、分层渲染（独立合成层、禁object-fit动态缩放）及后台释放（visibilitychange暂停清源、组件卸载清理）。
HTML5 媒体播放在移动端既要流畅，又不能让手机发烫、掉电快。核心不是“少放视频”，而是“该解码时才解码、该渲染时才渲染、该停时立刻停”。关键控制点落在播放触发时机、解码方式选择、渲染层级调度和后台行为管理上。
静音+内联+用户手势：绕过自动播放限制，避免无效加载
iOS Safari 和多数安卓 WebView 严格禁止有声 autoplay，强行触发不仅失败，还会让 video 元素卡在 pending 状态，持续占用解码资源。必须组合使用三个条件才能安全启动：
- 显式添加 muted 属性（仅靠 JS 设置 volume=0 不生效）
- 同时声明 playsinline 和 webkit-playsinline，防止 iOS 强制全屏导致合成层重建
- 首次播放必须由真实用户手势触发（click/tap），调用
play()后需捕获 Promise reject 并降级处理
格式与编码：选对解码路径，减少 CPU/GPU 冗余负载
H.264 + AAC 是当前最稳妥的组合，但具体参数决定功耗高低：
- 服务端输出必须含完整 SPS/PPS，否则浏览器反复尝试初始化解码器，空转耗电
- 转码时指定 -profile:v baseline -level 3.0，避开高复杂度 profile（如 high），降低中低端机软解压力
- 禁用 B 帧（
-bframes 0），减少帧间依赖计算，提升解码能效比 - 避免 HEVC/AV1，除非明确限定设备范围——它们虽省带宽，但软解功耗翻倍，且 iOS 旧版本硬解支持不稳
渲染与合成：强制分层，切断无意义重绘
卡顿常源于渲染管线争抢，而非解码慢。移动端 GPU 资源有限，需主动隔离视频图层：
- 给 video 容器设置 transform: translateZ(0) 或 will-change: transform，创建独立合成层
- 禁用
object-fit: cover的动态缩放逻辑，改用固定宽高比容器 + CSS 裁剪（如overflow: hidden），避免每帧 layout - 同页多视频时，限制同时解码路数（建议 ≤2），其余暂停并清空
src，防止内存溢出与解码线程堆积
后台与生命周期：页面不可见时，彻底释放媒体资源
WebView 切后台后若未干预，video 元素仍可能维持解码线程或定时轮询，导致持续发热：
- 监听
visibilitychange事件，document.hidden为 true 时立即pause()并src = "" - SPA 场景下，在组件卸载钩子（如 Vue unmounted / React useEffect cleanup）中清除所有 media 相关监听器和定时器
- Android WebView 初始化时调用
setLayerType(LAYER_TYPE_SOFTWARE, null)，关闭硬件加速；iOS WKWebView 避免开启allowsInlineMediaPlayback，减少后台唤醒
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
