核心是按浏览器兼容性顺序试探标签，首推H.264 MP4（iOS Safari强制要求），其次VP9 WebM，AV1 MP4放最后；type须精确声明codecs，服务端Content-Type必须严格匹配，且需兜底提示。
核心是用 <source></source> 标签按浏览器实际支持能力“顺序试探”，不是选画质最好的，而是找第一个能解码成功的——顺序、type 声明、服务端响应三者必须严丝合缝。
格式顺序必须按真实兼容性排，不是按新旧或压缩率
视频推荐顺序：MP4（H.264 + AAC）→ WebM（VP9 + Opus）→（AV1 MP4 可选，放最后）。音频推荐：MP3 → WAV → Opus（WebM 封装）。
- iOS Safari 强制要求第一个
<source></source>是 H.264 编码的 MP4，否则可能静音、报错甚至拒绝播放 - 把 WebM 放第一位，Safari 会跳过它，又因首源失效，整个
<video></video>可能卡在 loading 状态，不触发 fallback - AV1 编码的 MP4 兼容范围窄（仅 Chrome/Firefox + Safari 16+），必须写准 type 并放在末尾
type 属性必须带精确 codecs，不能只写 MIME 类型
type 是浏览器跳过不支持格式的唯一依据，写宽泛等于白请求一次。
- ✅ 正确写法：
type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""（H.264 Baseline + AAC-LC） - ✅ WebM 推荐不带 codecs：
type="video/webm"，避免 VP9 字符串大小写或点号偏差导致 Safari 返回空字符串 - ❌ 错误写法：
type="video/mp4"、type="mp4"、type="video/mpeg"、type="video/mp4; codecs="h264""
服务端 Content-Type 必须和 type 值严格匹配
浏览器靠 type 和响应头双重校验。哪怕 HTML 写得再准，服务端返回错的类型，该 <source></source> 就会被静默跳过。
立即学习“前端免费学习笔记（深入）”；
- 用
curl -I https://example.com/vid.mp4检查是否返回Content-Type: video/mp4 - MP4 文件必须是 H.264 编码（可用
ffprobe vid.mp4验证），不是 AV1 或 HEVC；WebM 必须是 VP9，不是 AV1 - 别信文件后缀：叫
clip.mp4的文件可能是 AV1 编码，Safari 会直接忽略
结构规范与兜底提示不能少
所有 <source></source> 必须嵌在 <video></video> 或 <audio></audio> 内部，且不能和元素自身的 src 属性共存。
- 每个
<source></source>的src必须指向真实可访问的文件（相对或绝对 URL 均可） - 在所有
<source></source>之后、之前，加一段简明文字，如“您的浏览器不支持视频播放”——这是给老设备、屏幕阅读器和加载失败时用的 - 不要用 JavaScript 动态插入
<source></source>，这会绕过浏览器原生的格式探测逻辑
