必须显式写kind="subtitles"，且每个语言轨道都要配全srclang、label、src，否则浏览器根本不会把它当字幕处理——菜单里不显示，JS也查不到；<track>必须嵌套在<video>内、紧接所有<source>之后，位置错误则video.textTracks.length恒为0；kind值大小写敏感且仅限标准字符串，srclang须为BCP 47码如"zh-Hans"，WebVTT首行须为顶格全大写WEBVTT并紧跟空行，时间戳格式为HH:MM:SS.mmm --> HH:MM:SS.mmm，文件编码为UTF-8无BOM，服务端须返回Content-Type: text/vtt。
必须显式写 kind="subtitles"，且每个语言轨道都要配全 srclang、label、src，否则浏览器根本不会把它当字幕处理——菜单里不显示，JS 也查不到。
video 里 <track> 的位置和顺序不能错
浏览器只认嵌套在 <video> 内、紧接所有 <source> 之后的 <track>。放错位置等于没写，控制台不报错，但 video.textTracks.length 永远是 0。
-
<video><source src="a.mp4"><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt"></video>✅ 正确 -
<video><track><source></video>❌<track>在<source>前，被忽略 -
<div><track></div>❌ 不在<video>内，完全无效 - 动态用 JS
appendChild()插入<track>❌ 浏览器已解析完 DOM，不重新注册轨道
kind="subtitles" 的拼写和取值必须严格
写成 kind="subtitle"、kind="captions" 或留空，浏览器都当它不存在。不是容错项，是硬性准入门槛。
- 合法值只有
"subtitles"、"captions"、"descriptions"等标准字符串，大小写敏感 -
"subtitles"表示翻译性字幕（对话为主），适合外语视频；"captions"含声音提示（如 [门响]），面向听障用户，UI 上常单独归类 - 移动端 Safari 对
kind最苛刻：哪怕值正确，若没配label或srclang，也会静默丢弃整个节点 -
srclang必须是 BCP 47 标准码，"zh"、"zh-Hans"、"en-US"可行；"ch"、"cn"、"chinese"全部无效
WebVTT 文件本身必须合规，否则整个轨道加载失败
不是“文件名带 .vtt”就行。src 指向的文件一旦格式出错，浏览器会静默丢弃该轨道——不报错、不提示，字幕就是不出现。
立即学习“前端免费学习笔记（深入）”；
- 首行必须是全大写
WEBVTT，后面紧跟一个空行 - 时间戳用点号分隔毫秒：
00:01:23.450 --> 00:01:25.780，不能用逗号（SRT 格式） - 文本块之间必须空一行，不能有多余空格或 BOM 字节
- 服务端必须返回
Content-Type: text/vtt，Nginx/Apache 需手动配置 MIME 类型 - 本地开发别用
file://协议打开 HTML——所有.vtt加载都会被禁掉，必须起本地服务（如python3 -m http.server）
JS 切换字幕时要注意 readyState 和 mode 设置时机
直接对 track.mode = "showing" 赋值大概率无效，因为 VTT 文件还没加载完。必须等轨道就绪后再操作。
- 检查
track.readyState === 2（表示已加载完成），再设mode - 切换逻辑建议按
srclang匹配，而不是下标索引：if (track.srclang === "zh") track.mode = "showing"; else track.mode = "disabled"; - Safari 默认不启用任何轨道，即使写了
default属性；必须靠 JS 显式设置mode - 移动端 iOS Safari 原生字幕控件默认隐藏，得自己渲染选择器并绑定点击事件
真正卡住人的地方不在语法，而在那些浏览器不报错却让功能彻底失效的细节：比如 srclang="zh" 写成 "ZH"，或者 WebVTT 文件开头多了一个 UTF-8 BOM，又或者把 <track> 放在了 <source> 前面——这些都不会抛异常，但字幕就是不出来。
