<track>必须是<video>的直接子元素且紧接在所有<source>之后，放错位置（如外部、<div>内或<source>前）会导致字幕静默失效；需满足结构、路径、MIME类型、VTT格式及属性设置四重条件。
track 标签必须写在 video 内部且紧贴 source 之后
浏览器只认 <track> 是 <video> 的直接子元素，如果放在 <div> 里、或者写在 <video> 外面，字幕根本不会加载。常见错误是把 <track> 和播放器 UI 放一起，结果控制台连请求都看不到。
正确结构示例：
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" label="中文" srclang="zh" src="subtitles.zh.vtt" default> </video>
-
kind="subtitles"是最常用值；用captions时会强制显示（含音效描述），descriptions则需辅助技术支持 -
srclang必须是合法 BCP 47 语言标签（如zh、zh-Hans、en-US），错写成ch或cn会导致字幕不自动匹配 -
default属性只允许一个 track 使用，否则行为未定义；用户手动切换后该属性不再生效
vtt 文件路径 404 是最常见的失败原因
浏览器对 <track src="..."> 的请求走的是普通 HTTP 请求，和 CSS/JS 一样受同源策略限制，也一样会因路径错误返回 404。开发者常误以为“文件放同一目录就行”，但实际路径是相对于当前 HTML 页面 URL 的。
- 如果 HTML 地址是
https://example.com/pages/video.html，而 vtt 在/assets/subs/en.vtt，那src得写成"/assets/subs/en.vtt"（绝对路径）或"../assets/subs/en.vtt"（相对路径） - 开发时用 VS Code Live Server 或 Python
http.server能避免 file:// 协议下跨域读取失败；直接双击打开 HTML 会导致 vtt 加载被拒 - vtt 文件响应头必须包含
Content-Type: text/vtt，Nginx/Apache 需单独配置；否则 Chrome 会静默忽略（无报错，但字幕不出现）
vtt 文件格式稍有瑕疵就会完全失效
WebVTT 不是“差不多能看就行”的格式，浏览器解析极其严格：BOM 头、空行、时间戳格式、非法字符，任一出错都会让整段字幕丢弃，且控制台通常只报 “Failed to parse WebVTT” 这类模糊提示。
立即学习“前端免费学习笔记（深入）”；
- 必须以
WEBVTT开头（全大写，顶格，前后无空格），后面紧跟一个空行 - 时间戳格式为
HH:MM:SS.mmm --> HH:MM:SS.mmm，毫秒必须三位（001，不能1或01） - 禁止使用 UTF-8 BOM；推荐用 VS Code 保存为 “UTF-8”（不是 “UTF-8 with BOM”）
- 避免在文本中使用 Windows 换行符
\r\n混搭；统一用\n更稳妥
JavaScript 动态添加 track 容易漏掉 load() 调用
用 JS 创建 <track> 后插入到 <video>，不代表字幕会立刻可用。浏览器不会自动触发加载，必须显式调用 video.load() 或触发一次 video.src 变更（哪怕设成当前值）。
- 错误写法：
video.appendChild(track)→ 字幕不出现 - 正确写法：
video.appendChild(track); video.load(); - 如果视频已播放中，还需调用
track.track.mode = "showing"才能立即显示（默认是disabled） - 动态添加多个 track 时，
video.textTracks是实时更新的，但新 track 的readyState初始为0（not loaded），需监听load事件确认加载完成
