HTMLMediaElement: textTracks 属性
HTMLMediaElement 对象上只读的 textTracks 属性返回一个 TextTrackList 对象,该对象列出了代表媒体元素的文本轨道的所有 TextTrack 对象,其顺序与文本轨道列表中的顺序相同。
您可以使用 addtrack 和 removetrack 事件来检测轨道何时被添加到 <audio> 或 <video> 元素以及何时被从中移除。但是,这些事件不会直接发送到媒体元素本身。相反,它们会发送到与添加到元素中的轨道类型相对应的 HTMLMediaElement 的轨道列表对象。
返回的列表是实时的;也就是说,当轨道被添加到媒体元素或从中移除时,列表的内容会动态更改。一旦您有了列表的引用,您就可以监视它以检测何时添加了新的文本轨道或移除了现有的轨道。
有关监视媒体元素的轨道列表更改的更多信息,请参阅 TextTrackList 事件。
值
一个代表媒体元素中包含的文本轨道列表的 TextTrackList 对象。可以使用 textTracks[n] 从对象的文本轨道列表中获取第 n 个文本轨道,或者使用 textTracks.getTrackById() 方法来访问轨道列表。
每个轨道都由一个 TextTrack 对象表示,该对象提供有关轨道的信息。
示例
我们从一个具有多个 <track> 子元素的 <video> 开始。
html
<video controls>
<source src="/shared-assets/videos/sintel-short.webm" type="video/webm" />
<source src="/shared-assets/videos/sintel-short.mp4" type="video/mp4" />
<track
kind="subtitles"
src="/shared-assets/misc/sintel-en.vtt"
srclang="en"
label="English" />
<track
kind="subtitles"
src="/shared-assets/misc/sintel-de.vtt"
srclang="de"
label="Deutsch" />
<track
kind="subtitles"
src="/shared-assets/misc/sintel-es.vtt"
srclang="es"
label="Español" />
</video>
HTMLMediaElement.textTracks 返回一个 TextTrackList,我们可以通过它进行迭代。在这里,我们将所有三个轨道设置为同时显示。
js
const tracks = document.querySelector("video").textTracks;
for (const track of tracks) {
track.mode = "showing";
}
规范
| 规范 |
|---|
| HTML # dom-media-texttracks-dev |
浏览器兼容性
加载中…
另见
HTMLMediaElement:定义HTMLMediaElement.textTracks属性的接口<audio>,<video>AudioTrack,AudioTrackListVideoTrack,VideoTrackListaddtrack,change,removetrack:AudioTrackList 事件addtrack,change,removetrack:VideoTrackList 事件