HTML5 <video> 播放卡顿主因是转码参数（帧率、码率、关键帧间隔）与浏览器解码能力不匹配，而非容器格式本身；需统一CFR、压低码率、对齐IDR帧，并验证解码/渲染丢帧。
为什么 HTML5 <video> 改格式后播放卡顿
不是格式本身导致卡顿，而是转码时帧率、码率、关键帧间隔等参数与浏览器解码能力不匹配。常见于将高码率 H.264（如 1080p@8Mbps）硬塞进 Web 环境，或使用非标准帧率（如 29.97fps 未对齐浏览器的渲染节奏）。
浏览器对 <video> 的解码依赖硬件加速和 JS 渲染循环，一旦解码耗时 > 16ms（60fps 下限），就会丢帧、卡顿、音画不同步。
- Web 兼容性优先选
h.264（baseline 或 main profile），避免 high profile 或 HEVC（video/mp4中不被 Safari 以外多数浏览器原生支持） - 分辨率超过 720p 且码率 > 3Mbps 时，需确认目标设备 GPU 是否启用硬件解码（可通过 Chrome 的
chrome://gpu查看Video Decode状态） - 音频流若为
ac3或dts，浏览器会静音或报MediaError.MEDIA_ERR_DECODE
ffmpeg 调整帧率与码率的关键参数
不要只改容器（如 .mov → .mp4），必须重编码并约束解码复杂度。核心是三件事：统一帧率、压低平均码率、强制 IDR 帧对齐。
推荐命令（以 1080p 为例）：
立即学习“前端免费学习笔记（深入）”；
ffmpeg -i input.mov \ -c:v libx264 \ -profile:v main \ -level 3.1 \ -r 30 \ -g 90 \ -b:v 2500k \ -maxrate 2500k \ -bufsize 5000k \ -c:a aac -b:a 128k \ -movflags +faststart \ output.mp4
-
-r 30：强制输出恒定帧率（CFR），避免 VFR 导致浏览器调度混乱 -
-g 90：关键帧间隔 = 3s（30fps × 3），确保 seek 和缓冲响应及时；太小（如-g 30）增加 I 帧比例，推高码率；太大（如-g 300）拖慢首帧加载和跳转 -
-b:v 2500k+-maxrate+-bufsize：启用 CBR 模式，防止瞬时码率冲高触发浏览器丢帧 -
-movflags +faststart：把 moov box 移到文件头，避免播放前等待整个文件下载
HTML5 播放器里怎么验证是否真“卡”在解码
先排除网络和 JS 干扰：打开 Chrome DevTools → Media 标签页（需在 Settings → Experiments 中启用），选中视频元素，查看 Decoding Frames Dropped 和 Rendering Frames Dropped 数值。
- 若
Decoding Frames Dropped > 0：说明解码跟不上，需降码率或改用更轻量 profile（如baseline） - 若
Rendering Frames Dropped > 0但解码正常：可能是 CSS 动画、JS 定时器阻塞主线程，或transform: scale()触发全屏重绘 - 检查
video.readyState是否长期停留在HAVE_METADATA：说明 moov 位置不对或网络分片失败
别信“看起来卡”——用 performance.now() 打点测 timeupdate 事件间隔，连续出现 > 200ms 的 gap 才算真实卡顿。
移动端特别要注意的坑
iOS Safari 对 <video> 有硬性限制：不支持 autoplay（无用户手势）、强制全屏播放、且仅解码 h.264 的 main profile @ level 3.1 及以下。Android 各厂商差异更大，部分旧机型连 720p@2Mbps 都软解不过来。
- 务必用
canPlayType('video/mp4; codecs="avc1.4D401F"')检测支持度（4D401F= main profile, level 3.1） - 避免
width/height属性设为百分比 +object-fit: cover组合：某些 Android WebView 会反复重绘导致掉帧 - 不要在
play()前设置volume = 0：iOS 会拒绝静音 autoplay，且后续调用play()可能因上下文失效而失败
最稳妥的做法是服务端提供多档自适应（如 480p/720p/1080p），前端用 MediaSource Extensions + mp4frag 分片加载，但前提是你的 CDN 支持 byte-range 请求和正确的 Content-Range 响应。
