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

Derek Herman
Derek Herman
X GitHub
Joe Medley
Joe Medley
GitHub

この記事では、WebVTT（Web Video Text Tracks）形式について説明します。 クローズド キャプションやサブタイトルなどのタイム テキストデータを記述するために使用します。 視聴者がアクセスしやすい動画を制作する取り組みです

ユーザー補助は、ケーキを焼くのとは異なる。何でもいいのに 後で導入することを期待しています。字幕とスクリーン リーダー 動画を見てもらうには、説明欄が唯一の方法だが、動画の内容によっては 法律や規制によって義務付けられています

<track> タグの追加

ウェブ動画に字幕やスクリーン リーダーの説明を追加するには、<track> を追加します <video> タグ内に挿入します。字幕、スクリーン リーダーのほか、 <track> タグは、字幕やチャプター タイトルにも使用できます。 <track> タグを使用すると、動画の内容を検索エンジンが理解するうえでも役立ちます。 ただし、これらの機能はこの記事の範囲外です。

<ph type="x-smartling-placeholder">
</ph> Android 版 Chrome で Track 要素を使用して表示される字幕を示すスクリーンショット
Android 版 Chrome のトラック要素

<track> タグは <source> 要素と同様で、どちらも src を持ちます。 属性で識別されます。<track> タグの場合は、 WebVTT ファイル。label 属性は、特定のトラックをどのようにするかを指定します。 表示されます。

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

2 つの <track> タグを持つ <video> タグの例を以下に示します。また、 Glitch で確認できるサンプル （出典）。

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

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.

...

トラック ファイル内の各項目はキューと呼ばれます。各キューには開始時間と 矢印で区切られ、その下行にキューテキストがあります。キューは 以下の例では、railroad や manuscript のような 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 桁（0 の場合は 00）、ミリ秒は 3 桁 桁数（ゼロの場合は 000）です。優れた WebVTT バリデータについては、 Live 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 を使用してキューのスタイルを設定できることです。たとえば、 背景に灰色の線形グラデーションを使用し、前景の色は すべての字幕と太字のテキストの色: peachpuff: papayawhip。

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: 表示されず、スクリプトで使用できます。

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