VTTファイルとは？WebVTT字幕フォーマットの完全解説

VTT（WebVTT、Web Video Text Tracks）は、HTML5動画向けに設計されたW3C標準の字幕フォーマットです。YouTube、Vimeo、モダンなWeb動画プレーヤーで使用されています。SRTを改良し、キュースタイリング、メタデータ、ネイティブブラウザサポートを追加した、Webベースの動画字幕におけるデファクトスタンダードです。

VTTの略称と意味

VTTは「Web Video Text Tracks」の略称で、一般的にはWebVTTと呼ばれます。W3CがHTML5の<video>要素と<audio>要素向けの標準テキストトラックフォーマットとして開発しました。より優れた機能とネイティブブラウザレンダリングにより、Web用途では古いSRTフォーマットに代わるものです。

VTTファイルの仕組み

VTTファイルは1行目に「WEBVTT」というテキストで始まります。SRTと同様に、タイミング付きの字幕キューを含みますが、VTTのキューはカンマではなくピリオド区切りのミリ秒（00:00:01.000）を使用します。また、SRTにはないオプションのキューヘッダー、スタイリング、コメント、メタデータもサポートしています。

VTTを使うべきケース

VTTはWeb動画に最適な選択肢です。Webサイトに動画を埋め込む場合や、Webベースのプレーヤーを構築する場合、YouTubeなどのプラットフォームにキャプションをアップロードする場合、VTTはブラウザとWebプラットフォームが期待するフォーマットです。オフラインやデバイスでの再生には、SRTの方が幅広い互換性があるかもしれません。

VTTファイルの構造

WEBVTT

00:00:01.000 --> 00:00:04.000
これは最初の字幕行です。

00:00:05.000 --> 00:00:08.500
これは2つ目の字幕です。
複数行にまたがることができます。

WEBVTT必須のファイルヘッダー — すべてのVTTファイルの1行目でなければならない

（空行）ヘッダーの後の空行がヘッダーとキューを区切る

00:00:01.000HH:MM:SS.mmm形式の開始タイムスタンプ（ミリ秒の前にカンマではなくピリオド）

-->開始時刻と終了時刻の間の矢印セパレータ

（番号なし）VTTキューには連番が不要（SRTと異なる点）

VTTのメリット

HTML5動画のW3C標準 — Chrome、Firefox、Safari、Edgeでネイティブサポート
キューレベルのスタイリング、位置指定、配置をサポート
メタデータ、コメント、チャプターマーカーを許可
YouTube、Vimeo、主要なWeb動画プラットフォームで使用
SRTより構造化されており、プログラム的パースに適している

VTTのデメリット

一部の古いスマートTVやデバイスはVTTをサポートしていない場合がある（SRTの方がデバイスサポートが広い）
WEBVTTヘッダーが必須 — ヘッダーのないファイルはパースされない場合がある
ブラウザによってスタイリングのサポートが異なり、VTTスタイリングが一貫してレンダリングされるとは限らない
オフライン動画ワークフローではSRTに比べて使用頻度が低い

VTTをサポートするプレーヤーとプラットフォーム

Chrome Firefox Safari Microsoft Edge YouTube Vimeo Video.js Plyr JW Player VLC Media Player mpv Plex（Web） HTML5 <track>要素

VTTよくある質問

VTTファイルを開くにはどうすればいいですか？

VTTファイルはプレーンテキストなので、テキストエディタで内容を表示できます。動画再生の場合、WebブラウザはHTML5の<track>要素を通じてVTTをネイティブにサポートしています。VLCやmpvなどのデスクトッププレーヤーもVTTファイルを直接サポートしています。

VTTとSRTの違いは何ですか？

VTTは「WEBVTT」ヘッダーで始まり、ミリ秒にピリオド（00:00:01.000）を使用し、スタイリングとメタデータをサポートするWeb標準です。SRTはヘッダーがなく、カンマ（00:00:01,000）を使用し、プレーンテキストのみで、より幅広いデバイスサポートを持ちます。VTTはWeb向け、SRTはデバイス向けです。

YouTubeでVTTを使えますか？

はい。YouTubeは字幕アップロード用にVTTファイルを受け付けています。YouTube Studioで「字幕」に移動し、「追加」をクリックして、.vttファイルをアップロードします。YouTubeがキューとタイミングを自動的に解析します。

HTML5動画にVTT字幕を追加するにはどうすればいいですか？

<video>タグ内に<track>要素を使用します：<video><source src="video.mp4"><track kind="subtitles" src="subtitles.vtt" srclang="en" label="English"></video>。ブラウザが字幕をネイティブにレンダリングします。

VTTはスタイリングをサポートしていますか？

はい、VTTはテキスト配置、行の位置指定、キューセッティングとインラインタグによる基本的な書式設定など、限定的なスタイリングをサポートしています。ただし、ブラウザごとのVTTスタイリングのレンダリングは完全には一貫していません。複雑なスタイリングにはASSの方が適しています。

VTTを他のフォーマットに変換

VTT to SRT VTT to ASS VTT to LRC VTT to TXT

VTTファイルとは？