<track src="">

更新日
仕様 HTML Living Standard
分類 ---
利用場所 video要素またはaudio要素の子要素として(ただし、フロー・コンテンツよりも前)
内容 無し(空要素)

track要素は、動画や音声に対するテキストトラック(字幕など)を指定します。この要素は、video要素またはaudio要素の子要素として使用します。

  • audio要素に対するテキストトラックは、現時点ではほとんどのブラウザで対応していないようです。

<track src="example_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>

属性
必須属性
src="" テキストトラックの指定 URL テキストトラックファイルのURL
任意属性
kind="" テキストトラックの種類 subtitles 翻訳の字幕(省略時の既定値)
captions 難聴用のキャプション
descriptions 音声合成用のテキスト
chapters チャプタータイトル
metadata スクリプト用のトラック情報
srclang="" テキストトラックの記述言語 言語コード jaenzh、等
label="" テキストトラックのタイトル テキスト 任意のタイトル(空文字列は不可)
default テキストトラックを有効にする default 値は省略可能
  • kind属性を省略した場合は subtitles が使用され、無効な値が指定された場合は metadata が使用されます。
  • kind属性subtitles を指定している場合(またはkind属性を省略している場合)は、srclang属性必須となります。

テキストトラックの指定方法

テキストトラックファイルのURLを、src属性で指定します。例えば次のように記述した場合は、example.vtt が読み込まれることになります。

<track src="example.vtt" srclang="ja">
  • テキストトラックファイルは、WebVTT(Web Video Text Tracks)形式で作成します。拡張子は .vtt になります。
  • 基本的には、動画等を埋め込む文書とテキストトラックファイルは、同一のオリジンに置かれている必要があります。

track要素の配置位置

track要素は、video要素(またはaudio要素)内のsource要素よりも後、かつ代替コンテンツよりも前に配置する必要があります。

<video>

<source src="example.mp4">
<source src="example.webm">
<source src="example.ogv">

<track src="example_ja.vtt" srclang="ja" label="日本語字幕" default>
<track src="example_en.vtt" srclang="en" label="English Subtitles">
<track src="example_cap.vtt" kind="captions" srclang="ja" label="難聴用キャプション">

代替コンテンツはtrack要素の後に配置します。

</video>

上記のように、必要に応じて複数のtrack要素を配置することもできます。この例では、1つ目のtrack要素は日本語版の字幕(デフォルトで有効)、2つ目は英語版の字幕、3つ目は音声を聞くことができない場合のキャプションを指定しています。

kind属性について

kind属性は、テキストトラックの種類を指定します。

<track src="example_ja.vtt" kind="subtitles" srclang="ja">

指定できる値は次の5つです。

subtitles (属性省略時の既定値)
翻訳の字幕: 音声は聞こえるが、その言語が理解できない場合の字幕です。英語の動画に日本語の字幕を入れる場合などに使用します。
captions
難聴用のキャプション: 音声を聴くことができない場合のキャプションです(会話やナレーションの書き起こし、効果音の説明など)。耳の不自由な人や、無音声で見る人への字幕として使用します。※キャプションとして作成するのであれば、翻訳版もこの種類に含まれます。
descriptions
音声合成用のテキスト: 映像を見ることができない場合のテキストです(映像の内容を説明するテキストで、音声合成で出力されることを想定したもの)。目の不自由な人や、スクリーンを見ずに利用する人への音声として使用します。
chapters
チャプタータイトル: 頭出し用のタイトルです。このタイトルがインターフェース上に表示され、シーンの切り替え操作を行えるようになります。
metadata
スクリプト用のトラック情報: スクリプトから利用するためのトラックです。これはインターフェース上には表示されません。

srclang属性について

