WebVTT とは?
WebVTT(Web Video Text Tracks Format) は、テキストベースの字幕フォーマット で、動画にタイムテキストトラックを追加するために使用されます。HTML5 の <track> 要素でサポートされている公式フォーマットで、以下を追加できます:
- 字幕(翻訳された音声)
- キャプション(音声と効果音)
- 説明(スクリーンリーダー向けの視覚情報)
- チャプター(動画内のナビゲーションポイント)
- メタデータ
WebVTT の基本構造
- WebVTT ファイルは次の要素で構成されます:
- 任意の ヘッダー (
WEBVTT)。 - 任意の メタデータ(コメントや style/script ブロック)。
- キュー(タイミングとペイロードを持つテキストセグメント)。
- 任意の ヘッダー (
1. キュー形式
キューは以下の構造です:
[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [キュー設定]
テキストペイロード...
- タイミング:
HH:MM:SS.mmm形式の開始・終了時刻。 - 設定(任意):
vertical(縦書きテキスト用の lr/rl)line(位置指定)position(水平位置指定)size(幅/パーセンテージ)align(start/middle/end)
2. キューペイロード
- プレーンテキストでも、マークアップを含めても構いません:
- タグ:
<b>,<i>,<u>,<ruby>,<lang>など。 - タイムスタンプ(カラオケ風テキスト用)
<00:00:05.000>。
- タグ:
3. スタイリングと CSS
- スタイリングは以下で適用できます:
- インラインキュー(タグ使用)。
- HTML の CSS 疑似要素(
::cue,::cue-region)。
4. メタデータトラック
- WebVTT は メタデータ(JSON など)を保持でき、インタラクティブアプリケーションで利用可能です。
5. ファイルエンコーディング
- UTF-8 エンコードが必須です。
- 行末は
\r\n、\n、または\rのいずれか。
6. 処理ルール
- パーサーは不正なファイルをできるだけ寛容に処理する必要があります。
- BOM(バイトオーダーマーク)は任意です。
7. HTML5 との統合
<track>要素と共に使用します:<video> <track src="subtitles.vtt" kind="subtitles" srclang="en" default> </video>kindはsubtitles、captions、descriptions、chapters、metadataのいずれか。
8. ブラウザサポート
- 現代の主要ブラウザ(Chrome、Firefox、Safari、Edge)で広くサポートされています。
9. 用途例
- 字幕/キャプション:アクセシビリティ向上。
- カラオケ歌詞:タイムテキストで同期。
- チャプターナビゲーション:動画内のセクション移動。
- メタデータ:インタラクティブ動画アプリで活用。
WebVTT ファイルの例:
WEBVTT
00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.
00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.
検索エンジンは動画を「見る」ことはできませんが、テキストベースのコンテンツは読めます。WebVTT ファイルを使用すると、インデックス可能なテキストを追加でき、次の効果があります:
- 発見性の向上:Google はキャプションや文字起こしをインデックスし、動画がより多くの検索結果に表示されます。
- エンゲージメントの増加:字幕付き動画は視聴時間が長くなり、セッション時間が伸び、直帰率が低下します。
- アクセシビリティの強化:聴覚障害者や難聴者にとってキャプションは必須であり、SEO ランキングアルゴリズムでも評価されます。
WebVTT ファイルがウェブページ上の動画に紐付けられると、Google はそのタイムテキストを解析・理解 でき、特定の検索クエリに対してコンテンツの関連性が高まります。
HTML5 動画に WebVTT を追加する方法
<track> 要素を使って動画に WebVTT ファイルを組み込めます:
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
src:.vttファイルへのパスkind:テキストトラックの種類(subtitles、captions、chaptersなど)srclang:言語コード(例:en、es)label:プレーヤーに表示されるトラックラベル
WebVTT と SRT の違いは?
| 機能 | WebVTT | SRT(SubRip) |
|---|---|---|
| フォーマット | HTML5 動画で使用 | 動画編集ツールで使用 |
| スタイリング | CSS スタイリングに対応 | ネイティブなスタイリングなし |
| メタデータ | キューメタデータに対応 | 非対応 |
| 互換性 | ブラウザで広くサポート | VLC などのプレーヤーでサポート |
WebVTT ファイルを作成・編集するツール
.vtt ファイルは次のツールで作成・編集できます:
- テキストエディタ:VS Code、Sublime Text
- 字幕エディタ:Subtitle Edit、Amara、Aegisub
- コンバータ:SRT と VTT の相互変換ツール
WebVTT ファイルの開き方
WebVTT(.vtt)ファイルは、任意の テキストエディタ または 字幕エディタ で開くことができます。
テキストエディタで開く
- Windows:Notepad、Notepad++、VS Code
- macOS:TextEdit、Sublime Text
- Linux:Gedit、nano、Vim
.vttファイルはプレーンテキストなので、通常のテキストファイルと同様に閲覧・編集できます。
字幕エディタで開く
より高度なフォーマット調整、プレビュー、タイミング合わせが必要な場合:
- Subtitle Edit(Windows)
- Aegisub(クロスプラットフォーム)
- Amara(ウェブベース)
ブラウザで開く
<video>と<track>タグを含むシンプルな HTML ファイルを作成します。- その HTML ファイルをブラウザで開き、字幕付き動画を確認します。
ASS ファイルの主な特徴
| 特徴 | 説明 |
|---|---|
| ファイル拡張子 | .vtt |
| 正式名称 | Web Video Text Tracks Format |
| MIME タイプ | text/vtt |
| フォーマット種別 | 構造化マークアップを持つプレーンテキストファイル |
| 主なソフトウェア | 任意のテキストエディタ、HTML5 動画プレーヤー、キャプション作成ツール |
| エンコーディング | UTF-8 必須 |
| 開発元 | W3C(World Wide Web Consortium) と WHATWG |
| 主な利点 | ネイティブブラウザサポート、豊富な位置指定とスタイリングオプション、アクセシビリティ機能 |
| マクロサポート | なし(テキストのみ、マークアップタグあり) |
| オープン標準 | はい(W3C Community Group 仕様) |
FAQ
Q1: WebVTT と SRT の違いは何ですか?
A: WebVTT は SRT をベースにしていますが、テキスト位置指定、ボイスタグ、CSS スタイリング、メタデータサポートなどの重要機能が追加されており、HTML5 動画へのネイティブ統合が可能です。
Q2: YouTube に WebVTT 字幕を追加する方法は?
A: 字幕を追加する際に .vtt ファイルをアップロードするか、YouTube の自動生成キャプションをダウンロードして WebVTT 形式に変換し、編集後に再アップロードします。
Q3: WebVTT ファイルに画像を埋め込めますか?
A: 仕様上は画像埋め込みは直接サポートされていませんが、メタデータキューに画像 URL を入れ、JavaScript でカスタム画像表示を実装することは可能です。
Q4: WebVTT のスタイルが適用されないのはなぜですか?
A: STYLE ブロックが最初のキューより前にあり、空行がなく、::cue 疑似要素が正しく記述されているか確認してください。また、ブラウザの対応状況もチェックしましょう。
Q5: WebVTT は HLS などのストリーミングプロトコルで使えますか?
A: はい、HLS(HTTP Live Streaming)はセグメント化された WebVTT をサポートしており、動画と同時にキャプションをストリーミングできます。