标签必须嵌套在内且位于之后、之前，kind="subtitles"和utf-8无bom编码的vtt文件为必要条件，否则字幕无法加载或显示。
track 标签必须放在 video 内部且紧邻 source
直接把 <track></track> 写在 <video></video> 外面，或者插在 <source></source> 后面但没加 kind="subtitles"，字幕根本不会加载。浏览器只认嵌套在 <video></video> 开始标签和结束标签之间的 <track></track>，而且顺序要对：通常放 <source></source> 之后、<video></video> 结束前。
正确结构示例：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="English" srclang="en" src="en.vtt" default><track kind="subtitles" label="中文" srclang="zh" src="zh.vtt"></track></track></source></video>
-
kind="subtitles"是必须的，别写成captions（那是为听障设计的，含音效描述） -
srclang必须是合法的 BCP 47 语言标签，zh可以，cn或chinese不行 -
default最多只能有一个，否则行为未定义；没加的话默认不启用
VTT 文件格式稍错就完全不显示字幕
浏览器对 WebVTT 文件极其敏感：第一行必须是 WEBVTT（大小写敏感，不能带空格或 BOM），时间戳格式必须严格匹配 HH:MM:SS.mmm --> HH:MM:SS.mmm，中间两个空格，不能用 Tab 或全角字符。
常见失效原因：
- 用记事本保存 VTT 文件 → 默认 ANSI 编码，导致中文乱码 → 必须用 UTF-8（无 BOM）保存
- 时间戳里用了逗号代替小数点，比如
00:01:23,456→ 应该是00:01:23.456 - 文本行前面有多余空格或空行 → VTT 解析器会跳过整段
- 中文标点混入（如“”、。）本身没问题，但若文件编码不对，就会变成
中英文切换依赖浏览器原生控件，无法用 JS 直接控制显示/隐藏
HTML5 规范没暴露 <track></track> 的显隐开关 API。你调用 track.mode = "showing" 只在部分 Chromium 内核生效，Safari 和 Firefox 常忽略；用户手动在右键菜单里切语言，才是可靠路径。
- 想默认启用中文？给对应
<track></track>加default属性，但注意：如果用户系统语言是 en-US，有些浏览器仍优先选 English track - 不要试图用
video.textTracks[0].mode = "hidden"统一关掉所有字幕——它不可靠，且可能被用户操作覆盖 - 真要动态控制，得靠自定义播放器 + canvas 渲染字幕，那就彻底绕开
<track></track>了
移动端 Safari 对多语言 track 支持有限
iOS 15+ 才开始支持在控制栏里显示多语言选项，旧版本（尤其是 iOS 14）即使写了两个 <track></track>，也只显示第一个或干脆不显示切换入口。用户只能靠「AA」按钮呼出字幕菜单，且菜单项可能不显示 label 文字，只写 “Subtitles”。
- 测试时务必用真机，模拟器常表现异常
- Android Chrome 一般没问题，但部分国产浏览器（如 QQ 浏览器）会忽略
srclang，只认第一个<track></track> - 如果发现 iOS 上始终不显示中文选项，先检查 VTT 文件是否 UTF-8 无 BOM，再确认
srclang="zh"拼写正确
<track></track> 的位置。这两个点对了，剩下就是浏览器兼容性兜底的事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
