HTML5の動画にWebVTT字幕を表示する方法

字幕が出ないときは、ファイルを読み込めないのか、再生位置が表示区間から外れているのかを切り分けます。

動画にトラックを追加する

動画と UTF-8 の VTT を同じサイトに置き、video 要素の中に track を記述します。相対パスの基準はページの場所です。srclang は音声ではなく字幕の言語を指定します。英語音声の日本語字幕なら ja です。

<video controls src="lesson.mp4">
  <track kind="subtitles" src="example-en.vtt"
         srclang="en" label="English" default>
</video>

サンプル動画とVTTをダウンロードし、テスト用ウェブサーバーのHTMLと同じディレクトリに置きます。掲載コードを使う場合の名前は lesson.mp4 と example-en.vtt です。ローカルファイルのアクセス制限を避けるため、ブラウザーにはページのURLを入力します。

例には講習会の案内だけが含まれます。冒頭の発話に字幕が出なくても正常です。8秒で停止して例文と照合し、13秒で消えていることを確認します。字幕をオフにしても残る場合は別のトラックや映像に焼き込まれた文字を確認します。

開発者ツールのネットワークを開き、ページを再読み込みして英語を選びます。.vtt の要求がなければ公開ページの video 要素を調べます。保存時にエディターが track 要素を削除する場合があります。要求があればアップロード先と完全なURLを照合します。

応答本文は WEBVTT、空行、時刻の順です。200でもログイン画面のHTMLが返ることがあります。CORSのエラーなら同じファイルをページと同一オリジンに置いて試し、配信元の許可設定と video の crossorigin 属性を確認します。

聞き分けやすい発話を三つ選び、発話開始と字幕開始を比較します。ずれが一定なら冒頭の追加や削除を調べます。三つ目だけ遅いなら二つ目との間の編集点を確認します。次第にずれが広がる場合は配信している動画の版を先に確認します。

公開ページで各言語に切り替えて一文を確認し、字幕をオフにします。文字が残れば元映像と比較してください。不具合を伝えるときは動画ファイル名、選択したトラック、再生時刻を添えます。

EasySubが作成した原稿の英語合成音声です。元のSRTの3番目の字幕をVTTの記述例にしたもので、新たな書き出し結果や専門家による校正済み字幕ではありません。

WEBVTT

3
00:00:07.950 --> 00:00:12.149
Our next workshop starts on June 15 at 9:30.

例では English を選び、8秒の位置に移動すると英文が表示され、13秒では消えます。表示されなければ字幕のURLを直接開きます。応答が200でもログイン画面なら読み込めません。配信形式は text/vtt、別ドメインなら crossorigin とサーバーの CORS 設定も確認します。

公開版と文字起こしに使った版を編集点の前後で比較します。冒頭が合っている場合は、トラック全体をずらさないでください。