WebVTT字幕構文の詳細ガイド：タイムスタンプからスタイリングまでの開発・デバッグガイド

標準的なWebVTTファイルの1行目は、必ずWEBVTT宣言でなければなりません。宣言の後にはスペースとファイルの説明文を配置でき、異なる構造ブロックは空行で区切られます。WEBVTTヘッダーを含まないファイルは、ほとんどのHTML5プレーヤーで正しく解析できません。

NOTEコメントブロックは開発時の注釈や字幕の説明を追加するために使用され、1行または複数行のコンテンツに対応しています。プレーヤーでレンダリングされることも表示されることもありません。開発・デバッグ時には、修正が必要な字幕段落をNOTEブロックでマークでき、最終的な再生結果に影響を与えません。

個々の字幕キューはタイムスタンプと表示テキストで構成されます。タイムスタンプフォーマットでは、ミリ秒の区切り文字としてドットとカンマの2つのスタイルに対応しています。最新のブラウザの大半はドット表記のみをサポートしています。

タイムスタンプの時間フィールドは省略可能です。総再生時間が1時間未満の字幕は時間フィールドを省略でき、その場合のフォーマットはMM:SS.sssになります。完全なフォーマットはHH:MM:SS.sssです。開始時間と終了時間は--> 記号で区切られます。

WebVTTは、部分的なテキストの表示スタイルを変更するために、6つの標準インラインタグをサポートしています。このうちb、i、uはそれぞれ太字、斜体、下線に対応し、対応するHTMLタグと同じ規則に従います。開発者は手書きする際に直接使用できます。

rubyタグはピンイン注釈に使用され、langタグは異なる言語のテキストをマークするために使用され、voiceタグは発言者をラベル付けするために使用されます。これらのタグは主にメタデータの分類に使用され、プレーヤーはこれらに基づいて差別化されたレンダリングを実装できます。

::cue疑似要素は、WebVTT字幕向けに提供される専用のCSS疑似要素です。開発者はこの疑似要素を使用して、ウェブページ上のすべての字幕のデフォルトスタイルを変更でき、color、font、backgroundなどの一般的なCSSプロパティに対応しています。

STYLEブロックはWebVTTファイル内でグローバルまたはキュー固有のスタイルを定義するために使用されます。REGIONブロックは字幕のレンダリング領域を定義するために使用され、複数の領域に異なる字幕を同時に表示することに対応しているため、多言語字幕の並列表示でよく使用されます。

HTML5のtrack要素は、外部のWebVTT字幕ファイルをインポートするために使用されます。track要素のkind属性は字幕の種類を定義し、取り得る値はsubtitles、captions、descriptions、chapters、metadataの5つです。

このうちsubtitlesは一般的な翻訳字幕に対応し、captionsは環境音の注釈を含む聴覚障害者向け字幕に対応し、chaptersはチャプターナビゲーションに対応し、metadataはページのメタデータを保存して表示されません。プレーヤーによってkind属性の処理は異なります。