initial commit

10 files changed, 787 insertions, 0 deletions

diff --git a/files/ja/web/api/videotracklist/addtrack_event/index.html b/files/ja/web/api/videotracklist/addtrack_event/index.html
new file mode 100644
index 0000000000..5cb6d6a35b
--- /dev/null
+++ b/files/ja/web/api/videotracklist/addtrack_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'VideoTrackList: addtrack イベント'
+slug: Web/API/VideoTrackList/addtrack_event
+tags:
+  - API
+  - Reference
+  - addTrack
+  - events
+translation_of: Web/API/VideoTrackList/addtrack_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>addtrack</code> イベントは、トラックが {{domxref("VideoTrackList")}} に追加されたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TrackEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/VideoTrackList/onaddtrack">onaddtrack</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>AddEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.videoTracks.addEventListener('addtrack', (event) =&gt; {
+  console.log(`Video track: ${event.track.label} added`);
+});</pre>
+
+<p><code>onaddtrack</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.videoTracks.onaddtrack = (event) =&gt; {
+  console.log(`Video track: ${event.track.label} added`);
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>仕様</td>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-addtrack', 'addtrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.addtrack_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: <code><a href="/ja/docs/Web/API/VideoTrackList/removetrack_event">removetrack</a></code>, <code><a href="/ja/docs/Web/API/VideoTrackList/change_event">change</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/AudioTrackList">AudioTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/AudioTrackList/addtrack_event">addtrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/MediaStream">MediaStream</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/MediaStream/addtrack_event">addtrack</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ja/web/api/videotracklist/change_event/index.html b/files/ja/web/api/videotracklist/change_event/index.html
new file mode 100644
index 0000000000..a24e5583ce
--- /dev/null
+++ b/files/ja/web/api/videotracklist/change_event/index.html
@@ -0,0 +1,95 @@
+---
+title: 'VideoTrackList: change イベント'
+slug: Web/API/VideoTrackList/change_event
+tags:
+  - API
+  - Change
+  - Reference
+  - events
+translation_of: Web/API/VideoTrackList/change_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>change</code> イベントは、動画トラックがアクティブまたは非アクティブになったとき（トラックの <code><a href="/ja/docs/Web/API/VideoTrack/selected">selected</a></code> プロパティを変更したときなど）に発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/VideoTrackList/onchange">onchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>AddEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+videoElement.videoTracks.addEventListener('change', (event) =&gt; {
+    console.log(`'${event.type}' イベント発生`);
+});
+
+// `selected` の値を変更すると `change` イベントを引き起こします
+const toggleTrackButton = document.querySelector('.toggle-track');
+toggleTrackButton.addEventListener('click', () =&gt; {
+  const track = videoElement.videoTracks[0];
+  track.selected = !track.selected;
+});
+</pre>
+
+<p><code>onchange</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+videoElement.videoTracks.onchange = (event) =&gt; {
+    console.log(`'${event.type}' イベント発生`);
+};
+
+// `selected` の値を変更すると `change` イベントを引き起こします
+const toggleTrackButton = document.querySelector('.toggle-track');
+toggleTrackButton.addEventListener('click', () =&gt; {
+  const track = videoElement.videoTracks[0];
+  track.selected = !track.selected;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-change', 'change')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.change_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>Related events: <code><a href="/ja/docs/Web/API/VideoTrackList/addtrack_event">addtrack</a></code>, <code><a href="/ja/docs/Web/API/VideoTrackList/removetrack_event">removetrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/AudioTrackList">AudioTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/AudioTrackList/change_event">change</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ja/web/api/videotracklist/gettrackbyid/index.html b/files/ja/web/api/videotracklist/gettrackbyid/index.html
new file mode 100644
index 0000000000..9b9addf540
--- /dev/null
+++ b/files/ja/web/api/videotracklist/gettrackbyid/index.html
@@ -0,0 +1,64 @@
+---
+title: Video​Track​List​.get​Track​ById
+slug: Web/API/VideoTrackList/getTrackById
+tags:
+  - API
+  - HTML DOM
+  - Media
+  - Method
+  - Reference
+  - Track ID
+  - Track List
+  - Tracks
+  - Video
+  - VideoTrackList
+  - getTrackById
+  - id
+  - track
+translation_of: Web/API/VideoTrackList/getTrackById
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>getTrackById()</code></strong> メソッドは、指定された文字列と {{domxref("VideoTrack.id", "id")}} が一致するトラックリストから最初の {{domxref("VideoTrack")}} オブジェクトを返します。</span> ID 文字列がわかっていれば、これで特定のトラックを見つけることができます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>theTrack</em> = <em>VideoTrackList</em>.getTrackById(<em>id</em>);</pre>
+
+<h3 id="Paramters" name="Paramters">パラメーター</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>トラックリスト内で検索するトラックの ID を示す {{domxref("DOMString")}}。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>指定された文字列に一致する <code>id</code> を持つ <code>VideoTrackList</code> 内で見つかった最初のトラックを示す {{domxref("VideoTrack")}} オブジェクト。 一致が見つからない場合、このメソッドは <code>null</code> を返します。</p>
+
+<p>トラックは自然な順序で検索されます。 つまり、メディアリソース自体によって定義された順序で、またはリソースが順序を定義していない場合は、メディアリソースによってトラックが宣言される相対的な順序です。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-videotracklist-gettrackbyid', 'VideoTrackList.getTrackById()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.getTrackById")}}</p>
diff --git a/files/ja/web/api/videotracklist/index.html b/files/ja/web/api/videotracklist/index.html
new file mode 100644
index 0000000000..87d72e5d14
--- /dev/null
+++ b/files/ja/web/api/videotracklist/index.html
@@ -0,0 +1,116 @@
+---
+title: VideoTrackList
+slug: Web/API/VideoTrackList
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Media
+  - Reference
+  - Track List
+  - Tracks
+  - Video
+  - VideoTrackList
+  - list
+translation_of: Web/API/VideoTrackList
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>VideoTrackList</code></strong> インターフェイスは、{{HTMLElement("video")}} 要素内に含まれる動画トラックのリストを表すために使用します。 各トラックはリスト内の個別の {{domxref("VideoTrack")}} オブジェクトで表します。</span></p>
+
+<p>{{domxref('HTMLMediaElement.videoTracks')}} を使用してこのオブジェクトのインスタンスを取得します。 個々のトラックは、配列構文または {{jsxref("Array.forEach", "forEach()")}} などの関数を使用してアクセスできます。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>このインターフェイスは、その親インターフェイスである {{domxref("EventTarget")}} からもプロパティを継承します。</em></p>
+
+<dl>
+ <dt>{{domxref("VideoTrackList.length", "length")}} {{ReadOnlyInline}}</dt>
+ <dd>リスト内のトラック数。</dd>
+ <dt>{{domxref("VideoTrackList.selectedIndex", "selectedIndex")}} {{ReadOnlyInline}}</dt>
+ <dd>現在選択されているトラックがある場合はそのインデックス、それ以外の場合は <code>-1</code>。</dd>
+</dl>
+
+<h2 id="Event_handlers" name="Event_handlers">イベントハンドラー</h2>
+
+<dl>
+ <dt>{{domxref("VideoTrackList.onaddtrack", "onaddtrack")}}</dt>
+ <dd>{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラー。 新しい動画トラックがメディア要素に追加されたことを示します。</dd>
+ <dt>{{domxref("VideoTrackList.onchange", "onchange")}}</dt>
+ <dd>{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラー。 つまりトラックの {{domxref("VideoTrack.selected", "selected")}} プロパティの値が変更されて、トラックがアクティブまたは非アクティブになったときです。</dd>
+ <dt>{{domxref("VideoTrackList.onremovetrack", "onremovetrack")}}</dt>
+ <dd>{{event("removetrack")}} イベントが発生したときに呼び出されるイベントハンドラー。 動画トラックがメディア要素から取り除かれたことを示します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>このインターフェイスは、その親インターフェイスである {{domxref("EventTarget")}} からもメソッドを継承しています。</em></p>
+
+<dl>
+ <dt>{{domxref("VideoTrackList.getTrackById", "getTrackById()")}}</dt>
+ <dd>指定された文字列と {{domxref("VideoTrack.id", "id")}} が一致する <code>VideoTrackList</code> 内で見つかった {{domxref("VideoTrack")}} を返します。 一致が見つからない場合は、<code>null</code> を返します。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<dl>
+ <dt>{{domxref("VideoTrackList.addtrack_event", "addtrack")}}</dt>
+ <dd>新しい動画トラックがメディア要素に追加されたときに発生します。<br>
+ {{domxref("VideoTrackList.onaddtrack", "onaddtrack")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("VideoTrackList.change_event", "change")}}</dt>
+ <dd>動画トラックがアクティブまたは非アクティブになったときに発生します。<br>
+ {{domxref("VideoTrackList.onchange", "onchange")}} プロパティからも利用できます。</dd>
+ <dt>{{domxref("VideoTrackList.removetrack_event", "removetrack")}}</dt>
+ <dd>動画トラックがメディア要素から取り除かれたときに発生します。<br>
+ {{domxref("VideoTrackList.onremovetrack", "onremovetrack")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p><code>VideoTrackList</code> を使用すると、メディア要素にある動画トラックに直接アクセスできるだけでなく、{{event("addtrack")}} イベントと {{event("removetrack")}} イベントにイベントハンドラを設定できるため、メディア要素のストリームにトラックが追加されたときまたは取り除かれたときに検出できます。 詳細と例については、{{domxref("VideoTrackList.onaddtrack", "onaddtrack")}} と {{domxref("VideoTrackList.onremovetrack", "onremovetrack")}} を参照してください。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Getting_a_media_elements_video_track_list" name="Getting_a_media_element's_video_track_list">メディア要素の動画トラックリストの取得</h3>
+
+<p>メディア要素の <code>VideoTrackList</code> を取得するには、その {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} プロパティを使用します。</p>
+
+<pre class="brush: js">var videoTracks = document.querySelector("video").videoTracks;</pre>
+
+<h3 id="Monitoring_track_count_changes" name="Monitoring_track_count_changes">トラック数の変化の監視</h3>
+
+<p>この例では、利用可能なチャンネル数に関する情報を表示するアプリがあります。 それを最新に保つために、{{event("addtrack")}} と {{event("removetrack")}} イベントのためのハンドラが設定されています。</p>
+
+<pre class="brush: js">videoTracks.onaddtrack = updateTrackCount;
+videoTracks.onremovetrack = updateTrackCount;
+
+function updateTrackCount(event) {
+  trackCount = videoTracks.length;
+  drawTrackCountIndicator(trackCount);
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</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" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.VideoTrackList")}}</p>
diff --git a/files/ja/web/api/videotracklist/length/index.html b/files/ja/web/api/videotracklist/length/index.html
new file mode 100644
index 0000000000..dd4e0ca065
--- /dev/null
+++ b/files/ja/web/api/videotracklist/length/index.html
@@ -0,0 +1,67 @@
+---
+title: VideoTrackList.length
+slug: Web/API/VideoTrackList/length
+tags:
+  - API
+  - HTML DOM
+  - Media
+  - Property
+  - Read-only
+  - Reference
+  - Video
+  - VideoTrackList
+  - length
+  - list
+  - track
+translation_of: Web/API/VideoTrackList/length
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">読み取り専用の <strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>length</code></strong> プロパティは、<code>VideoTrackList</code> 内のエントリ数を返します。 各エントリは、メディア要素内の1つの動画トラックを表す {{domxref("VideoTrack")}} です。</span> 値 0 は、メディアに動画トラックがないことを示します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>trackCount</em> = <em>VideoTrackList</em>.length;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>VideoTrackList</code> に含まれる動画トラック数を示す数値。 <code>VideoTrackList</code> を {{domxref("VideoTrack")}} 型のオブジェクトの配列として扱うことで、各トラックにアクセスできます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、{{domxref("Document.querySelector", "querySelector()")}} によって {{Glossary("DOM")}} 内で見つかった最初の {{HTMLElement("video")}} 要素内の動画トラックの数を取得します。</p>
+
+<pre class="brush: js">var videoElem = document.querySelector("video");
+var numVideoTracks = 0;
+
+if (videoElem.videoTracks) {
+  numVideoTracks = videoElem.videoTracks.length;
+}
+</pre>
+
+<p>このサンプルは、{{domxref("VideoTrack")}} をサポートしていないブラウザーで失敗するのを避けるために、{{domxref("HTMLMediaElement.videoTracks")}} が定義されていることを確認していることに注意してください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-videotracklist-length', 'VideoTrackList: length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.length")}}</p>
diff --git a/files/ja/web/api/videotracklist/onaddtrack/index.html b/files/ja/web/api/videotracklist/onaddtrack/index.html
new file mode 100644
index 0000000000..302ab02fcb
--- /dev/null
+++ b/files/ja/web/api/videotracklist/onaddtrack/index.html
@@ -0,0 +1,76 @@
+---
+title: VideoTrackList.onaddtrack
+slug: Web/API/VideoTrackList/onaddtrack
+tags:
+  - API
+  - Adding Tracks
+  - Adding Video Tracks
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - Video
+  - VideoTrackList
+  - addTrack
+  - onaddtrack
+  - track
+translation_of: Web/API/VideoTrackList/onaddtrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>onaddtrack</code></strong> プロパティは、{{event("addtrack")}} イベントが発生したときに呼び出されるイベントハンドラで、<code>VideoTrackList</code> が表す動画トラックを持つメディア要素に新しい動画トラックが追加されたことを示します。</span></p>
+
+<p>イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡され、その {{domxref("TrackEvent.track", "track")}} プロパティは新しく追加されたトラックを識別します。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>addtrack</code> イベント用のハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>VideoTrackList</em>.onaddtrack = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onaddtrack</code> は、 {{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディアに追加されたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>{{event("addtrack")}} イベントは、動画トラックを <code>VideoTrackList</code> オブジェクトで表すメディア要素に新しいトラックが追加されるたびに呼び出されます。 これは、メディアが最初に要素に添付されたときにトラックが要素に追加されたときに発生します。 メディアリソース内の動画トラックごとに1つの <code>addtrack</code> イベントが発生します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、新しく追加されたトラックを表す {{domxref("VideoTrack")}} オブジェクトを渡して、<code>addToTrackList()</code> 関数を呼び出す {{event("addtrack")}} イベントのハンドラを確立します。 このシナリオでは、その関数の役割は、選択可能な動画トラックのリストに新しいトラックを追加することです。</p>
+
+<pre class="brush: js">document.querySelector("video").videoTracks.onaddtrack = function(event) {
+  addToTrackList(event.track);
+};
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onaddtrack', 'VideoTrackList: onaddtrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.onaddtrack")}}</p>
+
+<p> </p>
diff --git a/files/ja/web/api/videotracklist/onchange/index.html b/files/ja/web/api/videotracklist/onchange/index.html
new file mode 100644
index 0000000000..bdcdf85f01
--- /dev/null
+++ b/files/ja/web/api/videotracklist/onchange/index.html
@@ -0,0 +1,76 @@
+---
+title: VideoTrackList.onchange
+slug: Web/API/VideoTrackList/onchange
+tags:
+  - API
+  - Adding Tracks
+  - Adding Video Tracks
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - Video
+  - VideoTrackList
+  - addTrack
+  - onchange
+  - track
+translation_of: Web/API/VideoTrackList/onchange
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>onchange</code></strong> プロパティは、{{event("change")}} イベントが発生したときに呼び出されるイベントハンドラで、<code>VideoTrackList</code> 内の {{domxref("VideoTrack")}} がアクティブになったことを示します。</span></p>
+
+<p>イベントは {{domxref("Event")}} オブジェクトの形式でイベントハンドラに渡されます。 イベントは追加情報を提供しません。 メディアのトラックの新しい状態を判断するには、それらの {{domxref("VideoTrack.selected")}} フラグを確認する必要があります。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>change</code> イベントのハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>VideoTrackList</em>.onchange = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onchange</code> は、トラックがアクティブになるたびに呼び出されるべき関数を設定します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>このスニペットは、リスト内の各トラックを調べる {{event("change")}} イベントのハンドラを確立し、トラックの現在の状態を示すユーザーインターフェイスコントロールの状態を更新する関数を呼び出します。</p>
+
+<pre class="brush: js">var trackList = document.querySelector("video").videoTracks;
+
+trackList.onchange = function(event) {
+  trackList.forEach(function(track) {
+    updateTrackSelectedButton(track.id, track.selected);
+  });
+};
+</pre>
+
+<p>この例の <code>updateTrackSelectedButton()</code> は、トラックの {{domxref("VideoTrack.id", "id")}}（おそらくアプリはトラック ID をコントロール要素の ID として使用します）でユーザーインターフェイスコントロールを見つけて、トラックの {{domxref("VideoTrack.selected", "selected")}} フラグを使用してコントロールが現在どの状態にあるべきかを決定する関数です。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onchange', 'VideoTrackList: onchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.onchange")}}</p>
diff --git a/files/ja/web/api/videotracklist/onremovetrack/index.html b/files/ja/web/api/videotracklist/onremovetrack/index.html
new file mode 100644
index 0000000000..49f520f967
--- /dev/null
+++ b/files/ja/web/api/videotracklist/onremovetrack/index.html
@@ -0,0 +1,73 @@
+---
+title: VideoTrackList.onremovetrack
+slug: Web/API/VideoTrackList/onremovetrack
+tags:
+  - API
+  - Event Handler
+  - HTML DOM
+  - Media
+  - Property
+  - Reference
+  - Removing Tracks
+  - Removing Video Tracks
+  - Video
+  - VideoTrackList
+  - onremovetrack
+  - remove
+  - removeTrack
+  - track
+translation_of: Web/API/VideoTrackList/onremovetrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>onremovetrack</code></strong> イベントハンドラは、{{event("removetrack")}} イベントが発生したときに呼び出され、動画トラックがメディア要素から、つまり <code>VideoTrackList</code> からも取り除かれたことを示します。</span></p>
+
+<p>イベントは {{domxref("TrackEvent")}} オブジェクトの形式でイベントハンドラに渡されます。 その {{domxref("TrackEvent.track", "track")}} プロパティは、メディア要素の <code>VideoTrackList</code> から取り除かれたトラックを識別します。</p>
+
+<div class="note">
+<p><strong>注</strong>: {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、<code>removetrack</code> イベント用のハンドラを追加することもできます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>VideoTrackList</em>.onremovetrack = <em>eventHandler</em>;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>onremovetrack</code> は、{{domxref("TrackEvent.track", "track")}} プロパティでどの動画トラックがメディア要素から取り除かれたかを示す {{domxref("TrackEvent")}} オブジェクトを入力として受け取る関数を設定します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この単純な例では、トラックがメディア要素から取り除かれるたびに、メディア要素内の現在の動画トラック数を取得するだけです。</p>
+
+<pre class="brush: js">document.querySelector("my-video").videoTracks.onremovetrack = function(event) {
+  myTrackCount = document.querySelector("my-video").videoTracks.length;
+};
+</pre>
+
+<p>メディア要素に残っている現在の動画トラック数は、<code>VideoTrackList</code> の {{domxref("VideoTrackList.length", "length")}} プロパティから取得します。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-tracklist-onremovetrack', 'VideoTrackList: onremovetrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.onremovetrack")}}</p>
diff --git a/files/ja/web/api/videotracklist/removetrack_event/index.html b/files/ja/web/api/videotracklist/removetrack_event/index.html
new file mode 100644
index 0000000000..5aed835394
--- /dev/null
+++ b/files/ja/web/api/videotracklist/removetrack_event/index.html
@@ -0,0 +1,86 @@
+---
+title: 'VideoTrackList: removetrack イベント'
+slug: Web/API/VideoTrackList/removetrack_event
+tags:
+  - API
+  - Media Streams API
+  - MediaStreamTrackEvent
+  - Reference
+  - Removing Tracks
+  - events
+  - removeTrack
+translation_of: Web/API/VideoTrackList/removetrack_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><code>removeTrack</code> イベントは、トラックが {{domxref("VideoTrackList")}} から取り除かれたときに発生します。</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">バブリング</th>
+   <td>なし</td>
+  </tr>
+  <tr>
+   <th scope="row">キャンセル</th>
+   <td>不可</td>
+  </tr>
+  <tr>
+   <th scope="row">インターフェイス</th>
+   <td>{{domxref("TrackEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">イベントハンドラプロパティ</th>
+   <td><code><a href="/ja/docs/Web/API/VideoTrackList/onremovetrack">onremovetrack</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p><code>AddEventListener()</code> を使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.videoTracks.addEventListener('removetrack', (event) =&gt; {
+  console.log(`Video track: ${event.track.label} removed`);
+});</pre>
+
+<p><code>onremovetrack</code> イベントハンドラプロパティを使用する場合</p>
+
+<pre class="brush: js">const videoElement = document.querySelector('video');
+
+videoElement.videoTracks.onremovetrack = (event) =&gt; {
+  console.log(`Video track: ${event.track.label} removed`);
+};</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'media.html#event-media-removetrack', 'removetrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.removetrack_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>関連イベント: <code><a href="/ja/docs/Web/API/VideoTrackList/addtrack_event">addtrack</a></code>, <code><a href="/ja/docs/Web/API/VideoTrackList/change_event">change</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/AudioTrackList">AudioTrackList</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/AudioTrackList/removetrack_event">removetrack</a></code></li>
+ <li><code><a href="/ja/docs/Web/API/MediaStream">MediaStream</a></code> 対象でのこのイベント: <code><a href="/ja/docs/Web/API/MediaStream/removetrack_event">removetrack</a></code></li>
+ <li><a href="/ja/docs/Web/API/Media_Streams_API">Media Streams API</a></li>
+ <li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/ja/web/api/videotracklist/selectedindex/index.html b/files/ja/web/api/videotracklist/selectedindex/index.html
new file mode 100644
index 0000000000..b3e5e5da92
--- /dev/null
+++ b/files/ja/web/api/videotracklist/selectedindex/index.html
@@ -0,0 +1,51 @@
+---
+title: VideoTrackList.selectedIndex
+slug: Web/API/VideoTrackList/selectedIndex
+tags:
+  - API
+  - HTML DOM
+  - Media
+  - Property
+  - Read-only
+  - Reference
+  - Video
+  - VideoTrackList
+  - track
+translation_of: Web/API/VideoTrackList/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">読み取り専用の <strong>{{domxref("VideoTrackList")}}</strong> の <strong><code>selectedIndex</code></strong> プロパティは、現在選択されているトラックがある場合はそのインデックスを返し、それ以外の場合は <code>-1</code> を返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>index</em> = <em>VideoTrackList</em>.selectedIndex;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>現在選択されているトラックがある場合はそのインデックスを示す数値、それ以外の場合は <code>-1</code>。</p>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状態</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-videotracklist-selectedindex', 'VideoTrackList: selectedIndex')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.VideoTrackList.selectedIndex")}}</p>