MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

track 要素

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>

仕様

仕様書 策定状況 コメント
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 より既存のトラックデータを適切に破棄して、新しいトラックデータを読み込んで実行するなどの処理を行うようになりました。

関連情報

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

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