必须将track标签嵌在video内且紧接source后，同时满足VTT文件合规、必需属性（kind/srclang/label/src）齐全、服务端返回text/vtt MIME类型三个硬性条件，缺一不可。
video 标签里怎么加 <track> 才能显示字幕
直接往 <video> 里塞 <track> 标签就行，但必须满足三个硬性条件：文件是 WebVTT 格式、kind="subtitles"、srclang 和 label 都得写全。漏一个，浏览器就当它不存在。
常见错误是把 SRT 文件直接当 WebVTT 用——浏览器不认，控制台会报 Failed to load resource: net::ERR_ABORTED 或静默失败；还有人写 kind="captions" 却没开辅助功能设置，字幕菜单里根本看不到。
-
<track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default>——default只能有一个，且仅对首次播放生效 -
src路径必须可跨域访问（本地 file:// 协议下多数浏览器直接禁掉<track>加载） - WebVTT 文件开头必须有
WEBVTT声明行，空行后才能写字幕块，否则解析失败
WebVTT 文件格式写错会导致字幕完全不显示
不是“写对时间轴”就够的。WebVTT 对语法极其敏感：时间戳必须用 00:01:23.456 格式（毫秒三位），不能用 SRT 的 00:01:23,456；文本块之间必须空一行；注释行以 NOTE 开头且前后空行；任何 UTF-8 BOM 或多余空格都可能让整个 track 失效。
最稳妥的做法是用在线工具（如 subtitletools.com）转格式，别手动改后缀名。
立即学习“前端免费学习笔记（深入）”；
WEBVTT 00:00:01.000 --> 00:00:04.000 你好，这是第一句中文。 00:00:05.000 --> 00:00:08.000 字幕必须严格按这个格式。
用户切换字幕语言时，track.mode 怎么控制
HTML 原生字幕菜单靠浏览器实现，没法用 CSS 定制样式，但可以通过 JS 主动控制开关。关键不是操作 DOM，而是读写 track.mode 属性：
-
track.mode = "disabled"—— 关闭该轨道（即使它是default） -
track.mode = "hidden"—— 字幕不显示，但仍在后台解析（用于搜索或导出） -
track.mode = "showing"—— 显示该轨道，其他同 kind 的轨道自动切为disabled
注意：video.textTracks 是实时集合，每次取值都要重新遍历；不同浏览器对 mode 切换的响应速度不同，iOS Safari 有约 200ms 延迟。
移动端 Safari 不显示字幕菜单怎么办
iOS Safari 默认隐藏原生字幕菜单，除非视频有 playsinline + webkit-playsinline，且用户在系统「辅助功能 → 音频描述」里打开了「首选音频描述」——这跟字幕无关，但 Safari 把它当开关。更实际的解法是自己做 UI 控制器：
- 用
video.textTracks遍历所有kind === "subtitles"的 track - 监听
textTracks.onchange，而不是video.onloadedmetadata - 切换时先设所有 track.mode = "disabled"，再设目标 track.mode = "showing"
别依赖 video.addTextTrack() 动态加载——Safari 对运行时添加的 track 支持极差，尤其带 CORS 的远程 VTT。
text/vtt，再看 Console 有没有 DOMException: Failed to load track —— 其他都是后话。 
