html5 的 track 标签是浏览器原生支持字幕加载、语言切换与时间轴同步的唯一标准通道，必须嵌在 video 内且紧接 source 后，需完整包含 kind、srclang、src、label 四属性，vtt 文件须严格遵循格式规范。
HTML5 的 track 标签不是“加字幕”的按钮，而是浏览器原生支持字幕加载、语言切换与时间轴同步的**唯一标准通道**。它本身不渲染文字、不解析时间码、也不做任何匹配——所有这些工作都由浏览器内置的 WebVTT 解析器和 textTracks API 自动完成。写错位置、漏掉属性、格式偏差一丁点，字幕就彻底消失，且控制台往往静默无报错。
track 标签必须嵌在 video 内部，且紧接 source 之后
浏览器按顺序解析 <video></video> 的子节点：<source></source> 告诉它“播什么”，<track></track> 告诉它“配什么轨道”。这个顺序不可颠倒，也不可跳过。
- ✅ 正确结构：
<video><source><track></track></source></video> - ❌ 错误结构：track 放在 source 前、video 外、div 里，或用 JS 动态 append（除非在 video 加载前插入并强制重解析）
- 验证方法：打开开发者工具，在 Console 输入
document.querySelector('video').textTracks.length，若返回 0，说明 track 未被识别
必需属性缺一不可：kind、srclang、src、label
这四个属性共同决定字幕是否出现在播放器菜单中、能否被用户选择、以及是否能正确加载。
-
kind="subtitles"：必须显式写全，不能是 "subtitle" 或空值；其他合法值包括
captions（含音效描述）、descriptions（视障音频描述）、chapters（章节导航） -
srclang：当 kind 是
subtitles或captions时为强制项，值必须是 BCP 47 标准语言码（如zh-CN、en-US），不能写成 "chinese" 或 "english" -
src：指向 .vtt 文件的路径，需确保 HTTP 状态码为 200，服务器返回 MIME 类型为
text/vtt（Nginx/Apache 需显式配置） - label：用户在字幕菜单中看到的名称（如“中文（简体）”），建议填写，否则可能显示为空白或默认名
VTT 文件格式三铁律：首行、空行、时间戳
WebVTT 解析器容错率为零。哪怕多一个空格、少一个换行、毫秒位多一位，整个文件都会被浏览器拒绝加载。
- 首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT - WEBVTT 后必须紧跟一个空行（
\n\n），不能是空格或制表符 - 每段字幕格式为：
序号
起始时间 --> 结束时间
文本内容
其中时间戳必须严格为hh:mm:ss.mmm（小时、分钟、秒各两位，毫秒三位，中间两个空格） - 文件编码必须为 UTF-8 无 BOM（Windows 记事本默认带 BOM，推荐用 VS Code 或 Notepad++ 保存为 “UTF-8 without BOM”）
时间轴同步完全由浏览器自动完成
track 标签不参与时间计算。浏览器在视频播放过程中，持续监听 textTracks 中已启用轨道的 cue 列表，根据当前播放时间（currentTime）匹配对应时间段的字幕块，并触发 enter / exit 事件。开发者可通过监听 cuechange 事件获取当前激活字幕：
- 例如：
video.textTracks[0].mode = 'showing'启用轨道 video.textTracks[0].oncuechange = () => { console.log(video.textTracks[0].activeCues); }- 注意：字幕偏移 ≠ 时间轴写错，更可能是视频原始时间码与 VTT 时间码存在整体偏移，需统一校准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
