<track>: 埋め込みテキストトラック要素
=======================

**`<track>`** は HTML の要素で、メディア要素 (`<audio>` および `<video>`) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。トラックは WebVTT 形式 (`.vtt` ファイル) を用います。

試してみましょう
--------

|  |  |
| --- | --- |
| コンテンツカテゴリー | None |
| 許可されている内容 | なし。この要素は空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須、また終了タグを置いてはなりません。 |
| 許可されている親要素 | メディア要素、 `<audio>` または `<video>` |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTrackElement` |

属性
--

この要素にはグローバル属性があります。

`default`

この属性は、別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの `track` 要素のみで使用できます。

`kind`

どのように使用するトラックであるかをを表します。省略した場合、既定の種類は `subtitles` です。属性に無効な値が含まれている場合は `metadata` を使用します (バージョン 52 より前の Chrome は、無効な値を `subtitles` として扱っていました)。以下のキーワードが利用できます。

* `subtitles`
    + 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。
    + 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。
* `captions`
    + クローズドキャプションは書写、あるいは音声の翻訳を提供します。
    + これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。
    + 耳が不自由なユーザーや音声をミュートしている場合に適しています。
* `descriptions`
    + テキストによる動画コンテンツの説明です。
    + 目が不自由なユーザーや動画を視聴できない場合に適しています。
* `chapters`
    + チャプタータイトルは、ユーザーがメディアリソースの操作を行う際に使用することを意図しています。
* `metadata`
    + スクリプトが使用するトラック情報です。ユーザーには見えません。

`label`

使用可能なテキストトラックを一覧表示する際にブラウザーが使用する、ユーザーに見せるテキストトラックのタイトルです。

`src`

トラック（`.vtt` ファイル）のアドレスです。有効な URL であることが必要です。この属性は定義する必要があり、 URL の値は文書として — `track` 要素の親要素である `<audio>` または `<video>` が `crossorigin` 属性を持たない限り — 同じオリジンを持たなければなりません。

`srclang`

テキストデータの言語です。有効な BCP 47 言語タグであることが必要です。`kind` 属性に `subtitles` を設定した場合は、`srclang` 属性を定義しなければなりません。

使用上の注意
------

### トラックのデータの種類

`track` 要素でメディアに付加するデータの種類は `kind` 属性で設定します。使用できる値は `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。

メディア要素は `kind`、`srclang` および `label` が同一の `track` を複数持つことはできません。

### キューの変更の検出

配下にある `TextTrack` は `track` プロパティで示され、現在表示されているキューが変更される度に `cuechange` イベントを受信します。これは、このトラックがメディア要素に関連付けられていない場合でも発生します。

このトラックがメディア要素に関連付けられている場合、 `<track>` を `<audio>` または `<video>` 要素の子として使用すると、 `cuechange` イベントは `HTMLTrackElement` にも送信されます。


```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```

例
-


```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-track-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVTT テキストトラック形式
* `HTMLMediaElement.textTracks`