TextTrackList - 表示由 <track> 元素定义的文本轨道的列表

TextTrackList 接口表示由 <track> 元素定义的文本轨道的列表,每个轨道由列表中单独的 textTrack)表示。

可以使用 HTMLMediaElement.textTracks 获得此对象的实例。例如,可以使用数组语法或诸如 forEach() 之类的函数来访问各个轨道。

属性

此接口还从其父接口 EventTarget 继承了属性。

length 只读

列表中的轨道数。

事件处理程序

onaddtrack

触发 addtrack 事件时将调用的事件处理程序,表示已将新的文本轨道添加到 media 元素。

onchange

触发 change 事件时要调用的事件处理程序。

onremovetrack

触发 removetrack 事件时调用的事件处理程序,指示已从 media 元素中删除了文本轨道。

方法

该接口还从其父接口 EventTarget 继承了方法。

getTrackById()

返回 TextTrackList 与中找到的 id 与指定字符串匹配的 TextTrack。如果没有找到匹配项,则返回 null

事件

addtrack

当新的文本轨道已添加到 media 元素时触发。也可以通过 onaddtrack 属性处理。

change

使文本轨道处于活动状态或非活动状态时触发。也可以通过 onchange 属性处理。

removetrack

从媒体元素中删除新的文本轨道时触发。也可以通过 onremovetrack 属性处理。

使用注意

除了能够直接访问媒体元素上存在的文本轨道之外,TextTrackList 还使您可以在 addtrackremovetrack 上设置事件处理程序事件,以便您可以检测何时将轨道添加到媒体元素的流或从媒体元素的流中删除。有关详细信息和实例,请参见 onaddtrackonremovetrack

实例

获取视频元素的文本轨道列表

要获取媒体元素的 TextTrackList,请使用其 textTracks 属性。

var textTracks = document.querySelector("video").textTracks;

监听轨道的数量变化

在此实例中,我们有一个应用程序,显示有关可用频道数量的信息。为了保持最新状态,我们设置了 addtrackremovetrack 事件的处理函数。

textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = textTracks.length;
  drawTrackCountIndicator(trackCount);
}

规范

规范 状态 备注
HTML Living Standard
TexTrackList 的定义
现行的标准 -

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持 支持≤18 支持 未知 支持 支持
addTrack 事件 支持≤79 未知 未知 未知 未知
change 事件 支持≤79 未知 未知 未知 未知
getTrackById 支持18 支持 未知 未知6
length44≤18 支持 未知3110
removeTrack 事件 支持≤79 未知 未知 未知 未知

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 支持 支持 未知 未知 未知 支持 未知
addTrack 事件 支持 支持 未知 未知 未知 未知 未知
change 事件 支持 支持 未知 未知 未知 未知 未知
getTrackById 支持 支持 未知 未知 未知 未知 未知
length4444 未知 未知 未知32 未知
removeTrack 事件 支持 支持 未知 未知 未知 未知 未知