<track>: 埋め込みテキストトラック要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<track>
は HTML の要素で、メディア要素 (<audio>
および <video>
) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。トラックは WebVTT 形式 (.vtt
ファイル) を用います。
試してみましょう
コンテンツカテゴリー | None |
---|---|
許可されている内容 | なし。この要素は空要素です。 |
タグの省略 | 空要素であるため開始タグは必須、また終了タグを置いてはなりません。 |
許可されている親要素 | |
暗黙の 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
にも送信されます。
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
例
<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