HTML5音视频兼容关键在于编码格式而非扩展名：视频用H.264（Main/High Profile，Level≤4.0），音频用AAC-LC（44.1/48kHz，双声道），容器优先.mp4；type属性须精确声明codecs，按兼容性降序排列；FFmpeg必加-pix_fmt yuv420p、-profile:v main、-level 3.1、-movflags +faststart；自动播放需用户手势触发且静音。
HTML5 视频音频标签里 src 指向的文件格式到底要怎么选
不是所有 .mp4 都能播，也不是所有浏览器都认 .webm。核心是：**编码格式比扩展名更重要**。浏览器只看内部编码（如 H.264 + AAC），不看文件后缀。常见错误是直接把 Premiere 导出的 .mp4 丢进 ，结果在 Safari 或旧版 Edge 上黑屏——大概率因为用了 HEVC（H.265）或未封装 AAC 音轨。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 视频优先用
H.264 (AVC)编码，Profile 设为Main或High，Level ≤ 4.0（兼容 iOS 10+ 和大部分安卓） - 音频必须是
AAC-LC（不是 HE-AAC），采样率 44.1kHz 或 48kHz，声道数 ≤ 2 - 容器统一用
.mp4（对 H.264+AAC 支持最稳），.webm（VP9+Opus）仅作备选，用于 Chrome/Firefox 高压缩场景 - 用
ffprobe -v quiet -show_entries stream=codec_name,profile,level -of default检查原始文件编码细节
用
很多人写了多个 type 属性写错或顺序不合理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
type必须精确匹配 MIME 类型：video/mp4; codecs="avc1.64001f, mp4a.40.2"（H.264 Level 3.1 + AAC-LC），不能简写成video/mp4 - 顺序很重要：把兼容性最强的放最前（通常是 H.264 MP4），浏览器按顺序尝试，遇到第一个能解码的就停
- iOS Safari 不支持
media属性做设备判断，别写media="(min-width: 768px)"期望它切换清晰度 - 用
canPlayType()在 JS 中预判：video.canPlayType('video/mp4; codecs="avc1.64001f"')返回"probably"才真正可靠
FFmpeg 转码命令里哪些参数动不得、哪些可以压
一行 ffmpeg -i in.mov -c:v libx264 -c:a aac out.mp4 看似简单，但缺关键参数会导致设备兼容性断裂。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必加
-pix_fmt yuv420p：否则 iOS/macOS QuickTime 播放器可能花屏或绿块 - 必加
-profile:v main -level 3.1：强制限制编码能力，避免高 Level（如 4.2）在低端安卓机解码失败 - 音频必须加
-ar 48000 -ac 2 -acodec aac，不依赖输入源自动推断 - 可调但慎动：
-crf 23（画质）、-preset medium（速度/压缩权衡），别用veryslow——移动端首帧加载延迟明显增加 - 别用
-movflags +faststart？错，这个必须加，它把 moov box 移到文件开头，否则网页播放器要等整个文件下载完才能开始播
移动端自动播放被禁、静音策略和用户手势绕不过去
Android Chrome 和 iOS Safari 默认禁止带声音的自动播放，这不是 bug，是策略。哪怕你转码再完美，没用户手势（click/tap）触发，play() 就会 Promise reject。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有自动播放逻辑必须包裹在用户手势回调内：
button.addEventListener('click', () => video.play())，不能放在DOMContentLoaded或setTimeout里 - 需要静音自动播（如 banner 视频），必须显式设置
video.muted = true且video.autoplay = true，iOS 10+ 才放行 - 不要依赖
video.readyState === 4就调play()，移动端经常 readyState 达到 4 但实际尚未解码完成，应监听canplay或canplaythrough - 安卓部分定制 ROM（如华为 EMUI）还会拦截
muted + autoplay，最后手段：用 poster 图 + 用户点击后才加载真实视频 src
最易被忽略的是音频轨道的隐式启用——哪怕视频本身没声音，如果封装里残留无声 AAC 流，某些安卓 WebView 仍判定为“有声”，导致自动播放失败。转码时用 -an 彻底去掉音频流，或确保 -c:a copy 不引入异常编码。
