必须嵌套在或内，作为格式候选列表按序加载首个支持项，脱离父标签会报错且播放器空白；type属性须与服务器返回的content-type严格一致，file://协议下无效。
<audio></audio>、<video></video>、<source></source>、<track></track>、<iframe></iframe>、<canvas></canvas> 是当前主流 HTML 多媒体承载方式，其中真正专用于音视频播放的是 <audio></audio> 和 <video></video>；<source></source> 和 <track></track> 是它们的辅助标签，不可单独使用。
为什么 <source></source> 必须嵌套在 <audio></audio> 或 <video></video> 里
浏览器按顺序读取 <source></source>，遇到第一个支持的格式就停止解析并加载——它本身不渲染、不播放，只是“候选列表”。如果把它写在外部或漏掉父标签，控制台会报错 DOMException: The element has no supported sources，且播放器直接空白。
- 必须写在
<audio></audio>或<video></video>开始与结束标签之间 - 多个
<source></source>的type值要真实匹配文件 MIME 类型（如audio/mp3错写成audio/mpeg在部分 Safari 版本中会跳过） - 路径错误时，浏览器静默失败，不会提示；建议用开发者工具 Network 面板确认请求是否 200
<track></track> 标签只对字幕/章节有效，不是通用文本容器
<track></track> 仅在 <audio></audio> 或 <video></video> 内部起作用，且 kind 属性必须是 subtitles、captions、descriptions、chapters 或 metadata 之一。设为其他值（比如 notes）会被忽略，连 <track></track> 元素本身都可能不被解析。
-
srclang必须是合法 BCP 47 语言码（如zh、en-US），写cn或空值会导致字幕不启用 - VTT 文件需 UTF-8 编码且首行必须是
WEBVTT，否则浏览器拒绝加载 - Chrome 对
default属性支持稳定，但 Safari 要求同时声明srclang才生效
autoplay 在 Chrome/Firefox 中默认被静音策略拦截
现代浏览器（Chrome ≥66、Firefox ≥66、Edge ≥79）禁止有声音的自动播放，除非用户已与页面交互过，或明确加了 muted。只写 autoplay 很可能无声且无反应，尤其在移动端。
- 带声音自动播放：基本不可行，不要依赖
- 静音自动播放：必须同时写
autoplay muted，且推荐加上playsinline（iOS Safari 防止强跳全屏） - 服务端返回的响应头若含
X-Frame-Options: DENY或Content-Security-Policy限制，<iframe></iframe>嵌入视频也会触发 autoplay 失败
<iframe></iframe> 和 <canvas></canvas> 不是替代方案，而是不同用途
<iframe></iframe> 是加载第三方页面（如 YouTube 嵌入），它不解析内部音视频资源，也不提供原生播放控制；<canvas></canvas> 本身不播放媒体，必须配合 JavaScript 的 drawImage() + requestAnimationFrame() 手动绘制帧，成本高、无障碍差、无法原生支持字幕/音轨切换。
- 想嵌 YouTube？用
<iframe src="https://www.youtube.com/embed/xxx"></iframe>，别试图用<video></video>加 YouTube 直链（CORS 和防盗链会拦截） - 做实时滤镜或逐帧动画？
<canvas></canvas>可行，但要用HTMLMediaElement（即<video></video>元素）作为图像源，不能直接读取 MP4 文件 -
<object></object>已被弃用，<embed></embed>兼容性差、无标准 API，不建议新项目使用
最容易被忽略的是 <source></source> 的 type 属性和服务器实际返回的 Content-Type 必须一致——很多本地开发时用 file:// 协议跑，type 写对了也没用，因为浏览器根本拿不到 MIME 类型，得走 HTTP 服务才能生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
