<track>:嵌入文本轨道元素

基线 广泛可用

此功能已得到很好的确立,并且可以在许多设备和浏览器版本上运行。它已在浏览器中可用,自 2015年7月.

<track> HTML 元素用作媒体元素 <audio><video> 的子元素。每个轨道元素允许您指定一个定时文本轨道(或基于时间的的数据),该轨道可以与媒体元素并行显示,例如,在视频上叠加字幕或隐藏式字幕,或与音频轨道一起显示。

可以为媒体元素指定多个轨道,其中包含不同类型的定时文本数据,或已针对不同语言环境翻译的定时文本数据。使用的数据将是已设置为默认值的轨道,或基于用户首选项的类型和翻译。

轨道采用 WebVTT 格式.vtt 文件)— Web 视频文本轨道。

试一试

属性

此元素包含全局属性

默认

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

kind

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

  • subtitles
    • 字幕提供对观看者无法理解的内容的翻译。例如,英语电影中非英语的语音或文本。
    • 字幕可能包含其他内容,通常是额外的背景信息。例如,《星球大战》电影开头的文字,或场景的日期、时间和地点。
  • captions
    • 隐藏式字幕提供音频的转录和可能的翻译。
    • 它可能包含重要的非语言信息,例如音乐提示或音效。它可能指示提示的来源(例如,音乐、文本、角色)。
    • 适用于聋哑用户或声音静音时。
  • chapters
    • 当用户浏览媒体资源时,章节标题用于导航。
  • metadata
    • 脚本使用的轨道。用户不可见。
label

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

src

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

srclang

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

用法说明

轨道数据类型

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

媒体元素不能具有多个具有相同kindsrclanglabeltrack

检测提示更改

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

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

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

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

以编程方式添加文本轨道

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

TextTrack对象也可以使用HTMLMediaElement.addTextTrack()方法添加到HTMLVideoElementHTMLAudioElement元素。与媒体元素关联的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>

技术摘要

内容类别
允许的内容 无;它是一个空元素
标签省略 必须有起始标签,并且不能有结束标签。
允许的父元素

媒体元素,<audio><video>

隐式ARIA角色 没有相应的角色
允许的ARIA角色 不允许role
DOM接口 HTMLTrackElement

规范

规范
HTML标准
# the-track-element

浏览器兼容性

BCD表格仅在浏览器中加载

另请参阅