TrackEvent

TrackEvent 是 HTML DOM API 的接口，用于表示 HTML 媒体元素上可用轨道集的更改；这些事件是 addtrack 和 removetrack。

重要的是不要将 TrackEvent 与 RTCTrackEvent 接口混淆，后者用于 RTCPeerConnection 的一部分的轨道。

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

Event TrackEvent

构造函数

TrackEvent()

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

实例属性

TrackEvent 基于 Event，因此 Event 的属性也适用于 TrackEvent 对象。

track 只读

事件引用的 DOM 轨道对象。如果非 null，则始终为媒体轨道类型之一的对象：AudioTrack、VideoTrack 或 TextTrack）。

实例方法

TrackEvent 本身没有方法；但是，它基于 Event，因此它提供了 Event 对象上可用的方法。

例子

此示例设置了一个函数 handleTrackEvent()，该函数针对文档中找到的第一个 <video> 元素上的任何 addtrack 或 removetrack 事件调用。

js
const 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) {
  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

浏览器兼容性

BCD 表格仅在浏览器中加载