track元素kind属性仅有5个合法值:“subtitles”“captions”“descriptions”“chapters”“metadata”;其他值被忽略或降为“metadata”;各值用途、渲染行为及兼容性要求均不同,且需满足HTML结构、属性和响应头等前提条件才能生效。

track 元素的 kind 属性只有 5 个合法值:"subtitles"、"captions"、"descriptions"、"chapters"、"metadata"。浏览器只认这五个字符串,其他任何值(比如 "subtitle"、"lyrics"、"transcript")都会被忽略或降级为 "metadata"。
subtitles 和 captions 到底怎么选
这是最常混淆的一对:
-
"subtitles"是给听懂语言但听不清的人准备的——只翻译/转录对话,不描述声音; -
"captions"是给听障人士准备的——包含对话 + 环境音(如[音乐渐强]、[电话铃声]),且通常带时间轴同步样式; - Chrome 和 Safari 对
kind="captions"更敏感:默认启用字幕按钮、支持系统级字幕设置联动; - Firefox 会把两者都显示在“字幕”菜单下,但
textTracks列表里kind值仍保持区分,影响 JS 逻辑判断。
chapters 轨道必须用 kind="chapters"
章节轨道不是用来显示文字的,而是供播放器生成导航栏(如进度条下方的章节标记)。关键点:
- 必须设
kind="chapters",否则video.textTracks不会将其归类为可导航章节; - 必须配合
srclang和label(虽然非强制,但没label播放器可能不显示章节名); - VTT 文件内容需是标准章节格式(
00:00:00.000 --> 00:01:23.456后跟纯文本标题),不能混入对话行; - 若误设为
kind="subtitles",章节信息会被当成普通字幕加载,但无法触发章节跳转行为。
descriptions 和 metadata 的实际用途差异
这两类轨道都不直接渲染在画面上,但用途和兼容性差别很大:
-
"descriptions"是为屏幕阅读器服务的——提供视频画面描述(如“一位穿红裙的女性走向玻璃门”),需要TextTrack.mode = "hidden"配合 ARIA 使用; -
"metadata"是纯数据容器,JS 可读取其 cue 内容做自定义逻辑(如广告触发点、知识点锚点),但所有主流浏览器都不在 UI 中暴露它; - 注意:
kind="metadata"的 track 必须有src,且 VTT 文件需以WEBVTT开头,cue 时间戳可全为00:00:00.000 --> 00:00:00.001,内容任意; - 不要指望
kind="descriptions"在 Chrome 移动端生效——目前仅桌面端部分读屏软件识别。
真正容易被忽略的是:哪怕 kind 值拼写完全正确,如果 <track> 标签没在 <video> 或 <audio> 内部、或者没加 default 属性(对 subtitles/captions)、或者 VTT 响应头没设 Content-Type: text/vtt,浏览器照样不会激活这条轨道。

















