html5 标签通过按顺序嵌套多个 实现多格式兼容，浏览器仅选用首个可解码格式；mp4（h.264+aac）必须置首以保障全平台兼容，webm次之，ogg可省略；type 属性须精确声明 mime 类型及 codecs，且服务端 content-type 响应头必须严格匹配。
HTML5 的 <video></video> 标签通过嵌套多个 <source></source> 元素实现多格式兼容，浏览器按顺序尝试加载，使用第一个它能解码播放的格式。关键不是“堆数量”，而是“排顺序+配准确”。
按兼容性优先级排列 source 顺序
主流浏览器对视频编码的支持有明显差异，把最通用的格式放最前面，能避免低版本浏览器跳过全部而显示 fallback 文字：
- MP4（H.264 + AAC）必须放在第一位：覆盖所有现代桌面浏览器、iOS Safari、Android WebView 和绝大多数 Hybrid App
- WebM（VP9/Opus 或 VP8/Vorbis）紧随其后：Chrome、Firefox、Edge 原生支持；Safari 16.4+ 开始支持 VP9
- Ogg（Theora/Vorbis）可省略：仅旧版 Firefox 和极少数场景需要，当前已基本无必要
type 属性必须写对且匹配实际编码
type 不是可选项，它是浏览器跳过不支持格式的关键依据。写错会导致该 <source></source> 被直接忽略：
- MP4 对应
type="video/mp4"（不是video/mpeg或漏掉video/） - WebM 对应
type="video/webm"（Nginx/Apache 需配置 MIME 类型，否则即使文件存在也会被拒收） - 确保每个
src指向真实可访问的资源，HTTP 状态码必须为 200
结构规范与常见避坑点
正确嵌套和基础结构直接影响是否生效：
- 所有
<source></source>必须在<video></video>开始标签内、fallback 文字之前 -
不要在
<video></video>上同时写src属性，否则会覆盖全部<source></source> - fallback 文字必不可少：既服务老旧浏览器（如 IE8），也提升无障碍体验
- Hybrid App（尤其 Android）部分机型只读取第一个
<source></source>，所以 MP4 放首位不仅是推荐，更是刚需
简单验证是否生效的方法
不用猜，用浏览器开发者工具快速确认：
- 打开 Chrome/Firefox/Safari 的 Network 面板
- 刷新页面并触发视频加载（比如点击播放）
- 观察实际加载的是哪个
src对应的文件 - 如果始终只加载 MP4，而 WebM 没触发，大概率是
type错、路径 404，或服务器未配置 WebM MIME 类型
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
