track标签仅声明外部字幕轨道，不直接设置字幕；WebVTT文件需满足首行WEBVTT、时间戳毫秒三位、UTF-8无BOM三条件，且track必须为video直接子元素并完整配置kind、srclang、label、src四属性，缺一即静默失效。
track 标签本身不“设置字幕”，它只是声明一个外部字幕轨道；真正起作用的是 WebVTT 文件内容 + 浏览器对 track 属性的严格解析逻辑。只要任一环节出错，字幕菜单里就完全看不到选项。
WebVTT 文件必须满足三个硬性条件
浏览器对 .vtt 文件极其挑剔，不是“差不多就行”，而是“错一处就静默失败”：
- 首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT（写成webvtt、WebVTT或前面带空格，都会不显示） - 时间格式必须为
00:01:23.456 --> 00:01:26.789：毫秒固定三位，-->两侧各一个空格，不能少也不能多 - 文件编码必须是 UTF-8 无 BOM（Windows 记事本默认带 BOM，务必用 VS Code 或 Notepad++ 选 “UTF-8” 而非 “UTF-8 with BOM”）
track 元素缺一不可的四个属性
浏览器只认显式声明，不推断、不容错：
-
kind="subtitles"：必须写全，不能省略，不能写成caption或末尾带空格的subtitles -
srclang：必须用标准 BCP 47 码，如zh、en-US、ja；写chinese或zh-CN（虽合法但部分旧浏览器可能不识别）都可能失效 -
label：用户在右键字幕菜单里看到的名字，建议含括号说明变体，如中文(简体)；纯空格或空字符串会导致该轨道被忽略 -
src：路径必须可访问；若跨域，服务端需返回Access-Control-Allow-Origin: *，否则控制台报 CORS 错误且轨道不加载
JavaScript 切换字幕时别碰 src 和 hidden
手动切换语言时，常见错误是试图改 track.src 或设 track.hidden = false——这两者都不控制渲染：
- 正确做法是操作
textTracks[i].mode：设为目标轨道为"showing"，其余为"disabled" - 切换前应检查
track.readyState === 2（即LOADED），否则未加载完成就启用会无效 -
default属性只影响页面首次加载，用户手动切换后即以用户选择为准，刷新不会重置 - 浏览器（如 Chrome）会根据
navigator.language自动匹配srclang并启用对应轨道，但前提是该轨道已加载且未被禁用
最容易被忽略的坑：HTML 结构和加载顺序
track 必须是 video 的**直接子元素**，且必须放在所有 source 标签之后、video 闭合标签之前：
立即学习“前端免费学习笔记（深入）”；
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" src="zh.vtt" srclang="zh" label="中文(简体)" default> <track kind="subtitles" src="en.vtt" srclang="en" label="English"> </video>
如果 track 被包在 div 里，或写在 source 前面，或放在 video 外，浏览器直接忽略——连错误提示都不会抛。
