WebVTT.vtt

.vtt のファイルを受け取ってダブルクリックしても、何のアプリも開かなかったり、ブラウザに文字が並ぶだけだったりします。WebVTTは動画と組み合わせて使う字幕のテキストファイルなので、単体で開くならテキストエディタ、動画と見るならプレーヤーやブラウザで読み込むのが正解です。

WebVTTファイルが使われる場面

いちばん多いのは、自社サイトやWebサービスに埋め込んだ動画の字幕です。HTMLの <video> の中に <track kind="subtitles" src="ja.vtt" srclang="ja"> と書くと、ブラウザの標準の字幕機能で表示されます。video.jsのような動画プレーヤーのライブラリも、字幕の読み込みはWebVTTが基本です。

配信の分野では、HLSの字幕がWebVTTで作られます。長い字幕を数秒ごとの小さなファイルに分け、m3u8のプレイリストから映像や音声と一緒に参照する仕組みです。YouTubeやVimeoへのアップロードにも使え、Web会議ツールの録画に付く文字起こしが .vtt で書き出されることもよくあります。

WebVTTの書き方とSRTとの違い

ファイルの1行目は必ず WEBVTT です。その下に、時刻と本文の組（キュー）を空行で区切って並べます。時刻は 00:00:01.000 --> 00:00:03.500 のように、秒とミリ秒の間をピリオドで区切ります。SRTと違い、キューの通し番号は省略できます。

SRTとの大きな違いは、表示を指定できることです。時刻の後ろに line:0 と書けば画面の上端に、align:start なら左寄せで表示されます。vertical:rl で縦書きにでき、<ruby> と <rt> のタグでルビも振れます。STYLE のブロックに ::cue というCSSを書けば、文字の色や背景も変えられます。ただし縦書きやルビをどこまで表示できるかはブラウザやプレーヤーによって差があるので、使う前に実機で確かめます。

SRTからの変換の注意点はWebVTTとは?SRTとの違いと使い分け・変換時の注意点を解説で詳しく扱っています。

WebVTTの字幕が表示されないとき

ブラウザで字幕が出ないときは、次の点を順に確認します。

• 1行目が WEBVTT になっているか（先頭に余計な空白や文字がないか）
• 秒の区切りがカンマのままになっていないか
• 文字コードがUTF-8で保存されているか
• サーバーが text/vtt のMIMEタイプで返しているか
• 動画と別のドメインに置いた字幕を読み込んでいないか

最後の点は見落としやすく、字幕ファイルが別ドメインにある場合は、サーバー側のCORSの設定と、<video> の crossorigin 属性の両方が必要です。

よくある質問

VTTファイルは何で開けますか

中身はテキストなので、メモ帳やVS Codeなどのテキストエディタで開けます。動画と一緒に見るなら、VLCで動画を開いてから字幕として追加するか、同じ名前のVTTを同じフォルダに置きます。

VTTファイルをSRTに変換するには

先頭の WEBVTT の行と、位置やスタイルの指定を消し、時刻のピリオドをカンマに直して通し番号を振ります。FFmpegや字幕ソフトを使えば一度に変換できますが、縦書きやルビなどSRTにない指定は失われます。

WebVTTとSRTはどちらを使えばよいですか

ファイルの行き先で決めます。自社サイトの動画やHLS配信に載せるならWebVTT、編集ソフトに読み込んだり翻訳者に渡したりする中継ぎの用途なら、対応ソフトの多いSRTが扱いやすいです。