track标签kind属性详解及用途

HTML 中 `` 标签的 `kind` 属性是控制媒体轨道行为的核心开关，但仅有 `"subtitles"`、`"captions"`、`"descriptions"`、`"chapters"` 和 `"metadata"` 这五个严格区分、不可互换的合法值——拼写错误、多余空格或自定义值（如 `"subtitle"` 或 `"lyrics"`）都会被浏览器直接忽略或降级为 `"metadata"`；更关键的是，`subtitles` 与 `captions` 并非同义词：前者仅转录对话供语言理解者使用，后者则包含环境音描述、专为听障用户设计且在 Chrome/Safari 中享有系统级字幕支持；而 `chapters` 轨道必须精准设置才能激活播放器导航功能，`descriptions` 依赖屏幕阅读器而非视觉呈现，`metadata` 则是纯 JS 可读的数据管道；所有这些功能能否生效，还严苛依赖于 HTML 结构嵌套、响应头 `Content-Type: text/vtt`、VTT 文件格式规范以及必要属性（如 `default`、`srclang`、`label`）的完整配置——一个看似微小的疏漏，就足以让精心准备的轨道彻底失效。

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 值拼写完全正确，如果 标签没在 或 内部、或者没加 default 属性（对 subtitles/captions）、或者 VTT 响应头没设 Content-Type: text/vtt，浏览器照样不会激活这条轨道。

本篇关于《track标签kind属性详解及用途》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！