HTMLMediaElement:textTracks 属性

textTracks 属性是在 HTMLMediaElement 对象上的只读属性,它返回一个 TextTrackList 对象,该对象列出了表示媒体元素文本轨道的 TextTrack 对象,顺序与文本轨道列表中的顺序相同。

可以使用 addtrackremovetrack 事件检测何时向 <audio><video> 元素添加和删除轨道。但是,这些事件不会直接发送到媒体元素本身。相反,它们会发送到与添加到元素的轨道类型相对应的 HTMLMediaElement 的轨道列表对象。

返回的列表是动态的;也就是说,随着轨道被添加到媒体元素中或从其中删除,列表的内容会动态更改。获得对列表的引用后,可以监视它以检测更改,以便在添加新的文本轨道或删除现有的文本轨道时进行检测。

参见 TextTrackList 事件,以了解有关监视媒体元素轨道列表更改的更多信息。

一个 TextTrackList 对象,表示包含在媒体元素中的文本轨道列表。可以使用 textTracks[n] 访问轨道列表,以获取对象轨道列表中的第 n 个文本轨道,或者使用 textTracks.getTrackById() 方法。

每个轨道都由一个 TextTrack 对象表示,该对象提供有关轨道的相关信息。

示例

我们从一个包含多个 <track> 子节点的 <video> 元素开始

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="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" />
</video>

HTMLMediaElement.textTracks 返回一个 textTracksList,我们可以通过它进行迭代。这里我们将每个英文轨道的属性都打印到控制台。

js
const tracks = document.querySelector("video").textTracks;

for (const track of tracks) {
  if (track.language === "en") {
    console.dir(track);
  }
}

规范

规范
HTML 标准
# dom-media-texttracks-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见