Yugien - 遊戯苑
テーマ

HTML

この記事では、動画や音声に字幕・キャプション・音声解説などを追加する<track>要素と、メディアのアクセシビリティを高める基本を初心者向けに説明します。

この記事でわかること

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

はじめに

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>

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の機能

トラックの種類 (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などのアクセシビリティガイドラインを踏まえた設計を行う。

これらのポイントを抑えることで、よりユーザーに配慮した、かつ運用しやすい動画・音声コンテンツを提供できます。アクセシビリティと使い勝手、そしてコンテンツの訴求力を同時に向上させるため、ぜひ<track>要素の活用を検討してみてください。