MP4（H.264+AAC）是跨平台兜底首选，全浏览器原生支持；WebM（VP9+Opus）压缩率高、适合带宽敏感场景，但iOS Safari不支持；Ogg已基本退出主流，仅限特定开源或遗留项目备用。
MP4、WebM 和 Ogg 是 HTML5 <video></video> 元素支持的三大主流容器格式，但它们在兼容性、体积、画质和适用场景上差异明显。选错格式不只影响播放，还可能拖慢首屏、浪费带宽、甚至导致 iOS 或旧安卓设备完全无法加载。
MP4（H.264 + AAC）：跨平台兜底首选
MP4 不是“一种格式”，而是一个容器；真正起作用的是里面的编码组合。H.264 视频 + AAC 音频是目前唯一被所有主流浏览器（包括 iOS Safari、Android Chrome、Edge、Firefox）原生支持的组合。它不依赖插件，也不需要 JS 解码，打开即播。
- 适合绝大多数商业项目，尤其是面向真实用户（含中老年、非旗舰机用户）的页面
- 文件体积比 WebM 略大，但解码效率高，低端设备更稳
- 务必用
-movflags +faststart参数处理 MP4，否则 Safari 可能卡在加载头信息阶段 - 避免混用 H.265（HEVC）——虽然画质更好、体积更小，但旧版安卓和部分低端 iOS 设备不支持
WebM（VP9 + Opus）：压缩与画质优先的选择
WebM 是 Google 主导的开源格式，VP9 编码能在同等画质下比 H.264 减少约 30%–50% 的体积，特别适合短视频、信息流、带宽敏感场景（如 4G 用户或海外 CDN 成本高的项目）。
- Chrome、Firefox、新版 Edge 支持良好；但 iOS 全系 Safari 原生不支持（截至 iOS 17.x）
- 移动端若强依赖 WebM，需配合 JS 检测并 fallback 到 MP4，否则白屏风险高
- VP9 对 CPU 解码压力略高于 H.264，老旧安卓平板可能出现轻微卡顿
- 搭配
preload="metadata"和playsinline可显著改善 H5 页面内联体验
Ogg（Theora + Vorbis）：仅限特定场景的备用选项
Ogg 是早期 HTML5 推广阶段的重要格式，Theora 编码免费开放，但压缩效率低、画质弱、体积大。如今除极少数强调全栈开源（如纯 Firefox 内网系统）或遗留项目外，已基本退出主流选择。
立即学习“前端免费学习笔记（深入）”；
- Firefox 仍支持，但 Chrome 和 Safari 已逐步弱化支持，新版 Safari 甚至完全移除 Theora 解码器
- 相同分辨率下，Ogg 文件体积常比 MP4 大 2–3 倍，CDN 流量和加载时间明显吃亏
- 不推荐新建项目使用；若必须兼容老 Firefox（如教育机构内网），建议仅作为第三备选，放在
<source></source>列表末尾
多格式策略：按顺序 fallback，不是堆叠越多越好
浏览器会从上到下读取 <source></source> 标签，加载第一个它能解码的格式。顺序错误反而降低体验：
- 推荐写法：
<source src="vid.webm" type="video/webm"></source>→<source src="vid.mp4" type="video/mp4"></source> - WebM 放前：现代浏览器优先用更小体积；MP4 放后：作为 iOS 和旧设备的保底
- 避免把 Ogg 放中间——它既不能提升新设备体验，又可能让 Safari 多一次失败尝试
- 实际项目中，MP4 + WebM 组合已覆盖 99%+ 用户；加 Ogg 通常只增加维护成本，不带来实质收益
