标签是浏览器原生支持字幕加载、同步与语言切换的唯一标准通道，需置于内且紧随之后；kind="subtitles"必须显式声明，srclang须为合法bcp 47码，.vtt文件首行必须为webvtt且无bom，路径需同源或配cors，track.mode仅接受"disabled"、"hidden"、"showing"三值。
track 标签不是用来“加字幕”的快捷方式，而是浏览器原生支持字幕加载、同步与语言切换的唯一标准通道。它本身不渲染文字，只声明轨道；真正起作用的是 WebVTT 文件 + 浏览器内置解析器 + textTracks API 的组合。
为什么track必须放在video内部且紧挨source之后
浏览器解析 video 时按顺序处理子元素：source 告诉它“播什么”，track 告诉它“配什么字幕”。如果 track 被写在 video 外面、或插在 source 前面、或被包进 div，浏览器会直接忽略——DOM 里能看到节点，但 video.textTracks.length 永远是 0。
常见错误现象：
- 右键视频 → “字幕”菜单为空
-
console.log(video.textTracks)返回空列表 - HTML 里写了
default，但页面加载后字幕没显示
正确结构示例：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default><track kind="subtitles" srclang="en" label="English" src="en.vtt"></track></track></source></video>
kind="subtitles" 为什么不能写成 "caption" 或留空
浏览器对 kind 值有硬性识别逻辑：kind="subtitles" 才进入右键菜单和语言切换流程；kind="captions" 主要面向听障用户（含音效描述），部分浏览器不将其纳入语言列表；kind="descriptions" 或空值则完全不触发字幕 UI。
实操要点：
- 必须显式写
kind="subtitles"，不能依赖任何“默认行为” -
srclang必须是合法 BCP 47 码（如zh、zh-Hans、en-US），写chinese或cn会导致切换失败 -
label是用户实际看到的名称，建议用自然语言（如label="中文（简体）"），否则菜单里只显示“字幕”二字
VTT 文件格式错一位，整个轨道就静默失效
WebVTT 解析器极其严格：第一行必须是 WEBVTT（全大写、顶格、无空格、无 BOM），时间戳必须是 00:00:01.234 --> 00:00:04.567 格式（毫秒三位、中间两个空格）。哪怕只是少一个 0（比如写成 .23）、或多一个空行、或文件用了 UTF-8 with BOM，Chrome 就会把该 track.mode 设为 "disabled"，控制台还不报错。
检查要点：
- 用 VS Code 或 Sublime Text 保存 VTT 时，选 “UTF-8” 而非 “UTF-8 with BOM”
- 用
cat -v zh.vtt | head -n 3确认首行确实是WEBVTT - 时间轴不能用 SRT 格式（序号行+空行分隔），也不能用 HH:MM:SS,mmm（逗号错位）
- 路径需同源或配置 CORS；HTTPS 页面加载 HTTP 的 VTT 会被静默拦截
用 JS 切换字幕时，mode 只能设三个值
track.mode 不是布尔值，也不是字符串任意值。只有 "disabled"、"hidden"、"showing" 合法。设成 true、"on"、"visible" 都无效，且不会报错。
关键逻辑：
- 一次只能有一个
track.mode === "showing"；其余必须设为"disabled"（不是"hidden"），否则 Safari 可能只渲染第一个 -
"hidden"表示已加载但不显示，仍占用内存；"disabled"彻底不加载内容，更省资源 - 切换前务必等
video的loadedmetadata或canplay事件，否则textTracks可能尚未就绪 - 监听用户切换要用
video.textTracks.onchange，不是ontimeupdate或onload
移动端尤其要注意：iOS Safari 默认隐藏字幕控件，且常忽略 default；旧版 Android WebView 可能根本不生成 textTracks 列表。真机测试比模拟器可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
