<track src="">

ブラウザ
  • IE
  • Cr
  • Fx
分類 ---
利用場所 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="" テキストトラックの記述言語 言語コード jaenzh、等
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属性は、トラックのタイトルを指定します。このタイトルは、各トラック(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>

使用例


<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>