動画のクローズドキャプションの作りかた (HTML5 の <video> 要素の場合)

先の記事「音声を伴う動画にはキャプション (字幕) を付ける」で、Web コンテンツとして動画 (音声を伴うもの) を用いる場合、アクセシビリティ上の配慮としてキャプション (字幕) を付けることが求められると書きました。キャプションにはふたつの種類がありますが (オープンキャプションとクローズドキャプション)、今回は、クローズドキャプションの作成方法について、HTML5 の <video> 要素を例に、ご紹介しようと思います。

HTML5 <video> 要素におけるキャプションの読み込み

HTML5には <video> 要素があり、標準仕様として Web ページに動画を埋め込むことができます。その中に <track> 要素を書くことで、動画とは別に用意したキャプションファイル (テキストデータ) を同時に読み込み、動画再生に同期させて字幕を表示することができます。ソースコードは下記のように書きます。

<video controls poster="peekaboo_thumbnail.png">

<source src="peekaboo.mp4" type="video/mp4" />
<source src="peekaboo.webm" type="video/webm" />
<source src="peekaboo.ogv" type="video/ogg" />

<track kind="captions" srclang="ja" label="日本語キャプション" src="peekaboo_caption.vtt" />

</video>

<track> 要素は、様々な用途に使うことができます (kind 属性値として、subtitles、captions、descriptions、chapters、metadata を指定することができます)。このうち、いわゆる字幕としては、「subtitles」または「captions」を kind 属性値として指定することになります。

「subtitles」とは、会話の書き起こしやその翻訳を意味します。例として、映画館で上映される海外映画の日本語字幕があります。これに対し「captions」とは、会話だけでなく、発話者 (誰の台詞か)、効果音、状況説明、といった補足的な内容も含んだ書き起こしです。今回話題にしているクローズドキャプションは、アクセシビリティという観点で (主に聴覚障害者に対する情報保障として) 付加するものなので、その意味では kind 属性値として captions を指定するのが適切ということになります。

なお、複数の <track> 要素を併記して、たとえば複数言語のキャプションを用意する (ユーザーの任意で表示する字幕を切り替える)、といったこともできます。その場合、デフォルト表示させたい <track> 要素には、「default」という属性を記述します。

<video controls poster="peekaboo_thumbnail.png">

<source src="peekaboo.mp4" type="video/mp4" />
<source src="peekaboo.webm" type="video/webm" />
<source src="peekaboo.ogv" type="video/ogg" />

<track kind="captions" srclang="ja" label="日本語キャプション" src="peekaboo_caption_ja.vtt" default />
<track kind="captions" srclang="en" label="English Captions" src="peekaboo_caption_en.vtt" />
<track kind="captions" srclang="fr" label="Sous-titres français" src="peekaboo_caption_fr.vtt" />
<track kind="captions" srclang="cn" label="中文字幕" src="peekaboo_caption_cn.vtt" />

</video>

キャプションファイルの記述

HTML5 の <track> 要素で使えるキャプションファイルには、「WebVTT」と「TTML」の2種類があります。WebVTT 形式のほうがフォーマットとしてはシンプルで、字幕の表示タイミング (タイムコード) と文面を、時系列に記述するだけです。一方、TTML 形式のほうは XML による記述になるため (タグで適切にマークアップする必要がある)、テキストエディタで手入力するには少々面倒と感じられるかもしれません。

以下は、WebVTT 形式でのキャプションの記述例です。このようにテキストエディタで記述し、「.vtt」という拡張子で保存します。

WEBVTT

1
0:00:00.160 --> 0:00:01.000
[スイッチを入れる]

2
0:00:01.000 --> 0:00:04.560
(クマの声) ハーイ、赤ちゃん。「いないいないばあ」はとっても楽しいよ。

3
0:00:06.260 --> 0:00:08.000
あれ?どこに行ったの?

4
0:00:08.000 --> 0:00:10.200
いないいないばあ!見つけた!

5
0:00:15.980 --> 0:00:17.000
やあ、かわいいね!

6
0:00:20.740 --> 0:00:22.340
ぼくはどこかな?

7
0:00:23.340 --> 0:00:24.540
ここだよ!

8
0:00:27.880 --> 0:00:29.500
どこ行ったの〜?

9
0:00:30.080 --> 0:00:32.040
いないいないばあ!見つけた!

10
0:00:35.460 --> 0:00:38.460
もっともっと、もーっと、遊ぼうよ!

実際の挙動

以下、HTML5 <video> 要素による動画で、実際にクローズドキャプションを付けたものを埋め込んでみました。

閲覧環境によっては (Internet Explorer 9 以下や Firefox など) キャプションが表示されないこともあるので、以下に画面キャプチャも載せます。

HTML5 <video> 要素で埋め込んだ動画にクローズドキャプションを付加した例 (画面キャプチャ)
クローズドキャプションを付加した動画

一部まだキャプション表示に対応していないブラウザもありますが、今や主要なモバイルデバイス (iOS や Android) の OS 標準動画プレーヤーにおいても、すでにキャプション表示ができるようになっており、ユーザーの多種多様な Web 閲覧環境のカバレージとしては、概ね実用的になったと言ってよいと思います。HTML5 の <video> 要素で動画を掲載する場合は、ぜひ、クローズドキャプションも併せて実装していただければと思います。