HTML5中标签配合/实现多格式自动回退，浏览器按顺序尝试加载直至找到支持格式；需按兼容性优先级排列并准确设置type属性（含codecs），必要时用JavaScript监听error事件降级处理。

在HTML5中，<source></source> 标签配合 <audio></audio> 或 <video></video> 使用，能实现多格式自动回退——浏览器会按顺序尝试加载 <source></source> 列表中的资源，遇到不支持的格式就跳过，直到找到第一个能播放的格式为止。

为什么需要多格式回退

不同浏览器对音视频编码格式的支持差异较大。例如：

• Chrome、Edge 支持 MP4（H.264 + AAC）和 WebM（VP8/VP9 + Vorbis/Opus）
• Safari 对 MP4 兼容性最好，但默认不支持 WebM
• Firefox 偏好 WebM，也支持 MP4，但某些旧版本对 H.264 有许可限制
• 部分移动端 WebView 可能只认特定封装或编码组合

只提供单一格式容易导致在某些设备上无法播放，用 <source></source> 提供多个选项可显著提升兼容性。

正确写法：按推荐优先级排列

浏览器严格按 HTML 中 <source></source> 的书写顺序尝试加载，所以要把最可能被支持、质量最优的格式放在前面。常见推荐顺序：

立即学习“前端免费学习笔记（深入）”；

• 视频：MP4（H.264+AAC）→ WebM（VP9+Opus）→ Ogg（Theora+Vorbis）
• 音频：MP3 → WAV → Ogg（Vorbis）→ Opus（WebM）

示例（视频）：

type 属性不是可选的，但必须准确

type 属性告诉浏览器该资源的 MIME 类型和编码信息，浏览器可据此快速跳过不支持的格式，避免无谓请求。写错或省略 type 会导致回退失效或触发额外网络请求。

常用合法值：

• video/mp4; codecs="avc1.42E01E, mp4a.40.2"（H.264 Baseline + AAC LC）
• video/webm; codecs="vp9, opus"
• audio/mpeg（MP3）
• audio/wav（未压缩 PCM）
• audio/ogg; codecs="vorbis" 或 "opus"

注意：不要写 type="video/mp4" 这种过于宽泛的值，尽量带上 codecs 参数更可靠。

配合 JavaScript 检测与降级更稳妥

虽然 <source></source> 自动回退已很实用，但极端情况（如全部格式加载失败、网络中断、解码失败）仍需处理。可用 JavaScript 监听 error 或 canplaythrough 事件：

<script><br> const v = document.getElementById('myVideo');<br> v.addEventListener('error', () => {<br> console.warn('所有格式均不可用');<br> // 可提示用户、加载备用内容或上报错误<br> });<br> </script>