HTML

The <track> element in HTML, when used in combination with <video> or <audio>, is an element that adds subtitles, captions, and other text tracks to enhance media accessibility and support for multiple languages.

track 要素

はじめに
基本的な役割と特徴
- テキストトラックとは
- <track>要素の主な特徴
<track>要素の属性
基本的なコード例
WebVTTファイルの基本構造
- その他のWebVTTの機能
トラックの種類 (kind属性) とユースケース
アクセシビリティとベストプラクティス
高度な活用方法
- JavaScriptによるトラック操作
- テキストトラックを利用したインタラクティブな機能
実装上の注意点
まとめ

はじめに

HTML5で追加された<track>要素は、主に<video>や<audio>要素と組み合わせて使用し、字幕やキャプション、音声解説などのテキストトラックを設定する際に利用されます。ユーザーが動画や音声を視聴するときに、言語サポートやアクセシビリティを向上させるために不可欠な要素です。

基本的な役割と特徴

テキストトラックとは

テキストトラック(Text Track) は、<video>または<audio>などのメディア要素と組み合わせることで、字幕・キャプション・音声解説など、ユーザーが視覚や聴覚を補うための追加情報を提供するものです。

代表的な形式として、WebVTT(Web Video Text Tracks Format) がよく使われます。

.vtt 拡張子を持つテキストファイルで、字幕表示のタイミングや位置を指定することができます。

`<track>`要素の主な特徴

<track>は、メディア要素に紐づくテキストトラックを読み込むためのHTML要素です。

<track>は単独の要素であり、終了タグを持たない (空要素) という特徴があります。

1つのメディアに対して、複数の <track>要素を指定することが可能です。たとえば、多言語の字幕トラックを複数用意する際にそれぞれの言語用に <track>要素を追加します。

`<track>`要素の属性

以下の属性を設定することで、トラックの種類や言語、デフォルト設定などを細かく制御できます。

src

テキストトラックのファイル (通常は.vtt形式) のURLを指定します。

例 : src="subtitles_en.vtt"

kind

トラックがどのような種類の情報を提供するかを指定します。主に以下の値がよく使われます:

subtitles: 字幕 (翻訳字幕または同じ言語の字幕)
captions: キャプション (聴覚障害者向けに音声情報の説明も含む)
descriptions: 音声解説 (視覚障害者向けに映像内容を音声で説明)
chapters: チャプター情報 (動画内の区切りポイントを示す)
metadata: メタデータ (再生中にスクリプトなどが参照できる追加情報)

使用例 : kind="subtitles"

srclang

トラックの言語を示します (BCP 47で定義された言語タグを用いるのが一般的)。

例 : srclang="en" (英語)

label

ユーザーが字幕トラックを選択するときにわかりやすいように付けるラベルです。

例 : label="English"

default

複数のテキストトラックがある場合に、どのトラックをデフォルトとして使用するかを指定するブール属性です。1つのメディア要素内では、基本的にdefaultを付けられるのは1つのトラックのみとすることが推奨されます。

使用例 : default

基本的なコード例

以下に、動画に英語字幕を付けた最もシンプルな例を示します。

HTML

<video controls width="640" height="360">
	<source src="sample.mp4" type="video/mp4">
	<track 
		src="subtitles_en.vtt" 
		kind="subtitles" 
		srclang="en" 
		label="English" 
		default>
</video>

<video>要素にcontrols属性を付けることで、再生・停止などのコントロールが表示されます。
<source>要素で、動画ファイル (ここでは sample.mp4) を指定します。
<track>要素で字幕情報 (subtitles_en.vtt) を読み込みます。
kind="subtitles" と srclang="en" で英語の字幕であることを示し、label="English"でわかりやすい表記を提供します。
default属性を加えると、この字幕トラックが自動的に選択されます。

WebVTTファイルの基本構造

src属性で指定される.vttファイル (WebVTT形式) は、字幕やキャプションのテキストと、その表示タイミングを定義します。簡単な例を以下に示します。

vtt

WEBVTT

00:00:00.000 --> 00:00:04.000
Hello, welcome to our video!

00:00:04.500 --> 00:00:08.000
We will show you how to use the <track> element.

WEBVTTという宣言から始まります。
各字幕は、開始時間 --> 終了時間の形でタイムスタンプを記述し、その後の行で実際の字幕テキストを書きます。
タイムスタンプはhh:mm:ss.mmm (時間:分:秒.ミリ秒)形式で記述可能です。
字幕のテキスト行の間は空行で区切る必要があります。

その他のWebVTTの機能

コメントやメタ情報を挿入することもでき、たとえば行頭にNOTEを書いて解説を入れられます。
スタイルや位置指定が可能で、特定のCSS風の記法を使って字幕の表示位置や見た目を変えることもできます。

トラックの種類 (`kind`属性) とユースケース

<track>要素にはいくつかの種類 (kind) が定義されており、それぞれ適切に使い分けることでアクセシビリティや機能性を向上させることができます。

