<track src="">
| ブラウザ |
|
|---|---|
| 分類 | --- |
| 利用場所 | video要素またはaudio要素の子要素として(ただし、フロー・コンテンツよりも前) |
| 内容 | 空 |
track要素は、動画や音声にテキストトラック(字幕など)を埋め込みます。この要素は、video要素、またはaudio要素の子要素として使用します。
<track src="example_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性 | |||
src="" |
テキストトラックの指定 | URL | 埋め込むテキストトラックのURL |
| 任意属性 | |||
kind="" |
トラックの種類 | subtitles |
翻訳の字幕 (初期値) |
captions |
難聴用の字幕 | ||
descriptions |
音声合成用のテキスト | ||
chapters |
頭出し用のタイトル | ||
metadata |
スクリプト用のデータ | ||
srclang="" |
テキストトラックの記述言語 | 言語コード | ja、en、zh、等 |
label="" |
トラックのタイトル | テキスト | 任意のタイトル(空文字列は不可) |
default |
トラックを有効にする | (default) |
値は省略可能 |
- kind属性に
subtitlesを指定している場合(またはkind属性がない場合)は、srclang属性が必須となります。
テキストトラックの埋め込み方法
テキストトラックファイルのURLを、src属性で指定します。例えば次のように記述した場合は、
が埋め込まれることになります。example.vtt
<track src="example.vtt" srclang="ja">
- テキストトラックは、WebVTTというファイルフォーマットで作成するようです。拡張子は .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属性は、トラックのタイトルを指定します。このタイトルは、各トラック(subtitles、captions、descriptions)をインターフェース上にリスト表示する際に使用されます。
<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>
使用例
<video width="320" height="180" controls>
<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm">
<source src="example.ogv" type="video/ogg">
<track src="example_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
<track src="example_en.vtt" kind="subtitles" srclang="en" label="English Subtitles">
<track src="example_cap.vtt" kind="captions" srclang="ja" label="難聴用字幕">
<track src="example_desc.vtt" kind="descriptions" srclang="ja" label="音声合成用">
<p>動画を再生することができませんでした。</p>
</video>