HTML5的<source>标签配合<audio>/<video>实现多格式回退，浏览器按顺序加载首个支持的格式；需按兼容性从低到高排列（如WebM→MP4），并准确声明type属性；fallback内容在所有source失败时显示。
HTML5 的 <source> 标签配合 <audio> 或 <video> 元素，能为不同浏览器提供多种编码格式的媒体资源，实现自动回退——浏览器会按顺序尝试加载 <source>，使用第一个它支持的格式。
基本结构：按兼容性优先级排列 source
关键原则是把最现代、压缩率高但支持度稍低的格式（如 WebM）放在前面，把兼容性最广的格式（如 MP4/H.264 + AAC）放在最后。浏览器从上到下解析，遇到第一个能解码的就停止：
<video controls> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
常见格式组合与 MIME 类型写法
务必正确声明 type 属性，否则浏览器可能跳过该 source（即使文件本身可播放）。常用组合包括：
- 视频：WebM（VP8/VP9 + Vorbis/Opus）→ MP4（H.264 + AAC）→ (可选) Ogg（Theora + Vorbis）
- 音频：WebM（Opus）→ MP3 → Ogg（Vorbis）
-
type必须精确，例如：video/webm; codecs="vp9, opus"或audio/mpeg（MP3）、audio/ogg; codecs=vorbis
验证回退是否生效的小技巧
不用依赖猜测，可通过开发者工具快速确认：
立即学习“前端免费学习笔记（深入）”；
- 在 Elements 面板中查看
<source>元素，已加载的那一个通常带有“loaded”类或被高亮 - 切换浏览器（如 Chrome、Firefox、Safari），观察实际加载的是哪个 source
- 临时把首选格式文件改名或返回 404，看是否会自动降级到下一个
注意 fallback 内容的位置和语义
所有 <source> 后的纯文本、图片或链接，都会作为最终 fallback 显示（仅当所有 source 都失败时）：
<audio controls> <source src="song.opus" type="audio/opus"> <source src="song.mp3" type="audio/mpeg"> <a href="song.mp3">点击下载音频文件</a> </audio>
这样既保证现代浏览器用高效格式播放，又为老旧环境提供手动获取途径，兼顾体验与可达性。
