TextTrackList | Web API

在此页

特性
事件处理程序
方法
事件
用法注意事项
范例
规范
浏览器兼容性
相关话题

TextTrackList interface is used to represent a list of the text tracks defined by the <track> element, with each track represented by a separate textTrack object in the list.

Retrieve an instance of this object with HTMLMediaElement.textTracks . The individual tracks can be accessed using array syntax or functions such as forEach() 例如。

特性

This interface also inherits properties from its parent interface, EventTarget .

length 只读

事件处理程序

onaddtrack: An event handler to be called when the addtrack event is fired, indicating that a new text track has been added to the media element.
onchange: An event handler to be called when the change event occurs.
onremovetrack: An event handler to call when the removetrack event is sent, indicating that a text track has been removed from the media element.

方法

This interface also inherits methods from its parent interface, EventTarget .

getTrackById(): 返回 TextTrack found within the TextTrackList whose id matches the specified string. If no match is found, null 被返回。

事件

addtrack: Fired when a new text track has been added to the media element.
也可用凭借 onaddtrack 特性。
change: Fired when a text track has been made active or inactive.
也可用凭借 onchange 特性。
removetrack: Fired when a new text track has been removed from the media element.
也可用凭借 onremovetrack 特性。

用法注意事项

In addition to being able to obtain direct access to the text tracks present on a media element, TextTrackList lets you set event handlers on the addtrack and removetrack events, so that you can detect when tracks are added to or removed from the media element's stream. See onaddtrack and onremovetrack for details and examples.

范例

Getting a video element's text track list

To get a media element's TextTrackList ，使用其 textTracks 特性。

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

Monitoring track count changes

In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the addtrack and removetrack events are set up.

textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
  trackCount = textTracks.length;
  drawTrackCountIndicator(trackCount);
}

规范

规范	状态	注释
HTML 实时标准 The definition of 'TexTrackList' in that specification.	实时标准

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`TextTrackList`	Chrome Yes	Edge ≤18	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes
`addTrack` event	Chrome Yes	Edge ≤79	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`change` event	Chrome Yes	Edge ≤79	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`getTrackById`	Chrome Yes	Edge 18	Firefox Yes	IE ?	Opera ?	Safari 6	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes
`length`	Chrome 44	Edge ≤18	Firefox Yes	IE ?	Opera 31	Safari 10	WebView Android 44	Chrome Android 44	Firefox Android ?	Opera Android 32	Safari iOS ?	Samsung Internet Android 4.0
`removeTrack` event	Chrome Yes	Edge ≤79	Firefox ?	IE ?	Opera ?	Safari ?	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持
兼容性未知 ?

元数据

最后修改： May 31, 2019

在此页

特性

事件处理程序

方法

事件

用法注意事项

范例

Getting a video element's text track list

Monitoring track count changes

规范

浏览器兼容性

图例

相关话题