高性能HTML5媒体播放器需控解码、稳渲染、省资源：优选H.264+ACC组合，禁用B帧；强制合成层、限制同页解码数；用MSE控缓冲、监测丢帧；移动端须用户交互后播放并降级兜底。
构建高性能 HTML5 媒体播放器，核心不在堆功能，而在控解码、稳渲染、省资源。H.264 + AAC 是当前最稳妥的编解码组合，但光靠格式选对远远不够——解析逻辑、时间同步、GPU 利用和层级调度必须协同优化。
解码器选择：以兼容性与硬件加速为前提
H.264（AVC）仍是 Web 端视频解码的事实标准：Chrome、Firefox、Safari 全面支持，且能触发 GPU 硬解；AAC 音频则提供高保真与低延迟平衡。避免盲目追求新格式（如 AV1/Opus），除非业务明确限定现代 Chrome/Firefox 用户且可接受降级兜底成本。
- 服务端输出务必包含完整 SPS/PPS 参数，否则浏览器无法初始化 H.264 解码器——常见于 RTSP 拉流场景，需在 JS 层做 NALU 提取与注入
- 禁用 B 帧（
–bframes 0）可降低解码复杂度，提升低端设备帧率稳定性，适合监控类实时流 - 若需支持 HEVC（如 Safari macOS/iOS），须单独提供 MP4 封装 + HEVC 编码，并用
canPlayType('video/mp4; codecs="hvc1"')主动检测，不可 fallback 自动生效
渲染优化：绕过主线程瓶颈，直连合成器
卡顿往往不是解码慢，而是渲染链路被阻塞。HTML5 视频默认走浏览器媒体管线，但关键控制点仍需手动干预：
- 启用
playsinline并配合webkit-playsinline，防止 iOS 全屏劫持导致布局重排 - 视频容器设
transform: translateZ(0)或will-change: transform，强制创建独立合成层，避免与页面其他动画争抢 GPU 资源 - 禁用
object-fit: cover的动态缩放（尤其在 resize 时），改用固定宽高比容器 + CSS 裁剪，减少每帧 layout 开销 - 多视频同页时，限制同时解码数量（如最多 2 路），其余暂停并释放
src，防止内存溢出
时间同步与缓冲策略：让播放“跟得上人”
实时性要求高的场景（如安防、远程协作），不能依赖浏览器默认缓冲行为：
立即学习“前端免费学习笔记（深入）”；
- 使用 Media Source Extensions（MSE）接管 video.src，通过
sourceBuffer.appendBuffer()控制缓冲窗口大小（建议 ≤ 2s），避免网络抖动引发长卡顿 - 基于
video.getVideoPlaybackQuality()监测丢帧率，连续 ≥ 3 帧丢失时主动降低分辨率或切换备用流 - RTSP/WebRTC 类低延时流，需关闭
preload="auto"，改用preload="metadata"+ 手动play()，并监听loadeddata后立即开始消费数据
移动端专项处理：不触发手势，就播不了
iOS Safari 和多数安卓 WebView 对自动播放有严格限制，且静音也不豁免：
- 首次用户交互（click/touchstart）前，video 必须处于
paused状态，且src为空或占位 poster - 交互后调用
play()，捕获 Promise reject 并降级：失败则显示“点击播放”按钮，或切换为 Canvas 渲染帧序列 - Android 低版本 WebView 可能不支持 MSE，需 UA 检测后 fallback 到
<video>原生标签 + HLS.js
