HTML中track多语言字幕 与 HTML中track标签kind属性取值

track标签的kind属性有5个合法值：“subtitles”“captions”“descriptions”“chapters”“metadata”；其他值被忽略或降为“metadata”，各值语义、渲染行为及兼容性要求均不同。

track标签的kind属性有哪些合法值

kind 属性决定字幕轨道的语义类型，浏览器据此决定是否默认显示、如何渲染、是否出现在字幕菜单中。它不是随便填的字符串，必须是规范定义的枚举值。

W3C 规范明确允许以下 5 个值（大小写敏感，必须全小写）：

• subtitles：为听障或非母语用户提供的翻译/转录字幕，**最常用**
• captions：为听障用户设计的字幕，包含说话人、音效、音乐等非语音信息
• descriptions：音频描述，供视障用户收听的视频内容口头解说（通常配合屏幕阅读器）
• chapters：章节标记，用于生成播放器时间轴导航（src 指向 WebVTT 章节文件）
• metadata：纯数据轨道，不显示，供脚本读取（如关键词、场景ID等）

填其他值（比如 subtitle、zh-CN、transcript）会导致该 track 被浏览器忽略——不会报错，但也不会出现在字幕开关菜单里。

subtitles 和 captions 在实际使用中怎么选

多数多语言字幕场景应无条件用 subtitles。它的行为最符合“切换语言”的预期：用户打开字幕后，能从下拉菜单里看到「English」、「中文」、「Español」等选项并自由切换。

立即学习“前端免费学习笔记（深入）”；

captions 的定位不同：它默认面向听障人群，部分浏览器（如 Chrome）在系统开启「高对比度模式」或「辅助功能设置」时才默认启用；且播放器 UI 通常将其与 subtitles 分开归类（例如 YouTube 字幕菜单里，“CC” 图标专指 captions）。除非你明确提供含音效描述的完整无障碍字幕，否则别用它。

常见误用：
– 把中文字幕设为 kind="captions"，结果用户找不到开关
– 同一视频混用 subtitles 和 captions 轨道，导致菜单混乱、逻辑断裂

多语言字幕必须配srclang和label

仅靠 kind="subtitles" 不足以支持多语言切换。浏览器需要两个额外属性才能正确分组和标识：

• srclang：必须是有效的 BCP 47 语言标签（如 zh、zh-Hans、en-US），不能写 Chinese 或 english
• label：用户看到的菜单文字，建议用目标语言自述（如 label="中文"、label="English"），避免用 label="Chinese" 显示给中文用户

缺少 srclang 的轨道会被浏览器视为“未知语言”，可能被过滤或降级处理；label 缺失时，部分浏览器会 fallback 到 srclang 值，但显示效果不可控（比如显示 zh-Hant 而非「繁體中文」）。

WebVTT 文件本身不决定 kind，由 track 标签控制

同一个 .vtt 文件可以被多个 track 元素引用，分别设不同 kind、srclang、label。文件内容里没有 kind 定义，也不应写语言声明（如 LANGUAGE zh 是无效语法，WebVTT 不支持）。

容易踩的坑：

• 以为在 .vtt 文件头加注释（NOTE Chinese subtitles）能影响 kind —— 实际无效
• 复用英文 captions.vtt 文件，只改 track 的 srclang="zh" 就当成了中文字幕 —— 内容没变，只是标签错了
• 用 kind="subtitles" 引用一个含音效描述的 .vtt，结果普通用户看到「[音乐起]」这种信息，体验突兀

真正起作用的只有 HTML 中 track 元素的属性组合，文件内容只管呈现什么文字。