HTML track 要素はメディア要素 (<audio> および <video>) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定できます。トラックは WebVTT (Web Video Text Tracks) 形式 (.vtt ファイル) で整形します。
| コンテンツカテゴリー | なし |
|---|---|
| 許可された内容 | なし。この要素は 空要素 です。 |
| タグの省略 | 空要素であるため開始タグは必須、また終了タグを置いてはなりません。 |
| 許可された親要素 | メディア要素で、任意の フローコンテンツ より前。 |
| 許可された ARIA ロール | なし |
| DOM インターフェイス | HTMLTrackElement |
属性
この要素は グローバル属性 を持ちます。
default- この属性は、別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの
track要素のみで使用できます。 kind- どのように使用するトラックであるかをを表します。省略した場合、デフォルトの種類は
subtitlesです。属性が存在しない場合はsubtitlesを使用します。属性に無効な値が含まれている場合はmetadataを使用します (バージョン 52 より前の Chrome は、無効な値をsubtitlesとして扱っていました)。以下のキーワードを使用できます:subtitles- 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。
- 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。
captions- クローズドキャプションは書写、あるいは音声の翻訳を提供します。
- これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。
- 耳が不自由なユーザーや音声をミュートしている場合に適しています。
descriptions- テキストによる動画コンテンツの説明です。
- 目が不自由なユーザーや動画を視聴できない場合に適しています。
chapters- チャプタータイトルは、ユーザーがメディアリソースの操作を行う際に使用することを意図しています。
metadata- スクリプトが使用するトラック情報です。ユーザーには見えません。
label- 使用可能なテキストトラックを一覧表示する際にブラウザーが使用する、ユーザーに見せるテキストトラックのタイトルです。
src- トラック (
.vttファイル) のアドレスです。有効な URL であることが必要です。この属性は定義しなければなりません。 srclang- テキストデータの言語です。有効な BCP 47 言語タグであることが必要です。
kind属性にsubtitlesを設定した場合は、srclang属性を定義しなければなりません。
使用上の注意
track 要素でメディアに付加するデータの種類は kind 属性で設定します。使用できる値は subtitles、captions、descriptions、chapters、metadata です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。
メディア要素は kind、srclang および label が同一の track を複数持つことができません。
例
<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>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard track element の定義 |
現行の標準 | |
| HTML5 track element の定義 |
勧告 | 最初の定義 |
ブラウザー実装状況
| 機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本サポート | 23 | (有) | 24 (24)[2] | 10 | 12.10 | 6 |
src 属性を設定可能 |
? | ? | 50 (50)[3] | ? | ? | ? |
無効な kind の値を metadata として扱う |
未サポート | ? | 未サポート | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | 25[1] | (有) | 24.0 (24)[2] | 未サポート | 未サポート | 未サポート |
src 属性を設定可能 |
? | ? | 50.0 (50)[3] | 未サポート | 未サポート | 未サポート |
無効な kind の値を metadata として扱う |
未サポート | ? | 未サポート | 未サポート | 未サポート | 未サポート |
[1] Android 版 Chrome では、フルスクリーンの動画で <track> 要素が動作しません。
[2] <track> 要素、HTMLTrackElement インターフェイス、および関連 API は Firefox 24 で実装しました。設定項目 media.webvtt.enabled で制御しており、デフォルトで無効化しています。WebVTT サポートを有効化するには、この設定項目を true に設定します。Firefox 31 より WebVTT をデフォルトで有効化しており、設定項目を false に設定すれば無効化できます。
[3] Firefox 50 より前のバージョンでは src 属性を設定できましたが、値を変更しても適切に処理されませんでした。Firefox 50 より既存のトラックデータを適切に破棄して、新しいトラックデータを読み込んで実行するなどの処理を行うようになりました。