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

コンテンツカテゴリ なし
許可されている内容 なし。この要素は空要素です。
タグの省略 空要素であるため開始タグは必須、また終了タグを置いてはなりません。
許可されている親要素 メディア要素で、任意のフローコンテンツより前。
許可されている ARIA ロール なし
DOM インターフェイス HTMLTrackElement

属性

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

default
この属性は、別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの track 要素のみで使用できます。
kind
どのように使用するトラックであるかをを表します。省略した場合、デフォルトの種類は subtitles です。属性が存在しない場合は 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 属性で設定します。使用できる値は 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 の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 Doesn’t work for fullscreen video.
Chrome Android 完全対応 25
補足
完全対応 25
補足
補足 Doesn’t work for fullscreen video.
Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
defaultChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
kindChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
labelChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
srcChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり
srclangChrome 完全対応 23Edge 完全対応 ありFirefox 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
IE 完全対応 10Opera 完全対応 12.1Safari 完全対応 6WebView Android 完全対応 4.4Chrome Android 完全対応 25Edge Mobile 完全対応 ありFirefox Android 完全対応 31
完全対応 31
未対応 24 — 50
無効
無効 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.
Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

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

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