We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 属性で設定します。使用できる値は subtitlescaptionsdescriptionschaptersmetadata です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。

メディア要素は kindsrclang および 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>

仕様策定状況

仕様書 策定状況 コメント
HTML Living Standard
track element の定義
現行の標準  
HTML5
track element の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応23 あり

31

24 — 502

1012.16
default23 あり

31

24 — 502

1012.16
kind23 あり

31

24 — 502

1012.16
label23 あり

31

24 — 502

1012.16
src23 あり

31

24 — 502

1012.16
srclang23 あり

31

24 — 502

1012.16
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応251251 あり

31

24 — 502

? ? あり
default2525 あり

31

24 — 502

? ? あり
kind2525 あり

31

24 — 502

? ? あり
label2525 あり

31

24 — 502

? ? あり
src2525 あり

31

24 — 502

? ? あり
srclang2525 あり

31

24 — 502

? ? あり

1. Doesn’t work for fullscreen video.

2. From version 24 until version 50 (exclusive): this feature is behind the media.webvtt.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss
最終更新者: mfuji09,