TrackEvent - 表示 HTML 媒体元素上一组可用轨道的更改的事件
TrackEvent 接口是 HTML DOM 规范的一部分,用于表示 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,因此它提供了 TrackEvent 对象上可用的方法。
实例
本实例设置了一个函数 handleTrackEvent(),该函数针对第一个 <video> 事件中的任何 addtrack 或removetrack事件进行调用 文件中找到的元素。
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 的定义 |
推荐 | 初始定义。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 支持 | ≤79 | 未知 | 未知 | 未知 | 未知 |
track | 支持 | ≤79 | 未知 | 未知 | 未知 | 未知 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 支持 | 支持 | 未知 | 未知 | 未知 | 未知 | 未知 |
track | 支持 | 支持 | 未知 | 未知 | 未知 | 未知 | 未知 |