VideoTrackList - 表示 <video> 元素中包含的视频轨道列表

VideoTrackList 接口用于表示 <video> 元素中包含的视频轨道列表，每个轨道由单独的对象 VideoTrack 表示。

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

属性

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

length 只读

列表中的轨道数。

selectedIndex 只读

当前选定轨道的索引，没有则为 -1。

事件处理程序

onaddtrack

触发 addtrack 事件时将调用的事件处理程序，表示已将新的视频轨道添加到媒体元素。

onchange

触发 change 事件时调用的事件处理程序，即由于将轨道设为活动或非活动状态，而导致轨道的 selected 属性的值变化。

onremovetrack

触发 removetrack 事件时调用的事件处理程序，指示视频轨道已从媒体元素中移除。

方法

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

getTrackById()

返回在 VideoTrackList 中找到的 id 匹配指定字符串的 VideoTrack。如果找不到匹配项，则返回 null。

事件

addtrack

当新的视频轨道已添加到媒体元素时触发。也可以通过 onaddtrack 属性处理。

change

将视频轨道设为活动或非活动状态时触发。也可以通过 onchange 属性获处理。

removetrack

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

使用注意

除了能够直接访问媒体元素上存在的视频轨道之外，VideoTrackList 还可以让您在 addtrack 和 removetrack 上设置事件处理程序事件，以便您可以检测何时在媒体元素的流中添加轨道或从中删除轨道。有关详细信息和实例，请参见 onaddtrack 和 onremovetrack。

实例

获取媒体元素的视频轨道列表

要获取媒体元素的 VideoTrackList，请使用其 videoTracks 属性。

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

监视轨道数量更改

在此实例中，我们有一个应用程序，可显示有关可用轨道数的信息。为了使其保持最新状态，设置了 addtrack 和 removetrack 事件的处理程序来监听它的变化。

videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;

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

规范

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

桌面浏览器兼容性

移动浏览器兼容性