<source> 标签必须嵌套在 <audio> 或 <video> 内部才生效，单独写在 HTML 中不渲染、不加载，会导致空白和 DOMException 报错。
为什么 <source> 不能单独写在 HTML 里
浏览器解析 <source> 时，只把它当“候选列表”，不渲染、不播放、不触发加载——它必须嵌套在 <audio> 或 <video> 内部才生效。漏掉父标签，控制台会报 DOMException: The element has no supported sources，播放器区域直接空白。
常见错误包括：
- 把
<source src="a.mp4" type="video/mp4">写在<body>顶层，而非<video>...</video>之间 -
type值与服务器返回的Content-Type不一致（例如后端返回audio/mpeg，但写成audio/mp3） - 用
file://协议本地测试，<source>完全不工作（CORS 和协议限制导致静默失败）
preload 属性的三个值到底怎么选
preload 控制的是视频/音频资源在页面加载阶段的预加载行为，不是“要不要加载”，而是“加载多少”。它只对未设置 autoplay 的媒体生效；设了 autoplay 后，浏览器通常忽略 preload。
三个取值的实际影响：
立即学习“前端免费学习笔记（深入）”；
-
none：不预加载任何内容，首次点击播放时才发起请求——适合大视频、低带宽场景或用户大概率不播的情况 -
metadata：只下载头部元数据（时长、分辨率、编码信息等），足够渲染控件和封面图（poster）——首屏视频推荐设这个，兼顾响应速度和带宽 -
auto：允许浏览器下载尽可能多的内容（可能整段缓存）——仅适用于小体积、高确定性播放的视频（如 banner 动画），否则拖慢首屏 LCP
注意：preload="auto" 在移动 Safari 上可能被降级为 metadata，且不保证实际加载量。
懒加载 loading="lazy" 对 <video> 无效？
是的。loading="lazy" 是 <img> 和 <iframe> 的原生属性，<video> 和 <audio> **不支持该属性**。试图写 <video loading="lazy"> 会被浏览器完全忽略，既不触发懒加载，也不报错。
想实现视频懒加载，得靠 JS 手动控制：
- 初始时用
data-src存路径，<video>标签空着src - 用
IntersectionObserver监听进入视口，再赋值video.src = video.dataset.src并调用video.load() - 旧版 Safari（15.4 之前）不支持
loading="lazy"for<iframe>，同理需 fallback 到这种 data-src + observer 方案
poster 和 <source> 的顺序谁更重要
poster 是视觉层的第一反馈，<source> 是加载层的格式协商——两者不冲突，但加载策略上，poster 应优先保障可立即显示。
实操建议：
-
poster图片必须用<img>级别优化：压缩、指定width/height、考虑srcset响应式，避免它成为 LCP 瓶颈 -
<source>的排列顺序决定浏览器选用逻辑：把兼容性好、体积小、解码快的格式放前面（如 WebM 常比 MP4 更小更快，但 Safari 支持晚，所以 MP4 往前放更稳妥） - 如果
poster加载失败，用户看到的是黑屏或默认灰块；如果所有<source>都不支持，用户看到的是后备内容（如<p>不支持该视频格式</p>）——前者影响感知，后者影响功能
真正容易被忽略的是：很多人把 poster 当成“可有可无的装饰”，但它其实是用户等待视频加载时唯一的视觉锚点；一旦它加载慢或尺寸没声明，就会引发布局偏移（CLS），直接拉低 Core Web Vitals 分数。
