<video>需多个<source>以兼容不同浏览器对视频编码格式的支持差异，浏览器按顺序尝试首个可解码源；type属性须准确声明容器与编码组合，推荐MP4在前、WebM在后，并确保MIME类型配置正确。
为什么 <video> 需要多个 <source>
不同浏览器对视频编码格式的支持差异很大：Chrome 和 Edge 支持 WebM（VP9）和 MP4（H.264），Firefox 对 WebM 支持更原生，Safari 在旧版本中只认 MP4（且要求 AAC 音频 + H.264 Baseline Profile）。单靠一种格式无法覆盖所有用户。浏览器会按 <source> 出现顺序依次尝试，遇到第一个能解码的就加载，其余跳过。
<source> 的 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 —— 必须显式写 <source> 标签。
立即学习“前端免费学习笔记（深入）”；
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
关键点：
- 所有
<source>必须在<video>开始标签内、内容文本前 - 不支持任何
<source>的老浏览器（如 IE8）会显示末尾的提示文字 - 避免在
<video>上直接写src属性，否则会忽略内部所有<source> - 确保每个
src路径真实可访问，HTTP 状态码必须是 200；404 会导致该<source>被跳过，但不会报错提示
验证是否生效的简单方法
打开 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。
真正麻烦的不是写几个 <source>，而是确保每条链路都通：编码合规、文件可访问、MIME 正确、路径无缓存污染。
