WebVTT ファイル - Web Video Text Tracks - WebVTT ファイルとは何か、そして開き方は？

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 をサポートしており、動画と同時にキャプションをストリーミングできます。

参考文献

WebVTT: The Web Video Text Tracks Format