1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: VideoTrackList
slug: Web/API/VideoTrackList
tags:
- API
- HTML DOM
- Interface
- Media
- NeedsTranslation
- Reference
- TopicStub
- Track List
- Tracks
- Video
- VideoTrackList
- list
translation_of: Web/API/VideoTrackList
---
<div>{{APIRef("HTML DOM")}}</div>
<p><span class="seoSummary">The <strong><code>VideoTrackList</code></strong> interface is used to represent a list of the video tracks contained within a {{HTMLElement("video")}} element, with each track represented by a separate {{domxref("VideoTrack")}} object in the list.</span></p>
<p>Retrieve an instance of this object with {{domxref('HTMLMediaElement.VideoTracks')}}. The individual tracks can be accessed using array syntax or functions such as {{jsxref("Array.forEach", "forEach()")}} for example.</p>
<h2 id="Properties">Properties</h2>
<p><em>This interface also inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("VideoTrackList.length", "length")}} {{ReadOnlyInline}}</dt>
<dd>The number of tracks in the list.</dd>
<dt>{{domxref("VideoTrackList.selectedIndex", "selectedIndex")}} {{ReadOnlyInline}}</dt>
<dd>The index of the currently selected track, if any, or <code>−1</code> otherwise.</dd>
</dl>
<h2 id="Event_handlers">Event handlers</h2>
<dl>
<dt>{{domxref("VideoTrackList.onaddtrack", "onaddtrack")}}</dt>
<dd>An event handler to be called when the {{event("addtrack")}} event is fired, indicating that a new video track has been added to the media element.</dd>
<dt>{{domxref("VideoTrackList.onchange", "onchange")}}</dt>
<dd>An event handler to be called when the {{event("change")}} event occurs — that is, when the value of the {{domxref("VideoTrack.selected", "selected")}} property for a track has changed, due to the track being made active or inactive.</dd>
<dt>{{domxref("VideoTrackList.onremovetrack", "onremovetrack")}}</dt>
<dd>An event handler to call when the {{event("removetrack")}} event is sent, indicating that a video track has been removed from the media element.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>This interface also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
<dl>
<dt>{{domxref("VideoTrackList.getTrackById", "getTrackById()")}}</dt>
<dd>Returns the {{domxref("VideoTrack")}} found within the <code>VideoTrackList</code> whose {{domxref("VideoTrack.id", "id")}} matches the specified string. If no match is found, <code>null</code> is returned.</dd>
</dl>
<h2 id="Events">Events</h2>
<dl>
<dt><code><a href="/en-US/docs/Web/API/VideoTrackList/addtrack_event">addtrack</a></code></dt>
<dd>Fired when a new video track has been added to the media element.<br>
Also available via the <code><a href="/en-US/docs/Web/API/VideoTrackList/onaddtrack">onaddtrack</a></code> property.</dd>
<dt><code><a href="/en-US/docs/Web/API/VideoTrackList/change_event">change</a></code></dt>
<dd>Fired when a video track has been made active or inactive.<br>
Also available via the <code><a href="/en-US/docs/Web/API/VideoTrackList/onchange">onchange</a></code> property.</dd>
<dt><code><a href="/en-US/docs/Web/API/VideoTrackList/removetrack_event">removetrack</a></code></dt>
<dd>Fired when a new video track has been removed from the media element.<br>
Also available via the <code><a href="/en-US/docs/Web/API/VideoTrackList/onremovetrack">onremovetrack</a></code> property.</dd>
</dl>
<h2 id="Usage_notes">Usage notes</h2>
<p>In addition to being able to obtain direct access to the video tracks present on a media element, <code>VideoTrackList</code> lets you set event handlers on the {{event("addtrack")}} and {{event("removetrack")}} events, so that you can detect when tracks are added to or removed from the media element's stream. See {{domxref("VideoTrackList.onaddtrack", "onaddtrack")}} and {{domxref("VideoTrackList.onremovetrack", "onremovetrack")}} for details and examples.</p>
<h2 id="Examples">Examples</h2>
<h3 id="Getting_a_media_element's_video_track_list">Getting a media element's video track list</h3>
<p>To get a media element's {{domxref("VideoTrackList")}}, use its {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} property.</p>
<pre class="brush: js">var videoTracks = document.querySelector("video").videoTracks;</pre>
<h3 id="Monitoring_track_count_changes">Monitoring track count changes</h3>
<p>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 {{event("addtrack")}} and {{event("removetrack")}} events are set up.</p>
<pre class="brush: js">videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
trackCount = videoTracks.length;
drawTrackCountIndicator(trackCount);
}
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#videotracklist', 'VideoTrackList')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.VideoTrackList")}}</p>
|
