<track>: The Embed Text Track element

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

default

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

kind

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

• subtitles
  • 字幕提供观众无法理解的内容的翻译。例如，英语电影中非英语的语音或文本。
  • 字幕可能包含附加内容，通常是额外的背景信息。例如，星球大战电影开头的文本，或场景的日期、时间和地点。
• captions
  • 隐藏式字幕提供转录，也可能提供音频翻译。
  • 它可能包括重要的非语言信息，例如音乐提示或声音效果。它可以指示提示的来源（例如音乐、文本、角色）。
  • 适合耳聋或静音时的用户。
• 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、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, 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;
});

¥Adding text tracks programmatically

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

¥The JavaScript interface that represents the <track> element is HTMLTrackElement. The text track associated with an element can be obtained from the HTMLTrackElement.track property, and is of type TextTrack.

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

¥TextTrack objects also can be added to a HTMLVideoElement or HTMLAudioElement elements using the HTMLMediaElement.addTrack() method. The TextTrack objects associated with a media element stored in a TextTrackList, which can be retrieved using the HTMLMediaElement.textTracks property.

¥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="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