<track>：嵌入式文本轨道元素

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<track> HTML 元素作为媒体元素（<audio> 和 <video>）的子元素使用。每个 track 元素允许你指定一个有时序的文本轨道（或基于时间的数据），它可以与媒体元素并行显示，例如在视频上叠加字幕或隐藏式字幕，或与音轨一同显示。

媒体元素可以指定多个 track，包含不同类型的有时序的文本数据，或针对不同语言环境翻译的有时序的文本数据。使用的数据将是设置为默认的轨道，或根据用户偏好选择的类型和翻译。

轨道以 WebVTT 格式（.vtt 文件）格式化——Web 视频文本轨道。

试一试

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    src="/shared-assets/misc/friday.vtt" />
  Download the
  <a href="/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

属性

此元素包含全局属性。

default

此属性表示除非用户偏好指示有更合适的其他轨道，否则该轨道应启用。每个媒体元素只能在一个 track 元素上使用此属性。

kind

文本轨道的预期用途。如果省略，默认类型为 subtitles。如果属性包含无效值，它将使用 metadata。允许使用以下关键字：

subtitles（字幕）: 字幕提供对话的转录或翻译。它们适用于声音可用但无法理解的情况，例如英语电影中非英语的语音或文本。字幕可能包含额外内容，通常是额外的背景信息。例如，《星球大战》电影开头的文本，或场景的日期、时间和地点。字幕信息补充了音频和视频。它通常嵌入在视频本身中，但也可以单独提供，特别是用于整部电影的翻译。
captions（隐藏式字幕）: 隐藏式字幕提供对话、音效、相关音乐提示和其他相关音频信息的转录或翻译，例如提示的来源（例如，角色、环境）。它们适用于声音不可用或听不清楚的情况（例如，因为声音被静音、被环境噪音淹没，或因为用户是聋哑人）。
descriptions（描述）: 描述总结了媒体资源的视频部分。当视觉部分被遮挡、不可用或无法使用时（例如，用户在驾驶时与无屏幕应用程序交互，或因为用户是盲人），它们旨在以音频形式合成。
chapters（章节）: 当用户导航媒体资源时，章节标题旨在用于此目的。
metadata（元数据）: 脚本使用的轨道。用户不可见。

label

文本轨道的用户可读标题，浏览器在列出可用文本轨道时使用。

src

轨道（.vtt 文件）的地址。必须是有效的 URL。此属性必须指定，并且其 URL 值必须与文档同源——除非 track 元素的 <audio> 或 <video> 父元素具有 crossorigin 属性。

srclang

轨道文本数据的语言。它必须是有效的 BCP 47 语言标签。如果 kind 属性设置为 subtitles，则必须定义 srclang。

let textTrackElem = document.getElementById("text-track");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

以编程方式添加文本轨道

表示 <track> 元素的 JavaScript 接口是 HTMLTrackElement。与元素关联的文本轨道可以从 HTMLTrackElement.track 属性获取，其类型为 TextTrack。

TextTrack 对象也可以使用 HTMLMediaElement.addTextTrack() 方法添加到 HTMLVideoElement 或 HTMLAudioElement 元素。与媒体元素关联的 TextTrack 对象存储在 TextTrackList 中，可以使用 HTMLMediaElement.textTracks 属性检索。

示例

html

<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>

技术摘要

内容类别	None
允许内容	无；它是一个空元素。
标签省略	必须有起始标签，且不能有结束标签。
允许父级	媒体元素，`<audio>` 或 `<video>`。
隐式 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许 `role`
DOM 接口	`HTMLTrackElement`