html5 标签通过按优先级排列的 元素实现多格式兼容，浏览器顺序尝试并使用首个可解码格式；推荐 mp4（h.264/aac）置首，次选 webm，ogg 可省略；type 属性须准确匹配 mime 类型，且应提供 fallback 文字。

HTML5 的 <video></video> 标签通过嵌套多个 <source></source> 元素实现多格式兼容，浏览器会按顺序尝试加载，使用第一个它能解码播放的格式。

基本结构：按优先级从高到低排列格式

推荐将现代高效格式（如 MP4 H.264 + AAC）放在最前，其次是 WebM，最后是 Ogg。浏览器一旦匹配成功即停止后续尝试。

• MP4（H.264/AAC）：兼容性最广，支持所有主流桌面和移动端浏览器
• WebM（VP9/Opus 或 VP8/Vorbis）：开源免专利，Chrome、Firefox、Edge 原生支持，Safari 16.4+ 开始支持 VP9
• Ogg（Theora/Vorbis）：老旧格式，仅 Firefox 和旧版 Chrome 支持，现基本可省略

正确写法：type 属性必须准确，且 src 指向有效资源

type 属性用于提前告知浏览器该资源的 MIME 类型，帮助跳过不支持的格式，提升加载效率。务必与实际文件编码一致。

示例：

常见错误与规避建议

• type 值写错：如写成 video/mpeg（对应 .mpeg 文件）或漏掉 video/ 前缀，会导致浏览器忽略该 source
• MP4 编码不标准：某些 FFmpeg 导出的 MP4 若未用 baseline 或 main profile，iOS Safari 可能无法播放；建议用 H.264 Baseline Profile + AAC-LC
• 缺少 fallback 文字：在所有 <source></source> 后添加简明提示，兼顾无障碍与旧浏览器体验
• 依赖 JavaScript 动态插入 source：可能绕过浏览器原生格式探测逻辑，应优先用静态 HTML 结构

进阶：响应式与自适应格式可选（非必需但实用）

若需适配不同网络环境或设备能力，可结合 media 属性做简单条件加载（注意：仅控制是否下载，不改变播放行为）：

更精细的自适应（如 ABP、DASH）需借助 MSE 和 JavaScript 框架（如 hls.js、dash.js），已超出 <source></source> 原生能力范围。

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