<track> 動画や音声ファイルに字幕やキャプションを追加する

<track>タグの説明

<track>は、動画や音声ファイルに字幕やキャプションを追加するために使用します。このタグを用いることで、メディア要素にキュー、メタデータ、テキストトラックを簡単に追加することができます。

表示するテキストトラックは、WebVTTなどのブラウザがサポートしている形式で保存された外部ファイルを、src属性で読み込んで使用します。

キューデータや字幕情報を動画ファイルと切り離した状態で管理することで、コンテンツに柔軟性と拡張性を持たせることができます。<track>要素を使いこなすことで、コンテンツの操作や管理が容易になり、<audio>と<video>の付加価値を高めることが可能となりました。

<track>タグの特徴

• この要素は、<audio>および<video>の中に設置可能です。それ以外では機能しません。
• レイアウトには影響を与えません。メディアソースに対してテキストデータを与えます。
• この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。

<track>に指定できる主な属性

src

テキストトラックを読み込む外部ファイルが置かれたURLを指定します。

kind

テキストトラックの種類をキーワードで指定します。

srclang

テキスデータの言語を指定します。

label

テキストトラックの名前を指定します。

default

テキストトラックを複数設置した場合に、優先的に使用するものを指定します。

<track>の使い方とサンプル

このタグを使ったマークアップのサンプルです。参照先のWebVTT（Web Video Text Tracks）形式のファイル（.vtt）の記述例も掲載します。

<video autoplay controls width="480"height="270">
	<source src="vtr.webm" type="video/webm">
	<source src="vtr.mp4" type="video/mp4">
	<track kind="captions" label="English captions" src="vtr_en.vtt" srclang="en" default>
	<track kind="captions" label="Japanese captions" src="vtr_ja.vtt" srclang="ja">
	<p>
		<a href="vtr.mp4">動画ファイルを保存後に再生して下さい。</a>
	</p>
</video>

WEBVTT

1
00:00:10.000 --> 00:00:13.000
1のタイミングで表示するキャプションを記述

2
00:00:13.100 --> 00:00:18.800
2のタイミングで表示するキャプションを記述

3
00:00:20.000 --> 00:00:25.000
3のタイミングで表示するキャプションを記述