initial commit

3 files changed, 320 insertions, 0 deletions

diff --git a/files/ja/web/api/texttrack/cuechange_event/index.html b/files/ja/web/api/texttrack/cuechange_event/index.html
new file mode 100644
index 0000000000..509f3a3f37
--- /dev/null
+++ b/files/ja/web/api/texttrack/cuechange_event/index.html
@@ -0,0 +1,108 @@
+---
+title: 'TextTrack: cuechange イベント'
+slug: Web/API/TextTrack/cuechange_event
+tags:
+  - API
+  - Event
+  - Reference
+  - TextTrack
+  - WebVTT
+  - cuechange
+  - oncuechange
+  - track
+  - イベント
+  - テキストトラック
+  - トラック
+translation_of: Web/API/TextTrack/cuechange_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>cuechange</code></strong> イベントは、 {{domxref("TextTrack")}} が現在表示しているキューが変更されたときに発生します。</span>このイベントは、もし表示されているものがあれば、 <code>TextTrack</code> <em>および</em> {{domxref("HTMLTrackElement")}} の両方に発生します。</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>{{domxref("GlobalEventHandlers.oncuechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="On_the_TextTrack" name="On_the_TextTrack">TextTrack 上で</h3>
+
+<p><code>cuechange</code> イベントのリスナーを <code>TextTrack</code> に設定するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用します。</p>
+
+<pre class="brush: js">track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // 現在のキューの配列
+});
+</pre>
+
+<p>あるいは、 <code><a href="/ja/docs/Web/API/TextTrack/oncuechange">oncuechange</a></code> イベントハンドラ－プロパティを設定しても構いません。</p>
+
+<pre class="brush: js">track.oncuechange = function () {
+  let cues = track.activeCues; // 現在のキューの配列
+}</pre>
+
+<h3 id="On_the_track_element" name="On_the_track_element">track 要素上で</h3>
+
+<p>基本となる {{domxref("TextTrack")}} は、 {{domxref("HTMLTrackElement.track", "track")}} プロパティで識別されますが、現在表示されているキューが変更されるたびに {{domxref("TextTrack.cuechange_event", "cuechange")}} イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。</p>
+
+<p>トラックがメディア要素に結び付けられて<em>いる</em>場合、 {{HTMLElement("track")}} 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素の子として使用すると、 <code>cuechange</code> イベントは {{domxref("HTMLTrackElement")}} にも送信されます。</p>
+
+<pre class="brush: js">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});
+</pre>
+
+<p>また、<code>oncuechange</code> イベントハンドラーを使用することもできます。</p>
+
+<pre class="brush: js">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</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.TextTrack.cuechange_event")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{glossary("WebVTT")}}</li>
+</ul>
diff --git a/files/ja/web/api/texttrack/index.html b/files/ja/web/api/texttrack/index.html
new file mode 100644
index 0000000000..a9084376be
--- /dev/null
+++ b/files/ja/web/api/texttrack/index.html
@@ -0,0 +1,102 @@
+---
+title: TextTrack
+slug: Web/API/TextTrack
+tags:
+  - API
+  - Interface
+  - Media
+  - Reference
+  - TextTrack
+  - TopicStub
+  - Web
+  - WebVTT
+  - インターフェイス
+translation_of: Web/API/TextTrack
+---
+<div>{{APIRef("WebVTT")}}</div>
+
+<div id="interface_description">
+<p><code>TextTrack</code> インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。</p>
+</div>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p class="properties also_inherits"><em>このインターフェイスは {{domxref("EventTarget")}} からプロパティを継承しています。</em></p>
+
+<dl id="property_definitions">
+ <dt>{{domxref("TextTrack.activeCues")}} {{readonlyInline}}</dt>
+ <dd>現在アクティブなテキストトラックキューのセットをリストする {{domxref("TextTrackCueList")}} オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。</dd>
+ <dt>{{domxref("TextTrack.cues")}} {{readonlyInline}}</dt>
+ <dd>トラックのすべてのキューを含む {{domxref("TextTrackCueList")}}。</dd>
+ <dt>{{domxref("TextTrack.id")}} {{readonlyInline}}</dt>
+ <dd>トラックがある場合は、それを識別する {{domxref("DOMString")}}。 ID がない場合、この値は空の文字列 (<code>""</code>) です。 <code>TextTrack</code> が {{HTMLElement("track")}} 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。</dd>
+ <dt>{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}</dt>
+ <dd>トラックのインバンドメタデータトラックディスパッチタイプ（in-band metadata track dispatch type）を示す {{domxref("DOMString")}} を返します。 <em><strong>詳細が必要</strong></em></dd>
+ <dt>{{domxref("TextTrack.kind")}} {{readonlyInline}}</dt>
+ <dd><code>TextTrack</code> が記述するテキストトラックの kind を示す {{domxref("DOMString")}} を返します。 値は <code>TextTrackKind</code> 列挙型のいずれかでなければなりません。</dd>
+ <dt>{{domxref("TextTrack.label")}} {{readonlyInline}}</dt>
+ <dd>テキストトラックのラベルがあれば、それを含む人間が読める {{domxref("DOMString")}}。 それ以外の場合、これは空の文字列（<code>""</code>）になります。 空の文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。</dd>
+ <dt>{{domxref("TextTrack.language")}} {{readonlyInline}}</dt>
+ <dd>テキストトラックの内容が書かれているテキスト言語を指定する {{domxref("DOMString")}}。 値は、HTML の lang 属性と同じように、IETF の<a href="https://tools.ietf.org/html/bcp47">言語を識別するためのタグ</a>（<a href="https://tools.ietf.org/html/bcp47">BCP 47</a>）文書で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は <code>"en-US"</code>、ブラジルポルトガル語の場合は <code>"pt-BR"</code> になります。</dd>
+ <dt>{{domxref("TextTrack.mode")}}</dt>
+ <dd>トラックの現在のモードを指定する {{domxref("DOMString")}}。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値は<a href="/ja/docs/Web/API/TextTrack/mode#Text_track_mode_constants">テキストトラックモード定数</a>にリストされています。既定値は <code>disabled</code> ですが、 {{HTMLElement("track")}} 要素の {{htmlattrxref("default", "track")}} 論理属性が指定されていた場合は、既定のモードは <code>started</code> になります。</dd>
+</dl>
+
+<h2 id="Events" name="Events">イベント</h2>
+
+<dl id="event_handler_property_definitions">
+ <dt>{{domxref("TextTrack.cuechange_event","cuechange")}}</dt>
+ <dd>キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。<br>
+ {{domxref("TextTrack.oncuechange","oncuechange")}} プロパティからも利用できます。</dd>
+</dl>
+
+<h2 id="methods" name="methods">メソッド</h2>
+
+<p class="methods also_inherits"><em>このインターフェイスは {{domxref("EventTarget")}} からもメソッドを継承しています。</em></p>
+
+<dl id="method_definitions">
+ <dt>{{domxref("TextTrack.addCue()")}}</dt>
+ <dd>({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューをトラックのキューのリストに追加します。</dd>
+ <dt>{{domxref("TextTrack.removeCue()")}}</dt>
+ <dd>トラックのキューのリストから ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューを取り除きます。</dd>
+</dl>
+
+<dl id="method_definitions_obsolete">
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>作成中</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}</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.TextTrack")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a></li>
+ <li>{{domxref("TextTrackCueList")}}</li>
+ <li>{{domxref("VTTCue")}}</li>
+ <li>{{HTMLElement("track")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+</ul>
diff --git a/files/ja/web/api/texttrack/mode/index.html b/files/ja/web/api/texttrack/mode/index.html
new file mode 100644
index 0000000000..d9a1b2e87a
--- /dev/null
+++ b/files/ja/web/api/texttrack/mode/index.html
@@ -0,0 +1,110 @@
+---
+title: TextTrack.mode
+slug: Web/API/TextTrack/mode
+tags:
+  - Accessibility
+  - NeedsExample
+  - Property
+  - TextTrack
+  - Web
+  - WebVTT
+  - mode
+translation_of: Web/API/TextTrack/mode
+---
+<div>{{APIRef("WebVTT")}}</div>
+
+<p><span class="seoSummary">{{domxref("TextTrack")}} インターフェイスの <strong><code>mode</code></strong> プロパティは、テキストトラックのモードを指定して制御する <code>disabled</code>, <code>hidden</code>, <code>showing</code> のいずれかの文字列です。</span>この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。</p>
+
+<p class="note">さらに、 Safari でサブタイトルのキューを表示するには、独自のビデオプレーヤーコントロールを実装する際に、 <code><strong>default</strong></code> 論理値属性を true に設定する必要があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>mode</var> = <var>textTrack</var>.mode;
+
+<var>textTrack</var>.mode = "disabled" | "hidden" | "showing";</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>トラックの現在のモードを示す {{domxref("DOMString")}}。 テキストトラックモードは、{{anch("Text track mode constants","テキストトラックモード定数")}}にリストされている値の1つです。</p>
+
+<h4 id="Text_track_mode_constants" name="Text_track_mode_constants">テキストトラックモード定数</h4>
+
+<p>テキストトラックモードは IDL 列挙型 <code>TextTrackMode</code> を使用して識別されることもあり、次のいずれかの値にする必要があります。</p>
+
+<dl>
+ <dt><code>disabled</code></dt>
+ <dd>テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが {{htmlattrxref("default", "track")}} 論理値属性を持っている場合の既定値は <code>showing</code> です。</dd>
+ <dt><code>hidden</code></dt>
+ <dd>テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの {{domxref("TextTrack.cues")}} プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの {{domxref("TextTrack.activeCues", "activeCues")}} プロパティに）保持しており、イベントは対応する時間に発生します。</dd>
+ <dt><code>showing</code></dt>
+ <dd>テキストトラックは現在有効になっており、表示しています。トラックのキューリストをまだ取得していない場合は、すぐに取得します。 {{domxref("TextTrack.activeCues", "activeCues")}} リストは維持されており、イベントは適切なタイミングで発生します。 トラックのテキストも、スタイリングとトラックの {{domxref("TextTrack.kind", "kind")}} に基づいて適切に描画します。</dd>
+</dl>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p><code>mode</code> の既定値は、 {{htmlattrxref("default", "track")}} 論理値属性が指定されていない場合は <code>disabled</code> で、指定されている場合の <code>mode</code> の既定値は <code>showing</code> です。テキストトラックが <code>disabled</code> の状態で読み込まれると、対応する WebVTT ファイルは、状態が <code>showing</code> または <code>hidden</code> のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。</p>
+
+<p>しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために {{event("load")}} イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に <code>disabled</code> になっていた場合、キューの読み込みを起動するために <code>mode</code> を <code>hidden</code> または <code>showing</code> のいずれかに変更しなければならないことを意味しています。</p>
+
+<p>モードが <code>showing</code> の場合、テキストトラックはその {{domxref("TextTrack.kind", "kind")}} によって異なる方法で実行されます。 一般に次のとおりです。</p>
+
+<ul>
+ <li><code>kind</code> が <code>subtitles</code> (字幕) または <code>captions</code> (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。</li>
+ <li><code>kind</code> が <code>descriptions</code> (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。</li>
+ <li><code>kind</code> が <code>chapters</code>（チャプター、章）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの {{domxref("TextTrackCue.pauseonExit", "pauseOnExit")}} プロパティを <code>true</code> に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず <code>mode</code> を <code>showing</code>に設定します。</p>
+
+<pre class="brush: js notranslate">window.addEventListener("load", event =&gt; {
+  let trackElem = document.querySelector("track");
+  let track = trackElem.track;
+
+  track.mode = "showing";
+
+  for (let index=0; index &lt; track.cues.length; index++) {
+    let cue = track.cues[index];
+    cue.pauseOnExit = true;
+  };
+});</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', '#dom-texttrack-mode', 'mode') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<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.TextTrack.mode")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a></li>
+ <li>{{domxref("TextTrack")}}</li>
+ <li>{{domxref("TextTrackList")}}</li>
+ <li>{{domxref("TextTrackCueList")}}</li>
+ <li>{{domxref("VTTCue")}}</li>
+ <li>{{HTMLElement("track")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+</ul>