HTMLの埋め込み動画に字幕をつける

前提

「動画には、字幕と文字化情報 (transcript) を提供するべき」とのこと。

動画は映像と音声の組み合わせなので、
視覚情報・聴覚情報のどちらかにアクセスできない場合でも対応できるのが理想。

🌟 先にまとめ

• <track> 要素で字幕を置ける
  • 字幕を置くためには、「WebVTT」という専用のテキストデータの用意が必要
• 字幕は、色やフォントの変更が可能
• 表示や言語などの切り替えは、親となるメディア要素に controls 属性があればメニューからできる
  • controls 属性を消している場合、JSを書けば対応可能

<track> 要素とは

音声または動画を説明するためのテキストトラックを置くための要素。
<audio> または <video> 専用の子要素。

トラックには WebVTT 形式 (.vtt ファイル) を用いる。

kind 属性

この3つ、何が違う？

ざっくり違いを整理するとこんな感じ。

subtitles（字幕）：セリフや主要な背景情報を文字化

• 音声情報にアクセスできない人も含め、幅広い利用者向け（一時的に音声をミュートしている人、外国語がわからない人など）
• セリフ、シーンの日時および場所など
• 一般的な字幕映画で書いてある程度の文章量

captions（キャプション）：音声情報全体を文字化（セリフ + 効果音）

• 聴覚情報にアクセスできない人向け（聴覚に障害のある方や一時的に音声をミュートしている人など）
• subtitlesで表す内容に加え、「ドアが閉まる音」「緊張感のある音楽」など
• 動画配信サービスにある「CC（クローズドキャプション）」はここに相当する

descriptions（音声解説）：映像情報を文字化（画面で何が起こっているか）

• 視覚情報にアクセスできない人向け（視覚に障害のある方や画面を見られない状況の人など）
• 「田中が部屋に入ってくる」「雨が降り始める」など

WebVTTの記述例

// subtitles用
WEBVTT

00:01.000 --> 00:05.000
いってきまーす

00:05.000 --> 00:10.000
やばい、急がないと遅刻だ

// captions用
WEBVTT

00:01.000 --> 00:05.000
いってきまーす
[ドアが閉まる音]

00:05.000 --> 00:10.000
やばい、急がないと遅刻だ
[雨音が強くなる]

// descriptions用
WEBVTT

00:01.000 --> 00:05.000
男性が玄関で靴を履いている

00:05.000 --> 00:10.000
外に出ると雨が降っている

<track> 要素の複数使用

1つのメディアに複数の <track> 要素を入れることも可能。
※ kind , srclang , label は重複不可

複数ある場合、どのトラックを表示するか視聴者が選択できる。

htmlの記述例

<video controls>
  <source src="movie.mp4" type="video/mp4">
  
  <!-- 字幕（翻訳） -->
  <track kind="subtitles" src="english-subs.vtt" srclang="en" label="English Subtitles">
  <track kind="subtitles" src="chinese-subs.vtt" srclang="zh" label="中文字幕">
  
  <!-- キャプション（聴覚情報にアクセスできない人向け） -->
  <track kind="captions" src="japanese-captions.vtt" srclang="ja" label="日本語CC">
  
  <!-- 音声解説（視覚情報にアクセスできない人向け） -->
  <track kind="descriptions" src="descriptions.vtt" srclang="ja" label="日本語音声解説">
</video>

WebVTT とは

Web Video Text Track の略。

時間軸に沿って配置されたテキストデータのこと。

主に動画の字幕やキャプションの表示に使用される。
（チャプター情報やメタデータの提供など、他の用途もある）

.vtt ファイルの例（MDNより引用）

WEBVTT

00:00.000 --> 00:00.900
Hildy!

00:01.000 --> 00:01.400
How are you?

00:01.500 --> 00:02.900
Tell me, is the lord of the universe in?

00:03.000 --> 00:04.200
Yes, he's in - in a bad humor

00:04.300 --> 00:06.000
Somebody must've stolen the crown jewels

WebVTTを <track> 要素を用いて <video> 要素に追加すると、動画に字幕を表示できる。

※ WebVTT API を使用してJSで追加することもできるが、ここでは省略する

字幕のスタイリング

字幕とキャプションは厳密には別の物だが、文字量削減のため、 WebVTTで書けるテキストデータをまとめて「字幕」と呼ばせていただく

デフォルトでは、黒い半透明の背景＋白文字で表示される。

文字色や背景色などはCSSでのカスタマイズが可能。

video::cue { // 基本の字幕
  font-size: 1.5rem;
  background-image: linear-gradient(to bottom, yellow, lightyellow); // 背景色
  color: red;
}
video::cue(u) { // 下線付きのテキスト
  color: green;
}

video::cue(b) { // 太字のテキスト
  color: purple;
}

font-size , color は通常通りでOK。
背景色は background-color ではなく background-image なので注意。

フォントの変更も可能

Google Fonts を始めとするWebフォントも使える。

下図は Imperial Script を適用した例。

video::cue {
  font-family: "Imperial Script", cursive; // 事前にWebフォントの読み込みが必要
}

読みやすさの確保は前提だが、サイトの世界観に合わせたスタイルにもできそう。

字幕の表示切り替え

<video> に controls 属性がある場合、右端のメニュー（縦に3つ並んだ点）から選択できる。

デザインの都合などで controls 属性を消している場合、ボタンを別途置いてJSで切り替える。

「支援技術のオンオフを検出し、有効化されているときだけ字幕を出す」のような処理はおそらく不可能

もし一部の支援技術を検出できたとしても、支援技術は多岐に渡るので、対応を網羅することは難しいと思われる

<track> 要素が複数ある場合

多言語対応や、subtitles, captions, descriptions をそれぞれ用意する場合は、<track> 要素を複数配置する。

デフォルトの字幕を指定したい場合は、どれか1つを選んで default 属性をつける。

controls 属性を消している場合、表示切り替えと似た要領で、JSを追加する。

下記は <select> 要素で多言語対応してみた例。

よくありそうな質問

• Webサイトで動画に字幕入れたいタイミングっていつ？
  • メインビジュアルがストーリー性のある動画のときなど？
  • 案件で使ったことはまだないので、よい例があれば教えていただけると嬉しいです
• YouTubeの字幕機能でよくない？
  • それはそう
• ブラウザデフォルトの controls でよくない？
  • それはとてもそう
    • 動画に限らず、結局ブラウザデフォルトが最強かも。と思ってしまうずぼらなエンジニア
    • でも見た目をきれいにしたい場合もありますよね。バランスを取るのはむずかしい