subtitles: 翻訳字幕や、同言語での補足字幕として使われます。; 聴覚障害者向けの情報 (SEや話者の名前など) は通常含みません。
captions: キャプションは聴覚障害を持つ方が動画の内容を把握できるよう、音楽や効果音、話者情報なども含むことが推奨されます。; 例 : 「[音楽]」や「(女性の声) 次の話題に入りましょう」などの情報を含める。
descriptions: 視覚障害を持つ方のために、映像で起こっている事象を文章で説明します。; 例 : 「(主人公がドアを静かに開けて部屋に入る)」など、映像的な補足説明。
chapters: 動画をチャプター (章) 単位で分割し、その目次的情報を提供します。; 一部のプレーヤーでは、この情報をもとにユーザーが見たいチャプターへスキップできるUIを提供する場合があります。
metadata: スクリプトで処理しやすいメタ情報 (例: 商品リンク、クイズの埋め込み情報など) を付加するために使います。再生中、特定のタイミングでJavaScriptによってメタ情報を取得し、画面上に表示したりします。; ユーザーには直接表示されないことが一般的です。

アクセシビリティとベストプラクティス

多言語サポート

多言語のユーザー向けに、複数の字幕やキャプションの選択肢を提供すると、アクセシビリティやユーザー満足度が向上します。

例えば、英語と日本語の字幕を用意する場合、以下のように<track>要素を2つ並べることが可能です。

HTML

<video controls>
	<source src="sample.mp4" type="video/mp4">
	<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
	<track src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語">
</video>

聴覚・視覚障害者への配慮

kind="captions"とkind="descriptions"を適切に用いることで、聴覚または視覚障害者がコンテンツを理解できるようになります。

特にキャプションでは、話者の名前や音楽・効果音なども記載するとより良いです。

フォールバック戦略

一部の古いブラウザはHTML5のテキストトラックに対応していない可能性があります。その場合、コンテンツ制作者側でテキストトラックを表示するためのJavaScriptやライブラリ (例: vtt.js等) を導入するか、あるいは外部字幕を埋め込んだ動画ファイルそのものを提供するなどのフォールバックを検討します。

高度な活用方法

JavaScriptによるトラック操作

<track>要素で読み込まれたテキストトラックは、JavaScriptからアクセスしたり制御したりできます。

HTMLMediaElement (例: <video>) の textTracks プロパティで、動画に関連するすべてのテキストトラックを取得できます。

各テキストトラックは TextTrack オブジェクトとして扱われ、mode (表示モード) を showing, hidden, disabled などに切り替えることが可能です。

コード例

HTML

<video id="myVideo" controls>
	<source src="sample.mp4" type="video/mp4">
	<track id="enTrack" src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
	<track id="jaTrack" src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語">
</video>

<script>
	const video = document.getElementById('myVideo');
	const tracks = video.textTracks;

	// テキストトラックを確認
	for (let i = 0; i < tracks.length; i++) {
		console.log(`Track ${i}:`, tracks[i].label, tracks[i].kind);
	}

	// 英語字幕だけを表示させる場合 (0番目が英語トラックだと仮定)
	tracks[0].mode = 'showing';
	// 日本語字幕を非表示にする場合 (1番目が日本語トラック)
	tracks[1].mode = 'disabled';
</script>

こうした制御を使えば、ユーザーの言語設定に応じてスクリプトで自動的に適切な字幕をオンにするなど、よりカスタマイズされた体験を提供できます。

テキストトラックを利用したインタラクティブな機能

kind="metadata"のトラックを使うと、動画再生中に特定の時間帯でイベントを起こすことが可能です。

例えば、商品の宣伝動画において再生中に関連商品リンクを表示したり、学習動画でクイズを表示するといったインタラクティブなコンテンツを作ることができます。

WebVTTのファイル内にメタデータを記述し、JavaScriptからcuechangeイベントを利用して何らかのDOM操作を行うのが一般的です。

実装上の注意点

ファイルパスやエンコードの正確性: src属性に指定する.vttファイルのパスが正しいか、またWebVTTファイルが正しい形式と文字エンコード (通常UTF-8) で保存されているか確認しましょう。
複数のdefault属性: 原則として、同一の<video>要素内にdefault属性を設定できるのは1つだけです。複数指定は推奨されません。
ブラウザサポートのチェック: HTML5対応が不十分な環境では、字幕が表示されない可能性があります。可能であればJavaScript等で対応を行うか、代替手段を用意しましょう。
アプリやフレームワークとの組み合わせ: ReactやVueなどのフレームワークを使う際は、仮想DOM上で<track>要素の扱いに注意が必要です。トラックファイルが正しく読み込まれているかの検証が必要になります。
アクセシビリティガイドラインへの準拠: WCAG(Web Content Accessibility Guidelines)などのガイドラインに沿った字幕・キャプションの提供を心掛けましょう。

まとめ

HTML5の<track>要素は、メディアコンテンツに字幕やキャプション、チャプターなどのテキストトラックを追加するために非常に重要な役割を果たします。アクセシビリティや多言語対応の観点からも、正しく理解し、効果的に利用することが求められます。

初心者向けポイント:: <video>や<audio>タグの中に<track>タグを入れる。; srcで字幕ファイルを指定し、kindやsrclang、labelで情報を付加する。; WebVTT形式の字幕ファイル (.vtt) では、タイムスタンプと字幕テキストの記法を守る。
中級者以上向けポイント:: captions, descriptions, metadataなど、kind属性を使い分けて高度なアクセシビリティ機能やインタラクティブ機能を提供する。; TextTrackオブジェクトをJavaScriptで制御し、ユーザーの環境や操作に応じた切り替えを行う。; 多言語字幕対応やフォールバック戦略、WCAGなどのアクセシビリティガイドラインを踏まえた設計を行う。