一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

详细说明 HTML5 track 标签的 kind 属性:字幕、描述与章节区分

时间:2026-08-11 20:14:49 编辑:袖梨 来源:一聚教程网

kind 属性是 track 标签的核心标识,必须为 subtitles、captions、descriptions、chapters 或 metadata 之一;错误值将被降级为 metadata 且不可见;各值语义明确:subtitles 用于翻译字幕,captions 面向听障用户含音效描述,descriptions 供视障用户音频解析,chapters 支持时间轴导航,metadata 专供脚本读取。

HTML5 的 track 标签靠 kind 属性决定轨道的用途和行为,它不是可有可无的装饰项,而是浏览器识别“这是字幕?还是章节?能不能让用户切换?”的关键开关。写错、漏写或用非标准值,字幕就大概率不会出现在播放器菜单里。

kind 必须是五个合法值之一

浏览器只认这五种:subtitlescaptionsdescriptionschaptersmetadata。其他任何写法(比如 subtitle 少一个 s、zhtext 或空值)都会被当作 metadata 处理——即不显示在用户界面中,也无法被手动启用。

  1. subtitles:面向外语观众的翻译字幕,含对话+关键音效说明(如“[门铃响]”),支持 srclang 和用户切换
  2. captions:专为听障设计,必须包含说话人、语气、环境声等完整音轨信息,播放器常单独归类显示
  3. descriptions:供视障用户收听的音频描述轨道,不显示文字,需配合屏幕阅读器使用
  4. chapters:提供时间轴章节导航,播放器进度条下方通常显示章节标题,支持跳转
  5. metadata:纯数据轨道,供 JavaScript 读取(如关键词、场景标记),完全不渲染

subtitles 和 captions 别混用

两者都显示文字,但语义和用途不同。如果只是把中文视频配上英文字幕,用 kind="subtitles";如果要为听障用户补充“[紧张的弦乐渐强]”“[女声,语速较快]”,就得用 kind="captions"。浏览器 UI 通常把它们分开展示,且 srclangcaptions 同样强制有效。

chapters 要配对时间戳与标题

kind="chapters" 的 VTT 文件格式和其他不同:每段必须以时间戳开头,后跟章节标题,不能有普通字幕的编号或空行。例如:

00:00:00.000 --> 00:02:15.000

开场介绍

00:02:15.000 --> 00:05:40.000

核心原理

播放器据此生成章节菜单,用户点击即可跳转。它不依赖 srclang,也不需要 label ——标题直接来自 VTT 内容。

metadata 是脚本专用通道

这类轨道不面向用户,常见于分析或交互场景。例如在 VTT 中写:

WEBVTT

00:01:20.000 --> 00:01:22.000

{"scene":"product_demo","tag":"highlight"}

JavaScript 可监听 cuechange 事件,提取 JSON 数据触发弹窗、埋点或动画。它不需要 srclang,也不能加 default

热门栏目