動画に字幕を付ける：WebVTTの時刻と音声の内容を照合する

動画を無音で再生すると、何を説明しているか分からない。動画に字幕を付けるときは、文章を下に置くだけでなく、発話や必要な音の情報を再生位置に合わせて表示します。短い録画を使い、字幕の内容と表示時刻を別々に照合してみましょう。

video要素を使ったことがある人向けです。架空の工作室の案内を題材に、HTMLとWebVTTという字幕ファイルを組み合わせます。自動字幕サービスや動画編集ソフトの操作は扱いません。自分で撮った、掲載・加工してよい10秒程度の練習用動画と、ローカルHTTPサーバーを用意してください。

先に、音を聞けないと失う情報を書き出す

字幕には、発話だけでなく、その場面を理解するために必要な音も含めます。誰が話しているか画面だけでは分からないなら話者を示し、案内の合図になるベルが鳴るならその情報も残します。すべての環境音を細かく書くという意味ではありません。

WAIの字幕の解説では、音声情報を文字で伝える役割と、自動生成された字幕にも正確さの確認が必要なことを説明しています。特に否定の言葉、数値、固有名詞は、抜けると案内が逆になることがあります。

次は今回の模擬台本です。このとおりの録画が付属しているわけではありません。自分の動画で発話した位置を確認し、表と後述の時刻を合わせて変更してください。発話がない区間へ、台本にあるという理由だけで字幕を足しません。

映像にだけ示された手の動きや表示文字は、字幕を付けただけでは音として伝わりません。必要なら音声説明や文章で補います。画像のaltを考える記事と同じく、どの情報が失われるかを先に決めますが、今回は時間とともに変わる音声が対象です。

三つの表示区間をWebVTTにする

練習フォルダへcaptions-ja.vttをUTF-8で保存します。先頭のWEBVTT、区間の間の空行、開始と終了を結ぶ矢印が構造です。一つの表示区間をキューと呼びます。

WEBVTT

00:01.000 --> 00:03.000
案内係：道具は机の中央へ戻してください。

00:04.000 --> 00:05.000
［終了のベル］

00:06.000 --> 00:09.000
案内係：刃の部分には触れないでください。

MDNのWebVTT形式の説明では、時刻の形式、キューの区切り、text/vttでの配信を確認できます。例の00:01.000は1秒です。終了は開始より後に置き、SRT形式の字幕で見かける小数部のカンマを、そのまま持ち込まないようにします。

ここでは区間を重ねていません。同時に複数の話者が話す素材などには別の設計が必要ですが、まずは一つの音声と一つの字幕を対応させます。文章を読み切れる長さかも、字幕が表示される実際の時間で判断してください。

HTMLから字幕ファイルを参照する

同じフォルダへ、練習用の動画をpractice.mp4という名前で置きます。次をindex.htmlへ保存します。このコードだけでは動画そのものを生成できません。別名の動画を使う場合はsrcも合わせます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>工作室の動画字幕｜練習</title>
<style>
body { margin: 16px; font-family: sans-serif; line-height: 1.8; }
main { max-width: 640px; margin: auto; }
video { display: block; width: 100%; height: auto; }
:focus-visible { outline: 3px solid #174ea6; outline-offset: 3px; }
</style>
</head>
<body>
<main>
<h1>工作室の案内（架空の字幕練習）</h1>
<p>プレーヤーの字幕設定から「日本語」を選んで再生してください。</p>
<video controls preload="metadata">
  <source src="practice.mp4" type="video/mp4">
  <track kind="captions" src="captions-ja.vtt"
         srclang="ja" label="日本語" default>
  このブラウザーでは動画を表示できません。
</video>
<p><a href="practice.mp4">練習用動画を開く（MP4）</a></p>
<h2>音声内容のテキスト</h2>
<p>案内係：道具は机の中央へ戻してください。［終了のベル］
案内係：刃の部分には触れないでください。</p>
</main>
</body>
</html>

Python 3を使える場合は、そのフォルダでpython3 -m http.server 8767 --bind 127.0.0.1を実行し、http://127.0.0.1:8767/を開けます。終了はCtrl+Cです。ファイルを直接開く方法では字幕ファイルの読み込み制限が問題になる場合があるため、HTTPで確認します。

MDNのtrack要素の資料に従い、音を補う字幕をcaptionsとして指定しています。srclangは字幕の言語、labelは選択肢として見せる名前です。defaultは自動選択の手掛かりですが、利用者の設定によって選択結果は変わるため、字幕が選べることも確認します。

出てこない字幕と、遅れる字幕を切り分ける

一つ目の失敗は、動画だけ再生でき、字幕の選択肢や文字が出ない場合です。まず字幕をオンにし、それでも出なければNetworkでcaptions-ja.vttの応答を確認します。名前の違いによる404や、HTMLのエラーページを返している場合は、VTTの文を直しても解決しません。

修正は参照先と配信内容を合わせることです。同じオリジンに三ファイルを置き、字幕への応答がtext/vttで、本文がWEBVTTから始まるか確認します。取得できているのに出ない場合は、時刻の書式と空行を調べます。再確認では2秒付近を再生し、最初の字幕が表示されることを見ます。

二つ目は、途中を編集した動画へ以前のVTTを付け、字幕だけ遅れる場合です。最初は合っていても、一部を短くした位置からずれることがあります。全区間を同じ秒数だけ動かす前に、どの発話からずれたかを特定します。

修正では編集後の動画を基準に、該当するキューの開始と終了を調整します。再確認は冒頭、編集点の直後、最後の発話で行います。最後だけ合うように時刻を延ばす修正では、途中の対応は確かめられません。

字幕と、動画の外で読む文章を使い分ける

動画の下にある文章は、内容を一度に確認するためのものです。再生時刻に追従する字幕とは使い方が異なります。また、video内の代替文だけでは、プレーヤーは表示できるが動画ファイルを取得できない場面の案内として十分とは限らないため、外側にも文章を置いています。

ページのlangと字幕のsrclangも別々に照合します。HTMLの言語指定が正しくても、字幕を英語として登録していれば字幕一覧の情報は合いません。今回は日本語の音声と字幕に限定し、翻訳の品質は別の確認とします。

字幕を付けることと、自動再生を始めることは別です。この例はcontrolsから利用者が再生します。動きを減らす設定の記事で扱うCSSの装飾制御を付けても、動画の再生条件や音の説明が自動で整うわけではありません。

無音で内容を追い、音ありで時刻を照合する

素材を用意した後の15〜20分を目安に、表の時刻を動画に合わせて修正します。例のままの時刻なら、2秒で最初の文、4.5秒でベル、7秒で最後の文、9.5秒で字幕なしになるのが表示の期待結果です。

次に音を消して、道具を戻す場所、終了の合図、触れてはいけない箇所が分かるかを見ます。音を戻して、否定の言葉が抜けず、発話と字幕が対応しているかも確認してください。最後に狭い画面で文章が切れず、字幕のオン・オフと再生操作を行えるかを調べます。

ファイルを取得できる、時刻が合う、意味が伝わる、の三つを一つの合否にまとめないでください。アクセシビリティの無料レッスンへ進む際も、使った動画とブラウザー、確認した条件を残すと、差し替え後に同じ箇所を再確認できます。