TrackEvent - 表示 HTML 媒体元素上一组可用轨道的更改的事件

TrackEvent 接口是 HTML DOM 规范的一部分,用于表示 HTML 媒体元素上一组可用轨道的更改的事件;这些事件包括了 addtrackremovetrack。特别注意的是不要将 TrackEventRTCTrackEvent 接口混淆,该接口是 RTCPeerConnection 的一部分。

基于 TrackEvent 的事件总是被发送到以下一种媒体轨道列表类型:

构造函数

TrackEvent()

使用指定的事件类型以及可选的其他属性创建并初始化一个新的 TrackEvent 对象。

属性

TrackEvent 继承了 Event ,因此 Event 的属性也可以在 TrackEvent 对象上使用。

track 只读

事件所引用的 DOM 跟踪对象。如果不是 null,则它始终是以下媒体轨道类型之一的对象:AudioTrackVideoTrackTextTrack

方法

TrackEvent 没有自己的方法;但是,它继承了 Event,因此它提供了 TrackEvent 对象上可用的方法。

实例

本实例设置了一个函数 handleTrackEvent(),该函数针对第一个 <video> 事件中的任何 addtrackremovetrack事件进行调用 文件中找到的元素。

This example sets up a function, handleTrackEvent(), which is callled for any addtrack or removetrack event on the first <video> element found in the document.

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

videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.audioTracks.addEventListener("removetrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("addtrack", handleTrackEvent, false);
videoElem.textTracks.addEventListener("removetrack", handleTrackEvent, false);

function handleTrackEvent(event) {
  var trackKind;

  if (event.target instanceof(VideoTrackList)) {
    trackKind = "video";
  } else if (event.target instanceof(AudioTrackList)) {
    trackKind = "audio";
  } else if (event.target instanceof(TextTrackList)) {
    trackKind = "text";
  } else {
    trackKind = "unknown";
  }

  switch(event.type) {
    case "addtrack":
      console.log("添加了一个 " + trackKind + " 轨道");
      break;
    case "removetrack":
      console.log("移除了一个 " + trackKind + " 轨道");
      break;
  }
}

事件处理程序使用 JavaScript instanceof 运算符来确定事件发生在哪种跟踪类型上,然后输出到控制台以指示一种消息类型轨道的位置以及它是否要添加到元素或从元素中删除。

规范

规范 状态 备注
HTML Living Standard
TrackEvent 的定义
现行的标准 初始定义。
HTML5
TrackEvent 的定义
推荐 初始定义。

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持 支持≤79 未知 未知 未知 未知
track 支持≤79 未知 未知 未知 未知

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 支持 支持 未知 未知 未知 未知 未知
track 支持 支持 未知 未知 未知 未知 未知