需多个以兼容不同浏览器对视频编码格式的支持差异，浏览器按顺序尝试首个可解码源；type属性须准确声明容器与编码组合，推荐MP4在前、WebM在后，并确保MIME类型配置正确。
为什么
不同浏览器对视频编码格式的支持差异很大：Chrome 和 Edge 支持 WebM（VP9）和 MP4（H.264），Firefox 对 WebM 支持更原生，Safari 在旧版本中只认 MP4（且要求 AAC 音频 + H.264 Baseline Profile）。单靠一种格式无法覆盖所有用户。浏览器会按
type 属性必须写准确
省略 type 或写错会导致浏览器跳过该源（即使文件本身可播放）。常见正确写法：
-
type="video/mp4"→ 对应.mp4文件，需含 H.264 视频 + AAC 音频 -
type="video/webm"→ 对应.webm文件，推荐 VP9 视频 + Opus 音频 -
type="video/ogg"→ 对应.ogv，已基本淘汰，可不加
注意：type 不是 MIME 类型猜测，而是明确声明容器与编码组合。例如 type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" 更精确，但通常只写 video/mp4 就够用。
推荐的多源顺序与实际 HTML 结构
把兼容性最广、服务端最易分发的格式放前面（通常是 MP4），再补 WebM 提升现代浏览器体验。不要依赖自动 fallback —— 必须显式写
立即学习“前端免费学习笔记（深入）”；
关键点：
- 所有
开始标签内、内容文本前 - 不支持任何
- 避免在
上直接写src属性，否则会忽略内部所有 - 确保每个
src路径真实可访问，HTTP 状态码必须是 200；404 会导致该
验证是否生效的简单方法
打开 Chrome / Firefox / Safari 的开发者工具，切换到 Network 面板，刷新页面并播放视频。观察实际加载的是哪个 src 对应的文件。如果始终只加载第一个（比如 MP4），说明后续格式没被触发 —— 很可能是 type 写错、路径 404，或服务器未正确配置 WebM 的 MIME 类型（video/webm）。
服务器没配 MIME 类型时，浏览器可能拒收 WebM，哪怕文件存在。Nginx 需加：types { video/webm webm; }；Apache 可在 .htaccess 加：AddType video/webm .webm。
真正麻烦的不是写几个
