initial commit

1 files changed, 118 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/videotracklist/index.html b/files/zh-cn/web/api/videotracklist/index.html
new file mode 100644
index 0000000000..54ff1fe1c3
--- /dev/null
+++ b/files/zh-cn/web/api/videotracklist/index.html
@@ -0,0 +1,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>