支持标签直接播放的格式需满足编码与容器组合兼容：h.264+aac（mp4）全平台稳定；vp9+opus（webm）chrome/firefox/edge支持，safari不支持；h.265仅safari 14+支持；av1需较新浏览器且safari 16.4+有限支持。
哪些视频格式能在 <video></video> 标签里直接播放
不是所有 .mp4、.webm 文件都能播，关键看封装格式 + 视频/音频编码组合。浏览器只认特定组合，MP4 容器本身不保证兼容，里面用的是 H.264 还是 H.265、音频是 AAC 还是 MP3 才决定能不能播。
-
H.264 + AAC在.mp4容器中：全平台支持最稳，ios、android、Chrome、Firefox、Edge 都认 -
VP9 + Opus在.webm容器中：Chrome、Firefox、Edge 支持好，Safari（macos/iOS）至今不支持 VP9 解码 -
H.265 (HEVC)即使放在.mp4里：Safari 14+ macOS / iOS 支持，但 Chrome 和 Firefox 默认禁用（无系统级解码器支持） -
AV1：Firefox 90+、Chrome 90+、Edge 90+ 支持，但 Safari 16.4 才开始有限支持，且仅限 macOS Ventura 及更新系统
canPlayType() 返回 "" 或 "maybe" 是什么意思
这个 API 不是“能播”或“不能播”的二值判断，而是浏览器基于 MIME 类型字符串做的静态推测——它没真正加载文件，只查注册表里的解码器能力声明。
- 返回
""：浏览器明确不支持该类型（比如传"video/mp4; codecs=av01.0.05M.08"到旧版 Chrome） - 返回
"probably"：匹配到已知稳定支持的编码组合（如"video/mp4; codecs='avc1.42E01E, mp4a.40.2'"） - 返回
"maybe"：容器对，但编码信息不全或模糊（比如只写"video/mp4"，没带codecs参数），实际可能播不了 - 真实兼容性必须靠
canplay或loadedmetadata事件确认，canPlayType()仅作预筛选
为什么加了 preload="auto" 还是黑屏或报错
preload 控制的是浏览器是否主动下载视频元数据和首段内容，跟解码能力无关。黑屏常见于解码失败，而非加载问题。
- 常见错误现象：
VIDEO_ERROR_DECODE（Chrome）、NS_ERROR_DOM_MEDIA_DECODE_ERR（Firefox）——本质是编码不支持 - Safari 在 iOS 上强制要求
playsinline+ 用户手势触发播放，否则静音也不播，容易误判为格式问题 - 移动端 4G 网络下，部分 Android 厂商定制浏览器（如华为、小米）会拦截非
H.264视频，即使canPlayType()返回"probably" - 建议 fallback 方案：用
source标签按优先级列多个type，让浏览器自动选第一个能解码的
<video controls> <source src="vid.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"> <source src="vid.webm" type="video/webm; codecs='vp9, opus'"> </video>用 ffmpeg 转码时最容易忽略的兼容性参数
很多人只改 -c:v libx264 就以为万事大吉，但 H.264 兼容性还卡在 profile、level、keyframe 间隔这些细节上。
立即学习“前端免费学习笔记（深入）”；
- 必须指定
-profile:v baseline或main：iOS 10 以下、部分老 Android 设备不支持highprofile - 加
-level 3.1：确保 720p@30fps 以下内容能在绝大多数移动设备硬解（level 4.0+在低端机上常软解失败） - 避免
-g 0（禁用 GOP）：浏览器解码器依赖关键帧定位，-g 250（约 8s 一个 I 帧）比默认值更稳妥 - 音频务必用
-c:a aac -b:a 128k：MP3 在 Safari 上已不被<video></video>标签支持，即使type写对也会静音
复杂点在于：同一份源文件，为 Web 做的转码和为 App 做的转码目标完全不同；而“兼容性”不是布尔值，是分层的——iOS Safari 支持范围 ≠ Chrome Android ≠ Firefox Desktop。