<track>: The Embed Text Track element

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

default

该属性指示应启用该轨道，除非用户的首选项表明另一个轨道更合适。这只能用于每个媒体元素的一个 track 元素。

kind

文本轨道的用途。如果省略，默认类型为 subtitles。如果该属性包含无效值，它将使用 metadata（52 之前的 Chrome 版本将无效值视为 subtitles）。允许使用以下关键字：

• subtitles
  • 字幕提供观众无法理解的内容的翻译。例如，英语电影中非英语的语音或文本。
  • 字幕可能包含附加内容，通常是额外的背景信息。例如，星球大战电影开头的文本，或场景的日期、时间和地点。
• captions
  • 隐藏式字幕提供转录，也可能提供音频翻译。
  • 它可能包括重要的非语言信息，例如音乐提示或声音效果。它可以指示提示的来源（例如音乐、文本、角色）。
  • 适合耳聋或静音时的用户。
• descriptions
  • 视频内容的文字描述。
  • 适合盲人或看不到视频的用户。
• chapters
  • 章节标题旨在当用户导航媒体资源时使用。
• metadata
  • 脚本使用的轨道。对用户不可见。

label

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

src

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

srclang

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

¥Usage notes

¥Track data types

track 添加到媒体的数据类型在 kind 属性中设置，该属性可以取值 subtitles、captions、descriptions、chapters 或 metadata。该元素指向包含定时文本的源文件，当用户请求其他数据时浏览器会公开该文本。

¥The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.

一个媒体元素不能有多个具有相同 kind、srclang 和 label 的 track。

¥A media element cannot have more than one track with the same kind, srclang, and label.

¥Detecting cue changes

每次当前呈现的提示发生更改时，由 track 属性指示的基础 TextTrack 都会收到 cuechange 事件。即使轨道未与媒体元素关联，也会发生这种情况。

¥The underlying TextTrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.

如果轨道与媒体元素关联，则使用 <track> 元素作为 <audio> 或 <video> 元素的子元素，cuechange 事件也会发送到 HTMLTrackElement。

¥If the track is associated with a media element, using the <track> element as a child of the <audio> or <video> element, the cuechange event is also sent to the HTMLTrackElement.

let textTrackElem = document.getElementById("texttrack");

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

¥Examples

<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="descriptions" src="sampleDescriptions.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>

¥Technical summary

¥See also

• WebVTT 文本轨道格式
• HTMLMediaElement.textTracks