TextTrackList
TextTrackList 接口用于表示与关联的视频或音频元素定义的文本轨道列表，列表中的每个轨道都由一个单独的 TextTrack 对象表示。
可以通过声明性地使用 <track> 元素，或以编程方式使用 HTMLMediaElement.addTextTrack() 方法将文本轨道添加到媒体元素。
可以通过 HTMLMediaElement 对象的 textTracks 属性检索此对象的实例。
对于给定的 HTMLMediaElement 对象 media，可以通过以下方式访问各个轨道：
media.TextTracks[n]，用于从对象的文本轨道列表中获取第 n 个文本轨道media.textTracks.getTrackById()方法
实例属性
此接口还继承了其父接口 EventTarget 的属性。
length只读-
列表中轨道的数量。
实例方法
此接口还继承了其父接口 EventTarget 的方法。
getTrackById()-
返回
TextTrackList中id与指定字符串匹配的TextTrack。如果未找到匹配项，则返回null。
事件
addtrack-
当新文本轨道已添加到媒体元素时触发。也可通过
onaddtrack属性访问。 change-
当文本轨道变为活动或非活动状态时触发。也可通过
onchange属性访问。 removetrack-
当文本轨道已从媒体元素中移除时触发。也可通过
onremovetrack属性访问。
用法说明
除了能够直接访问媒体元素上的文本轨道外，TextTrackList 还允许您在 addtrack 和 removetrack 事件上设置事件处理程序，以便您可以检测到轨道何时被添加到媒体元素的流中或从其流中移除。
示例
获取视频元素的文本轨道列表
要获取媒体元素的 TextTrackList，请使用其 textTracks 属性。
js
const textTracks = document.querySelector("video").textTracks;
监控轨道数量的变化
在此示例中，我们有一个应用程序显示可用频道的数量。为了保持其最新状态，会设置 addtrack 和 removetrack 事件的事件处理程序。
js
textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
trackCount = textTracks.length;
drawTrackCountIndicator(trackCount);
}
规范
| 规范 |
|---|
| HTML # text-track-api |
浏览器兼容性
加载中…