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

Derek Herman
Derek Herman
Joe Medley
Joe Medley

公開日: 2020 年 8 月 20 日

多くのユーザーが字幕とスクリーン リーダーの説明を 視聴できる必要があります。地域によっては、法律で義務付けられている 目的としますWebVTT(Web Video Text Tracks)形式は、 時間指定テキストデータ(クローズド キャプションや字幕など)を使用して、 アクセスできるようにします。

<track> タグを追加する

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

Android 版 Chrome のトラッキング要素

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

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

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

<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.

...

トラックファイル内の各項目はキューです。各キューには開始時間と 終了時刻を矢印で区切って指定し、その後にキューテキストを続けます。キューには ID(railroadmanuscript など)。キューは空白行で区切ります。

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 桁(0 の場合は 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: 表示されず、スクリプトで使用できます。

ここまで、動画を公開してアクセシビリティを高める基本的な方法を学びました。 より複雑なユースケースについて疑問に思われるかもしれません。メディア フレームワークと、高度な機能を提供しながらウェブページに動画を追加する方法について学びます。