TrackEvent

TrackEvent 接口是 HTML DOM API 的一部分,用于表示 HTML 媒体元素上可用轨道集合发生变化的事件;这些事件是 addtrackremovetrack

请注意不要将 TrackEventRTCTrackEvent 接口混淆,后者用于表示属于 RTCPeerConnection 的轨道。

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

Event TrackEvent

构造函数

TrackEvent()

创建并初始化一个新的 TrackEvent 对象,指定事件类型以及可选的附加属性。

实例属性

TrackEvent 基于 Event,因此 Event 的属性在 TrackEvent 对象上也是可用的。

track 只读

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

实例方法

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

示例

此示例设置了一个名为 handleTrackEvent() 的函数,该函数会在文档中找到的第一个 <video> 元素上处理任何 addtrackremovetrack 事件。

js
const videoElem = document.querySelector("video");

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

function handleTrackEvent(event) {
  let 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(`Added a ${trackKind} track`);
      break;
    case "removetrack":
      console.log(`Removed a ${trackKind} track`);
      break;
  }
}

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

规范

规范
HTML
# the-trackevent-interface

浏览器兼容性