srclang属性は、テキストトラックの記述言語を指定します。この属性は、トラックの種類が翻訳の字幕(subtitlesの場合は必須となります。

<track src="example_ja.vtt" srclang="ja">
  • kind属性を省略した場合にも、srclang属性が必須となります。(kind属性の既定値が subtitles なので)

label属性について

label属性は、テキストトラックのタイトルを指定します。このタイトルは、各トラック(subtitlescaptionsdescriptions)をインターフェース上に一覧表示する際に使用されます。

<track src="example_ja.vtt" srclang="ja" label="日本語字幕">
  • この属性を指定する場合は、値が空であってはなりません。
  • この属性を省略した場合は、タイトルの内容はブラウザ側に任されることになります。

default属性について

default属性は、そのテキストトラックがデフォルトで有効になるように指定します。

<track src="example_ja.vtt" srclang="ja" default>

ただし、次のような状態にある各track要素は、1つのvideo要素(またはaudio要素)内に1つだけしか配置できません。

  • kind属性が subtitles または captions 状態で、かつdefault属性が指定されたtrack要素。
  • kind属性が descriptions 状態で、かつdefault属性が指定されたtrack要素。
  • kind属性が chapters 状態で、かつdefault属性が指定されたtrack要素。
  • kind属性が metadata 状態で、かつdefault属性が指定されたtrack要素の場合は、配置数に制限はありません。

配置に関する注意事項

kind属性、srclang属性、label属性、この3つの指定内容の組み合わせは、1つのvideo要素(またはaudio要素)内で重複させてはなりません。

次の例では、双方のkind属性、srclang属性、label属性の指定内容が全て同じなので、誤りということになります。

<video src="example.mp4">

<track src="example1.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>
<track src="example2.vtt" kind="subtitles" srclang="ja" label="日本語字幕">

</video>

同じ理由から、次の例も誤りということになります。(双方とも同じ属性を省略しています)

<video src="example.mp4">

<track src="example1.vtt" srclang="ja" default>
<track src="example2.vtt" srclang="ja">

</video>

WebVTTファイルに関して

以下は、WebVTTファイルの作成に関する必要最小限の説明となります。

WebVTTファイルの内容は、次のような感じで記述します。このファイルをUTF-8で作成し、拡張子に .vtt を指定して保存すると、テキストトラックとして読み込めるようになります。

WEBVTT

00:01.000 --> 00:05.000
最初の字幕テキスト

00:07.000 --> 00:11.000
次の字幕テキスト
複数行で表示することも可能

00:13.000 --> 00:17.000
最後の字幕テキスト
  • 最初に WEBVTTと記述して、その後に空白行を入れます。
  • 00:01.000 --> 00:05.000といった部分は、その字幕を表示する時間を表します。(この例では、1秒目から5秒目まで表示)
  • 時間指定の下は、字幕として表示するテキストになります。(改行を入れることで複数行の字幕を表示することも可能)
  • それぞれの字幕は空白行で区切ります。

時間指定の後に各種のオプションを設定することで、字幕の表示位置や縦書きなどを指定することもできます。(興味のある方は前述のリンク先をご覧ください)

旧HTMLからの変更点
  • HTML5:track要素が定義されました。

使用例

2種類のテキストトラック(キャプション)を設定した例

<video poster="media/poster.jpg" preload="metadata" width="640" height="360" controls muted>

<source src="media/example.webm" type="video/webm">
<source src="media/example.mp4" type="video/mp4">

<track src="media/example_cap_ja.vtt" kind="captions" srclang="ja" label="キャプション(日本語)" default>
<track src="media/example_cap_en.vtt" kind="captions" srclang="en" label="Caption(English)">

<p>動画を再生することができませんでした。</p>

</video>

表示例
  • 上記のサンプル動画は、サーバーの転送量を抑えるために超低画質で作成しています(データサイズは930KB前後)。
  • 音楽データはA Year Ago by NEFFEX(YouTube オーディオライブラリ)を使わせていただきました。(初期状態ではミュートされています)
  • ブラウザの幅を狭くしていくと、それに合わせて動画の表示サイズも縮小されていきます。(設定方法については、このページのソースコードを参考にしてください)