kind="subtitles"必须显式声明且严格符合规范,因浏览器仅识别5个大小写敏感的kind值,拼写错误或留空会导致轨道被降级为metadata而不可见;srclang须为合法BCP 47语言码,缺失或非法则Safari不激活字幕;label应使用自然语言命名以保障可访问性。

浏览器对 kind="subtitles" 的处理不是“加字幕”那么简单,它直接决定字幕是否出现在播放器 UI、能否被用户切换、是否触发辅助技术联动——填错或漏掉关键约束,字幕就等于不存在。
为什么 kind="subtitles" 必须显式声明且不能写错
浏览器只认规范定义的 5 个 kind 值:"subtitles"、"captions"、"descriptions"、"chapters"、"metadata"。大小写敏感,拼写错误(比如 "subtitle"、"Subtitles")会导致轨道被降级为 "metadata",即:不显示、不进菜单、JS 读得到但 UI 完全无视。
常见误用:
-
kind留空或设为"text"→ Safari 和 Chrome 都静默丢弃 - 混用
kind="subtitles"和kind="captions"轨道 → YouTube 类播放器会把它们分开展示,“CC” 图标和语言列表互不干扰,用户找不到中文选项 - 想让字幕默认启用却只写
default不写kind="subtitles"→ Firefox 可能加载但不激活,Safari 直接跳过解析
srclang 是 Safari 字幕生效的硬门槛
iOS 15+ 和 macOS Safari 强制要求 kind="subtitles" 的 <track> 必须带合法 srclang,否则连时间轴同步逻辑都不会触发——DOM 里能看到节点,video.textTracks.length 有值,但 mode 永远是 "disabled",控制台也不报错。
合法值必须是 BCP 47 标准语言码:
- 正确:
srclang="zh"、srclang="zh-Hans"、srclang="en-US" - 错误:
srclang="Chinese"、srclang="zh_CN"、srclang="ch"、含空格或括号如srclang="中文" - 注意:
srclang和系统语言无关,但缺失就一定失效
label 决定用户能不能在菜单里找到你的字幕
label 是播放器字幕下拉菜单中实际显示的文本。不写 label,多数浏览器只显示“字幕”二字,用户无法区分中/英/日;写得模糊(如 label="CN"),视障用户配合屏幕阅读器时也难以理解。
实操建议:
- 用自然语言命名:
label="中文(简体)"、label="English (US)" - 避免缩写或代码:
label="zh"或label="CHN"对用户无意义 -
label不影响技术行为,但它是辅助功能链路的最后一环——再准的srclang和kind,用户点不到就等于没做
多语言字幕切换失败的真实原因往往不在 JS 里
很多开发者花半天调试 textTracks 切换逻辑,最后发现根本问题是:Safari 没把某条轨道识别为有效字幕。只要 srclang 缺失或非法,textTracks[n].mode 就卡在 "disabled",后续所有 oncuechange、addCue 都不会触发。
排查顺序应是:
- 检查
<track>是否在<video>内部、紧挨<source>后 - 确认
kind="subtitles"拼写全小写、无空格 - 验证
srclang是合法 BCP 47 值,且不是动态 JS 设置的(Safari 只读初始 DOM 属性) - 看
video.textTracks[n].language是否有值——为空说明srclang未通过校验
真正容易被忽略的是:VTT 文件本身没问题,服务器返回了 200,控制台也没报错,但 Safari 就是不渲染——这时候该回头重看 srclang 和 kind 的拼写,而不是调时间轴或样式。

















