trackタグとは?|メディアに字幕を表示させよう

trackタグとは?|メディアに字幕を表示させよう
博士
<video>タグや<audio>タグで埋め込んだメディアには、字幕を入れることもできるぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<track>タグとは

 

<track>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所video要素またはaudio要素の子要素として(ただし、どのフロー・コンテンツよりも前)
内容


 
 
<track>タグは、動画や音声にテキストトラック(字幕など)を埋め込む際に使用します。
<track>タグは、video要素audio要素の中でのみ使用できます。

track要素は、source要素の後に指定します。
video要素やaudio要素の中に、これらの要素に対応していないブラウザへの代替コンテンツを入れる場合は、source要素、track要素、代替コンテンツの順に記述します。
 
 

src属性

トラックファイルのURLを指定します。
この属性は必須です。

 
 
博士
トラックファイルは、WebVTTというファイルフォーマットで作成するぞ。
 
 

スポンサーリンク

kind属性

トラックの種類を指定します。
指定できる値は以下の通りです。

subtitles会話の書き起こしや翻訳。音声は聞こえるけど、その内容(言葉)が理解できない人向けの字幕として利用されます(デフォルト)。
例えば、英語の動画に日本語の字幕を入れる場合などに使用します。
captions会話の書き起こしや翻訳、効果音、その他関連する音声情報。主に、耳の不自由な人や、無音声で視聴する人に向けた字幕として利用されます。
descriptions動画の内容の説明。主に、目の不自由な人や、スクリーンを見ずに視聴する人に向けて、音声に変換して利用されることを想定しています。
chapters動画のナビゲーション用のチャプター・タイトル。このタイトルがインターフェース上に表示され、シーンの切り替え操作ができるようになります。
metadataスクリプトを利用するための情報。この情報は画面上に表示されません。この属性が指定されていない場合は、「subtitles」として扱われます。

 
 

 
 

srclang属性

トラックの言語を指定します。
日本語は「ja」、英語は「en」、フランス語は「fr」、ドイツ語は「de」などです。

 
 
kind属性の値が「subtitles」のときや、kind属性が指定されていない場合、この属性は必ず指定します。
 
 
博士
kind属性の初期値が「subtitles」のため、kind属性を省略してもsrclang属性の指定は必須じゃ。
 
 

スポンサーリンク

label属性

トラックのタイトルを指定します。
このタイトルは、各トラック(subtitles、captions、descriptions)をインターフェース上にリスト表示する際に利用されます。

label属性の値に空文字を指定することはできません。
また、kind属性とsrclang属性に同じ値を持つtrack要素が複数ある場合は、それぞれのlabel属性に異なる値を指定する必要があります。

以下の場合は、label属性の指定内容が全て同じなので、誤りということになります。

 
 

default属性

track要素で複数のトラックを指定した場合に、デフォルトで有効になるトラックを指定します。
この属性は、以下のいずれかの形式で指定します。

  • default
  • default=”default”
  • default=””

 
 

 
 

スポンサーリンク

使用例

 
 

表示例



 
 

まとめ

動画や音声に字幕を入れる際は、<track>タグを使用します。
 
 

博士
メディアを埋め込むシーンに応じて活用しよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








trackタグとは?|メディアに字幕を表示させよう