TrackEvent
TrackEvent 接口是 HTML DOM API 的一部分,用于表示 HTML 媒体元素上可用轨道集合发生变化的事件;这些事件是 addtrack 和 removetrack。
请注意不要将 TrackEvent 与 RTCTrackEvent 接口混淆,后者用于表示属于 RTCPeerConnection 的轨道。
基于 TrackEvent 的事件总是发送到以下一种媒体轨道列表类型:
- 涉及视频轨道的事件总是发送到
HTMLMediaElement.videoTracks中找到的VideoTrackList。 - 涉及音频轨道的事件总是发送到
HTMLMediaElement.audioTracks中指定的AudioTrackList。 - 影响文本轨道的事件会发送到
HTMLMediaElement.textTracks指向的TextTrackList对象。
构造函数
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);
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 |
浏览器兼容性
加载中…