和是唯一原生音视频标签，按顺序匹配首个type一致且200响应的资源，type需与服务器content-type严格一致；必须嵌套于其父标签内且位于开始标签后；autoplay需配合muted才可在现代浏览器生效；要求kind、srclang、vtt格式及编码完全合规，且依赖父元素生命周期完整。
<audio></audio> 和 <video></video> 是唯二真正用于音视频播放的原生 HTML 标签，其他如 <source></source>、<track></track> 必须嵌套其中才有效；单独写、漏父标签、或放错位置，都会导致播放器空白且控制台报 DOMException: The element has no supported sources。
为什么 <source></source> 总是不加载？
浏览器按顺序解析 <source></source>，遇到第一个 type 匹配且资源返回 200 的就停，后续全部跳过。常见失效原因：
-
type值与服务器实际返回的Content-Type不一致（例如写audio/mp3，但服务端发的是audio/mpeg，Safari 会直接忽略） -
src路径 404 或跨域被拦，浏览器静默失败，Network 面板里看状态码才能确认 - 把
<source></source>写在<audio></audio>或<video></video>外部，或放在controls属性之后（必须在开始标签和结束标签之间，且最好紧贴开头） - 使用
file://协议本地打开，<source></source>全部失效——现代浏览器禁用该协议下的媒体加载
autoplay 为什么点了没反应？
Chrome ≥66、Firefox ≥66、Edge ≥79、Safari 全面启用静音自动播放策略：有声音的 autoplay 默认被拦截，除非用户已与页面交互（如点击、滚动），或明确加 muted。
- 带声音自动播放：基本不可行，不要依赖
- 静音自动播放：必须同时写
autoplay muted，iOS Safari 还要加playsinline防止强跳全屏 -
<iframe></iframe>嵌入的视频同样受限制——若外链页响应头含X-Frame-Options: DENY或Content-Security-Policy限制，autoplay也会失败
<track></track> 字幕为什么始终不显示？
<track></track> 不是通用文本容器，只对字幕/章节生效，且依赖严格校验：
-
kind必须是subtitles、captions、descriptions、chapters或metadata之一；写成notes或留空，整个<track></track>会被忽略 -
srclang必须是合法 BCP 47 语言码（如zh、en-US），写cn或zh-CN（部分旧 Safari 不认）会导致字幕不启用 - VTT 文件必须 UTF-8 编码，且首行必须是纯文本
WEBVTT（不能有 BOM、空格或注释），否则浏览器拒绝加载 - Safari 对
default属性支持弱，建议同时声明srclang才能触发默认启用
真正容易被忽略的点是：所有 <source></source> 和 <track></track> 的有效性都依赖父级 <audio></audio> 或 <video></video> 的完整生命周期——比如 JS 动态插入后未调用 load()，或 DOM 尚未 ready 就设置 autoplay，都会让这些辅助标签形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
