メディアのユーザー補助機能

Derek Herman
Derek Herman
Joe Medley
Joe Medley

公開日: 2020 年 8 月 20 日

多くのユーザーが動画を視聴できるようにするには、字幕とスクリーン リーダーの説明が必要です。地域によっては、法律や規制によって字幕が義務付けられている場合もあります。WebVTT(Web Video Text Tracks)形式は、クローズド キャプションや字幕などのタイミング付きテキストデータを記述し、動画のアクセシビリティを高めるために使用されます。

ウェブ動画に字幕やスクリーン リーダーの説明を追加するには、<video> タグ内に <track> タグを追加します。<track> タグは、字幕とスクリーン リーダーの説明に加えて、字幕とチャプター タイトルにも使用できます。

Android 版 Chrome で track 要素を使用して表示された字幕を示すスクリーンショット。

<track> タグは、参照先のコンテンツを参照する src 属性が両方に存在するという点で、<source> 要素に似ています。<track> タグの場合は、WebVTT ファイルを参照します。label 属性は、特定のトラックをインターフェースで識別する方法を指定します。

複数の言語のトラックを提供するには、提供する WebVTT ファイルごとに個別の <track> タグを追加し、srclang 属性を使用して言語を指定します。

2 つの <track> タグを含むこの <video> タグの例をご覧ください。<video> 要素の子として <track> 要素を追加します。

<video controls>
 
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
 
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
 
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
 
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
 
<p>This browser does not support the video element.</p>
</video>

また、Glitch で確認できるサンプルもあります。

WebVTT ファイルの構造

デモ用の仮想 WebVTT ファイルを次に示します。これは、一連のキューが含まれるテキスト ファイルです。各キューは、画面に表示するテキストのブロックと、そのテキストを表示する時間範囲です。

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

トラックファイル内の各項目はキューです。各キューには、矢印で区切られた開始時間と終了時間があり、その後にキューテキストが続きます。キューには、railroadmanuscript などの ID を指定することもできます。キューは空白行で区切られます。

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript
.

キュー時間は hours:minutes:seconds.milliseconds 形式です。解析は厳密です。つまり、必要に応じて数値をゼロパディングする必要があります。時間、分、秒は 2 桁(ゼロ値の場合は 00)、ミリ秒は 3 桁(ゼロ値の場合は 000)にする必要があります。Live WebVTT Validator には優れた WebVTT バリデーターがあり、時間の形式のエラーや、時刻が連続していないなどの問題をチェックできます。

VTT ファイルを手動で作成することもできますが、自動作成するサービスも多数あります。

前の例でわかるように、WebVTT 形式は非常にシンプルです。タイミングとともにテキストデータを追加するだけです。

字幕を左揃えまたは右揃えで別の位置にレンダリングしたい場合はどうすればよいでしょうか。字幕を現在の話し手に合わせて配置したり、カメラ内のテキストの邪魔にならないようにしたりするなどです。WebVTT では、その設定などを .vtt ファイル内で直接定義します。時間間隔の定義の後に設定を追加して、字幕の配置がどのように定義されているかを確認します。

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

もう 1 つの便利な機能は、CSS を使用してキューのスタイルを設定できることです。背景としてグレーのリニア グラデーションを使用し、すべての字幕の前景色を papayawhip、すべての太字テキストの色を peachpuff に設定できます。

video::cue {
 
background-image: linear-gradient(to bottom, dimgray, lightgray);
 
color: papayawhip;
}

video::cue(b) {
 
color: peachpuff;
}

個々のキューのスタイル設定とタグ付けについて詳しくは、WebVTT 仕様で高度な例をご覧ください。

テキスト トラックの種類

<track> 要素の kind 属性に気づきましたか?特定のテキスト トラックと動画の関係を示すために使用されます。kind 属性の有効な値は次のとおりです。

  • captions: 文字起こしからの字幕と、音声の翻訳(該当する場合)。聴覚障がいのある方や、動画をミュート再生している場合に適しています。
  • subtitles: 字幕(動画のメイン言語とは異なる言語での音声とテキストの翻訳)に使用します。
  • descriptions: 動画コンテンツの視覚的な部分の説明。視覚障がいのある方向け。
  • chapters: ユーザーが動画内で移動しているときに表示されます。
  • metadata: 表示されず、スクリプトで使用される場合があります。

ウェブページで動画を公開してアクセスできるようにする方法の基本を理解したので、より複雑なユースケースについて考えてみましょう。メディア フレームワークと、高度な機能を提供しながらウェブページに動画を追加する方法について学びます。