<source>标签仅提供备选资源，浏览器按顺序选用首个能解码成功的；失效主因是type与Content-Type逐字符不一致、本地file://协议禁用匹配、video中media属性无效；iOS Safari要求首位source必须为H.264 MP4。
<source> 标签本身不播放、不渲染、不触发加载，它只是告诉浏览器“我这里有几个备选资源”，最终播哪个，由浏览器按顺序挑第一个能用的——不是你认为最优的，而是它第一个能解码成功的。
为什么写了 <source> 还是白屏或报 “Not supported”
常见失效不是代码写错了，而是三处没对齐：
-
type属性值必须和服务器返回的Content-Type响应头**逐字符一致**，比如audio/mpeg写成audio/mp3，Safari 就直接跳过 - 文件后缀 ≠ 格式，一个
.mp4文件如果封装了 AV1 视频流，type="video/mp4"仍可能被忽略，得加codecs：如type="video/mp4; codecs="av1"" - 本地用
file://协议打开时，所有<source>都静默失效——必须走 HTTP(S) 服务才能触发 type 匹配逻辑
<source> 在 <video> 和 <picture> 中行为完全不同
别混用经验：
- 在
<video>里，media属性基本被所有浏览器忽略（Chrome/Firefox/Safari/Edge），写了也白写；真正起效的只有type+ DOM 顺序 - 在
<picture>里，media是核心，它配合srcset和sizes才能做响应式图片切换；但注意sizes必须写在<img>上，不能放<source>里 -
<video>中的<source>不支持srcset，想适配不同分辨率？得上 HLS/DASH 或 JS 动态换src
兼容性排序不能凭直觉，得按浏览器实际支持排
iOS Safari 强制要求首个 <source> 必须是 H.264 编码的 MP4（type="video/mp4"），否则可能静音、禁止自动播放，甚至抛 NotAllowedError。所以顺序必须是：
立即学习“前端免费学习笔记（深入）”；
- 第一项：
<source src="vid-h264.mp4" type="video/mp4">（H.264，AVC1 编码） - 第二项：
<source src="vid-vp9.webm" type="video/webm; codecs="vp9""> - 第三项（可选）：
<source src="vid-av1.mp4" type="video/mp4; codecs="av1"">（仅 Safari 16+、Chrome 109+ 支持）
把 WebM 放第一位，Safari 用户就只能看到空白控件——它不会 fallback 到第二个，而是直接放弃整个 <video>。
最容易被忽略的一点：浏览器判断“能用”，要同时满足三个条件——type 匹配、HTTP 返回 200、视频帧真能解码。缺一不可。Network 面板里看到请求成功，不代表就能播；得进 Media 面板看解码器是否初始化成功。
