リファレンス · WebVTT
VTTファイルとは
VTTファイルは必ず1行目で自分を名乗ります。WEBVTTという語のあとに、ブラウザがHTML5動画の上に描く時刻付きの字幕ブロックが続くだけの、ただのプレーンテキストです。残りに何が入っているか、どのサービスがこのトラックを作るか、開き方と検証、ページへの組み込み方、SRTとの比較の順に見ていきます。
更新日
VTTファイルの中身
最初の行がすべてを物語ります。WebVTT文書は必ずWEBVTTという語で始まり、これが見つからないプレーヤーはトラックを読み込みません。続く字幕ブロックは空行で区切られ、任意の識別子のあとに00:01:30.500 --> 00:01:33.000のようなタイムコード行、そして表示する文字が来ます。
せりふ以上のものを置ける余地もあります。line:やposition:、align:といったキュー設定は文字の位置を決め、NOTEとSTYLEのブロックはそれぞれコメントとCSSを運びます。会話そのものが目的なら字幕ブロックを通常の文章に落とす変換で十分です。
このトラックの出どころ
多くの人はこの形式を望んで手にするわけではありません。Zoomはクラウド録画を文字起こしするたびに1つ書き出し、Microsoft Teamsも会議のあとに同じ形式を提供します。自動字幕サービスは既定でこの形式を吐き出し、HLSのプレイリストは字幕をセグメントとして配信するため、適応再生される動画は内部ですでにこの形式を使っています。
開き方と検証
プレーンテキストなので、メモ帳、テキストエディット、VS Codeですぐ開けます。VLCはウィンドウにドラッグすれば再生中の動画に結び付き、Subtitle EditやAegisubは波形を添えてくれます。本当に有効かは、動画タグに指定して開発者コンソールの警告を見るのが一番早い確かめ方です。
拒否される原因はたいてい3つのどれかです。見出しが欠けているか綴りが違う、ピリオドの場所にコンマがある、UTF-8ではなく古いコードページで保存されている——最初の数行で見分けられます。編集ソフト向けならSubRipへ変換したほうが確実です。
ページへの組み込み方
字幕を付けるのに必要な要素は1つだけです。<track kind="subtitles" src="talk.vtt" srclang="ja" label="日本語" default>を<video>の中に置きます。kind属性が役割を決め、せりふにはsubtitles、目次にはchaptersを使います。表示されない原因の大半は2つのサーバー設定で、応答はtext/vttとして届く必要があり、別ドメインなら追加のヘッダーが要ります。
SRTとの比較
両者はほぼ重なっています。WebVTTは見出し・ピリオド・UTF-8必須・位置指定と装飾を持ちます。SRTは番号が必須、コンマ区切りで、どの字幕形式よりも対応範囲が広いのが特徴です。ブラウザや配信ならWebVTT、編集ソフトが絡むならSRTです。SRT形式を同じ切り口で解説したページがもう一方の側を説明し、動画が目的ならYouTubeの字幕を単独のテキストとして取得できます。
よくある質問
VTTファイルとは何ですか？
W3CがHTML5動画向けに定めたWebVTT形式の字幕トラックです。プレーンテキストで、見出しのあとに開始時刻・終了時刻・表示する言葉を持つブロックが続きます。
VTTファイルはどう開きますか？
プレーンテキストなのでどのエディタでも開けます。波形を見ながら再同期したいときは専用の字幕編集ソフトが便利で、VLCのウィンドウにドラッグすれば再生中の動画に結び付きます。
VTTファイルとSRTファイルの違いは何ですか？
WebVTTは見出しが必須で、ミリ秒の区切りにピリオドを使い、UTF-8が必須、位置指定やCSSでの装飾に対応します。SRTは各ブロックに番号を振り、コンマを使い、編集ソフトやデスクトッププレーヤーが前提にする形式です。
VTTファイルはどこから来るのですか？
Zoomの録画、Teamsの会議、自動字幕サービス、配信のHLSプレイリストがどれもこの形式を書き出します。配信の仕組みがネイティブに話す形式だからです。
ファイルはどこかにアップロードされますか？
いいえ。このページはトラックを端末の中だけで読み込むので、公開前の映像や社外秘の会議記録がネットワークに出ることはありません。