先记住这个答案
在 <audio> 或 <video> 里写多个 <source>，浏览器会按文档顺序考察可播放的来源，通常选第一个合适的候选。type 告诉浏览器资源格式，便于它在不下载整份文件前跳过不支持的候选。它解决的是格式兼容，不保证网络地址有效、字幕可用或内容可访问；关键媒体仍应提供文本替代和失败反馈。
- 多个
<source>按顺序尝试 type声明媒体 MIME 类型- 浏览器选择可播放的候选
- 字幕与网络错误需另行处理
同一视频提供两种格式
产品演示视频准备了两个编码版本，希望浏览器选择能解码的一个。候选顺序应体现希望优先使用的格式，type 写真实 MIME 类型，不要把文件扩展名直接当类型。
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
浏览器不支持视频播放。
</video>
<p><a href="demo-transcript.html">阅读视频文字稿</a></p>支持 WebM 的浏览器可先用第一条；不支持时再考虑 MP4。<video> 内文本主要用于元素不被支持的情况，文字稿链接放在外面才能让现代浏览器用户也看见。
<audio> 的做法相同，只是媒体资源和控件不同。真实上线时还要确认服务端返回正确的 MIME 类型、资源可访问，并按需要提供字幕轨道。
格式候选不等于完整回退
如果浏览器预判格式可用，但请求返回错误、文件损坏或服务器没启用正确传输，用户仍可能播放失败。不要把“写了两条 <source>”当成错误状态处理完成。
对重要媒体，检查 error 状态并提供下载或替代内容。视频中的对白与关键信息还需要字幕或文字稿；单纯换格式不能解决无法听到内容的问题。
多个 <source> 是同一段媒体的格式候选，不是把几个片段按顺序播放。浏览器会挑它能处理的候选源，若网络请求失败或服务器给错媒体类型，实际回退仍要在目标浏览器里验证。每个候选应对应同一内容与时长，否则不同浏览器看到的不是同一个视频。字幕用 <track> 单独提供，下载链接或文字稿也应放在播放器外，不能指望 <source> 解决可访问性。
容易答错的地方
- 以为浏览器总下载每一个
<source> - 浏览器会依据格式支持情况选择候选，不是把所有文件一起下载播放。
- 把
type写成.mp4 type应是 MIME 类型，如video/mp4，可附编码信息；文件后缀不是 MIME 类型。
面试官还会怎么问？
候选顺序重要吗？
重要。浏览器按顺序考虑可用来源，通常会采用第一个合适的资源。
有两个来源还需要文字稿吗？
需要。多格式解决播放兼容，文字稿解决无法听、不能开声音或希望检索内容的问题。
<picture> 里的 <source> 和视频里一样吗？
元素形式相同，但图片会结合媒体条件、格式与图片候选规则，且 <picture> 需要 <img> 作为实际图片。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。