最标准做法是用多个source标签按兼容性顺序嵌入video中，首推H.264 MP4（iOS Safari强制要求），其次VP9 WebM，Ogg可选；type须精确声明codecs，服务端Content-Type必须严格匹配，且需兜底提示。
直接用多个 source 标签嵌在 video 里，按浏览器支持能力自动选一个能播的——这是解决编码兼容问题最标准、最轻量的做法。
为什么不能只写一个 MP4？
不同浏览器内置的解码器不同：Safari 和 IE 主要靠 H.264（MP4），Firefox 和 Chrome 对 VP9（WebM）支持更好，老版 Firefox 还依赖 Ogg Theora。单靠 MP4 会漏掉部分用户，尤其在隐私模式或某些企业内网环境里，H.264 解码可能被策略禁用。
- MP4（H.264 + AAC）：覆盖 Safari、Edge、iOS/Android 原生浏览器，兼容性最广
- WebM（VP9 + Opus）：开源免授权，Chrome/Firefox 加载快、压缩率高
- Ogg（Theora + Vorbis）：仅作备用，现代浏览器基本不用，但对极旧 Firefox 有兜底作用
正确的写法和顺序
source 必须放在 video 开始标签内、后备文字之前；顺序很重要——浏览器从上到下试，找到第一个能解码的就停，后面全跳过。
- 把 MP4 放最前面，兼顾加载速度和最大覆盖
- WebM 紧跟其后，给现代桌面浏览器更优体验
- Ogg 可选，放最后，不加也行
- 绝对不要在 video 上同时写 src 属性，否则所有 source 都被忽略
容易出错的三个细节
很多兼容性问题其实不是格式本身不行，而是部署环节卡住了。
-
type 属性写错：比如写成
type="video/webm; codecs=vp9"而不是标准的type="video/webm"，部分浏览器会直接跳过 - 文件路径 404：某个 source 的视频文件返回 HTTP 404，浏览器静默跳过，不会报错，但用户可能一直卡在加载状态
-
服务器没配 MIME 类型：特别是 WebM 文件，若服务器没返回
Content-Type: video/webm，Chrome/Firefox 可能拒收，哪怕文件存在
怎么验证是否生效？
打开 Chrome 或 Firefox 的开发者工具 → Network 标签页 → 刷新页面并点播放 → 看实际加载的是哪个文件名。如果始终只加载 MP4，说明 WebM 没触发，优先检查 type 值、路径可访问性、服务器 MIME 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
