---
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>