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

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

为什么需要多格式回退

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

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

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

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

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

• 视频：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 检测与降级更稳妥

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

<script><br> const v = document.getElementById('myVideo');<br> v.addEventListener('error', () => {<br> &nbsp;&nbsp;console.warn('&#25152;&#26377;&#26684;&#24335;&#22343;&#19981;&#21487;&#29992;');<br> &nbsp;&nbsp;// &#21487;&#25552;&#31034;&#29992;&#25143;&#12289;&#21152;&#36733;&#22791;&#29992;&#20869;&#23481;&#25110;&#19978;&#25253;&#38169;&#35823;<br> });<br> </script>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！