track标签是浏览器原生支持字幕的唯一标准通道，须置于video内紧邻source后，kind和srclang需合规，vtt文件须严格遵循格式与编码规范，mode仅支持三态且依赖readystate。
track 标签不是“加字幕”的快捷方式，而是浏览器原生支持字幕加载、同步与语言切换的唯一标准通道。 它本身不渲染文字，也不执行时间轴匹配——这些全由浏览器内置的 WebVTT 解析器和 textTracks API 联动完成。你写错位置、用错格式、漏掉必要属性，它就直接失效，且几乎不报错。
为什么 track 必须放在 video 内部且紧挨 source 后面
浏览器解析 video 元素时是顺序读取子节点：source 告诉它“播什么”，track 告诉它“配什么轨道”。如果 track 被写在 video 外面、插在 source 前面、或被包进 div 里，DOM 虽然存在该节点，但 video.textTracks.length 永远为 0。
- 错误写法：
<div><track src="a.vtt"></track></div>→ 浏览器忽略 - 正确顺序：
<video><source><track><track></track></track></source></video> - 动态插入也无效：用 JavaScript appendChild 添加的
track不会被识别（除非在video加载前插入并触发重新解析）
kind 和 srclang 的强制约束条件
kind="subtitles" 是最常用类型，但它不是可选的——必须显式声明；而 srclang 在 kind="subtitles" 或 "captions" 时是强制属性，否则轨道不会出现在播放器的字幕菜单中，且部分浏览器（如 Safari）会静默丢弃该轨道。
- 合法值仅限 BCP 47 语言码，例如
zh、zh-CN、en-US，不能写chinese或english -
kind="descriptions"或"chapters"时srclang可省略 -
kind="metadata"不显示内容，仅供 JS 读取，常用于章节跳转或自定义事件触发
.vtt 文件的硬性格式要求
哪怕只多一个空格、少一个换行，浏览器都可能拒绝加载。WebVTT 文件必须满足三项铁律：
- 首行必须是
WEBVTT（全大写，无空格，无 BOM） -
WEBVTT后必须紧跟一个空行（\n\n），不能是空格或制表符 - 每个字幕块格式为：
序号\n起始时间 --> 结束时间\n文本内容，时间戳必须是hh:mm:ss.mmm格式，毫秒位固定三位 - 文件编码必须为 UTF-8（无 BOM），否则中文显示为乱码或整个文件加载失败
示例有效片段：
WEBVTT 1 00:00:01.000 --> 00:00:04.000 你好，欢迎观看。 2 00:00:04.500 --> 00:00:07.200 这是第二句字幕。
track.mode 的三态逻辑与常见误用
track.mode 只接受 "disabled"、"hidden"、"showing" 三个字符串值，没有 "auto" 或 true/false。它的行为和 CSS display 不同，且不能通过 class 或 style 控制。
-
"disabled"：轨道完全禁用，不参与任何解析和事件监听 -
"hidden"：轨道已加载并解析，但不显示，可用于预加载备用字幕 -
"showing"：当前激活并显示，且会触发cuechange事件 - 设置
default属性 ≠ 自动设为"showing"：它只影响用户未手动选择时的初始状态，仍需浏览器支持且mode实际值取决于 UA 行为
动态切换时别直接改 mode，先确认 track 已就绪：if (track.readyState === 2) track.mode = "showing";
最容易被忽略的是 CORS 和路径问题：只要 src 指向跨域资源，且服务端没配 Access-Control-Allow-Origin，轨道就会加载失败，但控制台通常不报错，textTracks 列表里也看不到它——得靠 track.onerror 或 Network 面板排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
