意外としっているようで知られていないこともある、HTML5で導入されたtrack要素についてを今回は紹介します。
track要素とは
track要素は、audioやvideo要素と共に使用され、映像や音声に同期させたテキストトラックを指定するための要素です。
これにより、字幕、キャプション、説明文、チャプター情報などをメディアに追加することができます。
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>上記の例では、movie.mp4というビデオに対して英語の字幕ファイルsubtitles_en.vttが追加されています。
track要素の属性
src
src属性は、テキストトラックファイルのURLを指定します。
このファイルには、WebVTT（Web Video Text Tracks）フォーマットで字幕やキャプションが記述されています。
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">kind
kind属性は、テキストトラックの種類を指定します。利用可能な値には、subtitles、captions、descriptions、chapters、metadataがあります。
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">srclang
srclang属性は、トラックの言語を指定します。言語コードは、ISO 639-1の2文字の言語コードを使用します。
<track srclang="en" kind="subtitles" src="subtitles_en.vtt" label="English">label
label属性は、ユーザーに表示されるトラックの名前を指定します。これにより、ユーザーは複数のトラックから選択する際に、どのトラックがどの言語や種類のものかを判断できます。
<track label="English" kind="subtitles" src="subtitles_en.vtt" srclang="en">default
default属性は、ページ読み込み時にこのトラックをデフォルトで有効にするかどうかを指定します。
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>使用される事例
track要素は以下のようなシナリオで使用されます：
- 字幕: 映像に対して複数言語の字幕を提供する場合。
- キャプション: 聴覚障害者向けに音声情報をテキストで提供する場合。
- 説明文: 視覚障害者向けに映像の内容を音声で説明する場合。
- チャプター情報: 映像の特定のシーンにジャンプするための目次を提供する場合。
まとめ
track要素はメディアコンテンツに対してテキストトラックを追加するための強力なツールです。
字幕、キャプション、説明文、チャプター情報などを提供することで、ユーザーエクスペリエンスを向上させることができます。
以前紹介したJISなどとの関連がある内容になると思いますので、是非そちらの記事もご覧いただけたらと思います。
