ウェブ動画テキストトラック形式 (WebVTT)

概要

WebVTT ファイルは、MIME タイプが text/vtt で、ファイル拡張子が .vtt です。 コンテンツは UTF-8 を使用してエンコードする必要があります。

WebVTT の構造は、以下の部品から構成されます。オプションの部品も含まれますが、この順序に則って構成されます。

• ヘッダーは、オプションのバイトオーダーマーク (BOM) と、"WEBVTT" という文字列に続き、1 つ以上の空白またはタブ文字で区切られたオプションのテキストヘッダーが続きます（WebVTT ファイルでは、タブと空白は同等です）。
• 1 つ以上の空行は、それぞれ 2 つの連続した改行に相当します。
• 1 行以上の空白行で区切られた、ゼロ個以上の STYLE、REGION、NOTE ブロックのいずれか。
• 1 行以上の空白行で区切られた、ゼロ個以上のキューまたは NOTE ブロック。

下記に、WEBVTT 文字列（ヘッダーテキストなし）、メモブロック、および 2 つのキューを保有する単純な WebVTT ファイルを示します。

WEBVTT

NOTE これは複数行のノートブロックです。
これらは著者のコメントに使用します。
2 つのキューブロックが以下で定義されています。

00:01.000 --> 00:04.000
- 液体窒素を絶対に飲まないでください。

00:05.000 --> 00:09.000
なぜなら、
- 胃に穴をあけます。
- 死ぬ可能性があります。

以下の節では、上記の例で使用されていないものも含め、ファイルの各部分について説明します。

WebVTT ヘッダー

WebVTT ファイルは、以下の内容が格納されたヘッダーブロックから始まります。

• オプションのバイトオーダーマーク (BOM)、Unicode 文字 U+FEFF です。
• "WEBVTT" という文字列。
• オプションで、WEBVTT の右側のテキストヘッダー。
  • WEBVTT の後に少なくとも 1 つの空白が必要です。
  • このヘッダーを使用して、ファイルに説明を追加することができます。
  • テキストヘッダーでは、改行または "-->" という文字列を除いて、どのようなものも使用することができます。

WEBVTT 文字列は、WEBVTT ファイルで唯一要求される部分であるため、最もシンプルな　WEBVTT ファイルは次のようになります。

WEBVTT

例えば、下記はテキスト入りのヘッダーを示しています。 このテキストは、少なくとも 1 つの空白またはタブで隔てる必要があります。

WEBVTT このファイルにはキューがありません。

WebVTT キュー

キューは、具体的な時間経過に伴って表示される単一のキャプション、字幕、その他のテキストブロックを定義します。 キューはヘッダーと、STYLE または REGION ブロックの後に現れなければなりません。

各キューは 3 行以上の行で構成されます。

• オプションのキュー識別子に続く改行。
• 本文テキストをどの時点に表示すべきかを示すキューのタイミング。これらはオプションで、最初の設定の前に少なくとも1つの空間があり、各設定の間にも空間があり、単一の改行が続くキュー設定に従うことができます。 キューの本文テキストは、複数行にまたがる可能性があり、空行で終了します。

単純なキューの例を以下に示します。 最初の行では、文字列 "-->" を使用して別個の時刻を指定することで、キューの表示開始時点と終了時点を指定します。 2 行目は表示するテキストを定義します。

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

次のキューは少し複雑です。 キュー識別子 "1 - Title Crawl" で始まり、これは JavaScript や CSS でキューを参照するために使用することができます。 また、キューの時点の後にキュー設定があり、キューの位置を設定します。

1 - Title Crawl
00:05.000 --> 00:09.000 line:0 position:20% size:60% align:start
Because:
- It will perforate your stomach.
- You could die.

出力は内容テキスト内の改行をそのまま反映しますので、表示されているように、ハイフン (-) 文字を用いて箇条書きリストを作成することができます。 一般的に、ブラウザーがテキストを適切に折り返すため、改行は必要な場合のみ挿入するようにしましょう。

キューの中で「余分な」空行を使用しないことが重要です。例えば、タイミングラインとキューの内容の間や、キューの内容の中に空行を入れないようにしてください。 これは、空行があると現在のキューがそこで終わってしまうからです。

キューの各部分については、以下の節でさらに詳しく説明します。

キュー識別子

識別子は、キューを識別する名前です。スクリプトからキューを参照するために使用できます。改行を含むことはできず、文字列 "-->" を含むことはできません。それは単一の改行で終わらなければなりません。番号をつけるのが一般的ですが（例えば、1、2、3、...）、それらは一意である必要はありません。

例えば、下記は識別子を記載した複数のキューを含むファイルを示しています。

WEBVTT

1
00:00:22.230 --> 00:00:24.606
これは最初の字幕です。

2 Some Text
00:00:30.739 --> 00:00:34.074
これは 2 番目です。

3
00:00:34.159 --> 00:00:35.743
これは 3 番目です。

キューのタイミング

キューのタイミングは、キューがいつ表示されるかを示します。タイムスタンプで表される開始時刻と終了時刻があります。終了時刻は開始時刻より後でなければならず、開始時刻は前のすべての開始時刻より後でなければなりません。キューは、タイミングが重複するかもしれません。

WebVTT ファイルをチャプターに使用している場合（<track> の kind は chapters です）、ファイルは重複するタイミングを持つことはできません。

各キューのタイミングには次の 5 つの要素があります。

• 開始時刻のタイムスタンプ。
• 少なくとも 1 つのスペース。
• 文字列 "-->"。
• 少なくとも 1 つのスペース。
• 終了時刻のタイムスタンプ。開始時刻より後でなければなりません。

タイムスタンプは、次の 2 つの形式のいずれかになります。

• mm:ss.ttt
• hh:mm:ss.ttt

そのコンポーネントは次のように定義されています。

hh

時を表し、2 桁以上でなければなりません。2 桁を超えることがあります（例えば、9999:00:00.00）。

mm

分を表し、00 以上 59 以下でなければなりません。

ss

秒を表し、00 以上 59 以下でなければなりません。

ttt

ミリ秒を表し、000 以上 999 以下でなければなりません。

キューのタイミングの例をいくつか示します。

• 基本的なキューのタイミングの例

  00:00:22.230 --> 00:00:24.606
  00:00:30.739 --> 00:00:34.074
  00:00:34.159 --> 00:00:35.743
  00:00:35.827 --> 00:00:40.122
  

• 重複するキューのタイミングの例

  00:00:00.000 --> 00:00:10.000
  00:00:05.000 --> 00:01:00.000
  00:00:30.000 --> 00:00:50.000
  

• 重複しないキューのタイミングの例

  00:00:00.000 --> 00:00:10.000
  00:00:10.000 --> 00:01:00.581
  00:01:00.581 --> 00:02:00.100
  00:02:01.000 --> 00:02:01.000
  

キュー設定

キュー設定は、動画上にキュー本体のテキストを表示する位置を決めるために使用するオプションのコンポーネントです。これには、テキストを水平に表示するか垂直に表示するかが含まれます。それらは 0 個以上存在することができ、各設定が 2 回以上使用されない限り、それらは任意の順序で使用できます。

キュー設定は、キューのタイミングの右側に追加します。キューのタイミングと最初の設定の間、および各設定の間には 1 つ以上のスペースが必要です。設定の名前と値はコロンで区切ります。設定では大文字と小文字が区別されるため、次のように小文字を使用してください。次の 5 つのキュー設定があります。

vertical

一部のアジアの言語のように、テキストを水平ではなく垂直に表示することを示します。取りうる値は 2 つあります。

rl

書字方向は右から左

lr

書字方向は左から右

line

vertical が設定されていない場合は、テキストを垂直方向に表示する場所を指定します。vertical が設定されている場合、line はテキストを水平方向に表示する場所を指定します。値は次の何れかです。

行番号

数値は、映像に表示されるキューの最初の行の垂直位置です。正の数値はトップダウン、負の数値はボトムアップを示します。

パーセント値

0 から 100 までの整数（小数点を含まない）で、その後にパーセント記号 (%) を付けなければなりません。

line	vertical を省略	vertical:rl	vertical:lr
line:0	上端	右端	左端
line:-1	下端	左端	右端
line:0%	上端	右端	左端
line:100%	下端	左端	右端

position

vertical を設定しなかった場合、position はテキストが水平に現れる位置を指定します。vertical を設定した場合、position はテキストが垂直に現れる位置を指定します。値は 0 以上 100 以下のパーセント値です。

position	vertical を省略	vertical:rl	vertical:lr
position:0%	左端	上端	上端
position:100%	右端	下端	下端

size

vertical を設定しなかった場合、size はテキスト領域の幅を指定します。vertical を設定した場合、size はテキスト領域の高さを指定します。値は 0 以上 100 以下のパーセント値です。

size	vertical を省略	vertical:rl	vertical:lr
size:100%	幅全体	高さ全体	高さ全体
size:50%	半分の幅	半分の高さ	半分の高さ

align

テキストの配置を指定します。設定している場合、テキストは size キュー設定で指定された領域内に配置されます。

align	vertical を省略	vertical:rl	vertical:lr
align:start	左端	上端	上端
align:center	水平方向に中央揃え	垂直方向に中央揃え	垂直方向に中央揃え
align:end	右端	下端	下端

キュー設定の例を見てみましょう。 最初の行は設定がないことを示しています。2 行目は、サインやラベルの上にテキストを重ねるために使用します。3 行目はタイトルに使用できます。最後の行はアジアの言語に使われるかもしれません。

00:00:05.000 --> 00:00:10.000
00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
00:00:05.000 --> 00:00:10.000 position:10%,line-left align:left size:31%
00:00:05.000 --> 00:00:10.000 position:90% align:right size:35%
00:00:05.000 --> 00:00:10.000 position:45%,line-right align:center size:90%

キュー本体

本体は、字幕やクローズドキャプションのテキストのようなキューのコンテンツを定義するところです。 本体のテキストには改行を含めることができますが、空白行を含めることはできません。これは、2 つの連続する改行に相当します。空白行はキューの終わりを表します。

キュー本体のテキストには、文字列 -->、アンパサンド文字 (&)、小なり記号 (<) を含めることはできません。 必要であれば、代わりに文字参照を使用することができます。たとえば、アンパサンドには & を、小なりには < を使用します。 タグとの混同を避けるために、大なり記号 (>) の代わりに大なりエスケープシーケンス > を使用することをお勧めします。 メタデータに WebVTT ファイルを使用している場合、これらの制限は適用されません。

すべての主要ブラウザーでは、キュー、メモ、または他のテキストに任意の文字参照を使用できます。 古いバージョンのブラウザーでは、名前付き文字参照の以下のサブセットのみに対応している場合があります。

キュー本体テキストタグ

キュー内のテキストのマークアップやスタイル設定には、<b> などの多数のタグを使用することができます。 ただし、WebVTT ファイルが <track> 要素の中で使われていて、その属性 kind が chapters である場合は、タグを使うことができません。

タイムスタンプタグ

タイムスタンプは、キューの開始タイムスタンプより大きく、キュー本体内の前のタイムスタンプより大きく、キューの終了タイムスタンプより小さくなければなりません。アクティブテキストは、タイムスタンプと次のタイムスタンプの間、または本体に別のタイムスタンプがない場合は本体の最後までのテキストです。本体内のアクティブテキストより前のテキストはすべて過去のテキストです。アクティブテキストより後のテキストはすべて将来のテキストです。これによりカラオケ風のキャプションが実現できます。

1
00:16.500 --> 00:18.500
When the moon <00:17.500>hits your eye

1
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie

1
00:00:20.500 --> 00:00:21.500
That's <00:00:21.000>amore

次のタグは、キューで使用できる HTML タグで、開始タグと終了タグ（例えば、<b>テキスト</b>）が必要です。 これらのタグでマークアップされたテキストは、::cue 擬似要素を使用して STYLE ブロックで書式化することができます。

イタリック体タグ (<i></i>)

含まれているテキストをイタリック体にします。

xml

<i>text</i>

太字タグ (<b></b>)

含まれているテキストを太字にします。

xml

<b>text</b>

下線タグ (<u></u>)

含まれているテキストに下線を引きます。

xml

<u>text</u>

クラスタグ (<c></c>)

CSS クラスを使用して含まれているテキストをスタイルします。

xml

<c.classname>text</c>

ルビタグ (<ruby></ruby>)

ルビ文字（すなわち、他の文字の上にある小さな注釈文字）を表示するためにルビテキストタグと共に使用します。

xml

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

ルビテキストタグ (<rt></rt>)

ルビ文字（つまり、他の文字の上にある小さな注釈文字）を表示するためにルビタグとともに使用します。

xml

<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>

ボイスタグ (<v></v>)

クラスタグと同様に、CSS を使用して含まれているテキストをスタイル設定するためにも使用します。

xml

<v Bob>text</v>

言語タグ (<lang></lang>)

RFC 5646: Tags for Identifying Languages (別名 BCP 47) で定義された形式を使用して、具体的な言語または言語のバリエーションに属するものとしてマークアップされたテキストをハイライトする際に使用します。

xml

<lang en-GB>Engish text as spoken in Great Britain!</lang>

NOTE ブロック

NOTE ブロックは、WebVTT ファイルにコメントを追加するために使用できるオプションの節です。 これは、ファイルを読む人々を意図したものであり、ユーザーには表示されません。 例えば、作成者の連絡先を記録したり、構造の概要を提供したり、まだ書く必要があるキューのプレースホルダを追加したりするために使用することができます。

これらは、ヘッダーの後に続く WebVTT ファイル内のどこでも使用することができます。

NOTE ブロックには改行を入れることができますが、2 つの改行を連続して格納することはできません。2 つの改行を連続して格納すると、ブロックの終わりを示す空行が作成されます。

コメントには、文字列 -->、アンパサンド文字 (&)、小なり記号 (<) を含めることはできません。 必要であれば、代わりに文字参照を使用することができます。たとえば、アンパサンドには & を、小なりには < を使用します。 タグとの混同を避けるために、大なり記号 (>) の代わりに大なりエスケープシーケンス > を使用することをお勧めします。

コメントは 3 つの部分から構成されます。

• 文字列 NOTE
• 空白または改行
• 上記に示した以外の 0 以上の文字。

いくつか例を示します。

NOTE これは単一行コメントです

NOTE
これは単純な複数行コメントです

NOTE
複数行にまたがる
単一のコメントです。

NOTE このように複数行にまたがる
コメントを作成できます。

NOTE TODO まだ作業が残っていることを示す行を追加することができます。

STYLE ブロック

STYLE ブロックはオプションの節で、WebVTT ファイル内にキューの CSS スタイルを埋め込むために使用することができます。 これらのスタイルはキューの外観とサイズを指定するために使用しますが、位置やレイアウトは指定できません。これらはキュー設定で制御できます。

STYLE ブロックは、ファイル内のすべてのキューブロックより前に現れなければなりません。

各ブロックは以下の行で構成されています。

• 文字列 STYLE に続く、0 個以上の空白またはタブ文字、そして改行。
• 一致する CSS スタイルを定義し、適用する文字列は、::cue 擬似要素を使用します。

ブロックには文字列 --> を含めることはできません。 改行は含めることができますが、2 行の改行を連続して含めることはできません。2 行の改行は空白行を作成し、ブロックの終わりを示します。

下記に、2 つの STYLE ブロックを含む単純な WebVTT ファイルを示します。 ::cue を使用して、すべてのキューテキストにテキスト色を適用し、<b></b> タグでタグ付けされたテキストだけに異なるテキスト色を適用しています。

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* スタイルブロックでは、空行や「ダッシュダッシュ大なり」を使用することはできません。 */

NOTE コメントブロックはスタイルブロックの間に使用することができます。

STYLE
::cue(b) {
  color: peachpuff;
}

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

NOTE スタイルブロックは最初のキューの後には現れることができません。

すべてのキュー本体テキストとの照合

::cue を使用して、キューの内容テキストすべてについて照合します。

例えば、次の STYLE ブロックは、すべてのキューテキストと一致し、それを黄色に色付けするというものです。

STYLE
cue {
  color: yellow;
}

タグ型との照合

::cue() にタグを型セレクターとして入力すると、c、i、b、u、ruby、rt、v、langな どの具体的なキュー本体テキストタグでマークアップされたキューテキストと一致するキューテキストと一致します。

例えば、次のブロックは、 lang で黄色にマークアップされたキュー本体テキストと、その他のタグが赤でマークアップされたものに一致します。

STYLE
cue(c),
cue(i),
cue(b),
cue(u),
cue(ruby),
cue(rt),
cue(v) {
  color: red;
}
cue(lang) {
  color: yellow;
}

クラスセレクターの照合

クラスセレクターを ::cue() で使用すると、マークアップされたすべてのタグと照合します。

次の WebVTT ファイルの STYLE ブロックは、すべてのタグが myclass クラスを保有しているため、続くすべてのテキストと一致します。

WEBVTT

STYLE
::cue(.myclass) {
  color: yellow;
}

00:00:00.000 --> 00:00:08.000
<c.myclass>Yellow!</c>
<i.myclass>Yellow!</i>
<u.myclass>Yellow!</u>
<b.myclass>Yellow!</b>
<u.myclass>Yellow!</u>
<ruby.myclass>Yellow! <rt.myclass>Yellow!</rt></ruby>
<v.myclass Kathryn>Yellow!</v>
<lang.myclass en>Yellow!</lang>

具体的なタグとクラスを選択するには、::cue() のどちらも指定する必要があります。

STYLE ::cue(b.myclass) {
  color: yellow;
}

属性の照合

特定のタグと属性でマークアップされたキュー本体テキストは、属性セレクターを使用して照合することができます。

例えば、次の WebVTT ファイルを考えてみましょう。このファイルには、v と lang のキュー本体テキストタグを使用してマークアップされたテキストがあり、属性を使用して具体的な音声 ("Salame") と言語を指定します。

WEBVTT

STYLE
::cue([lang="en-US"]) {
color: yellow;
}
::cue(lang[lang="en-GB"]) {
color: cyan;
}
::cue(v[voice="Salame"]) {
color: lime;
}

00:00:00.000 --> 00:00:08.000
Yellow!

00:00:08.000 --> 00:00:16.000
<lang en-GB>Cyan!</lang>

00:00:16.000 --> 00:00:24.000
I like <v Salame>lime.</v>

擬似クラスの照合

例えば、属性の照合を使用して、具体的な言語のテキストにスタイル設定を行うことができます。 下記 STYLE ブロックで示されているように、:lang() 疑似クラスを使用して言語を照合することもできます。

STYLE
::cue(:lang(en)) {
  color: yellow;
}
::cue(:lang(en-GB)) {
  color: cyan;
}

同様に、:past および :future 擬似クラスと照合させることで、カラオケのような体験を提供することができます。

video::cue(:past) {
  color: yellow;
}
video::cue(:future) {
  color: cyan;
}

他にも、link、nth-last-child、nth-child などの疑似クラスも同様に動作します。

キュー ID の照合

::cue() 内の id を指定することで、特定のキューの id と照合します。

例えば、次の WebVTT ファイルは、識別子 cue1 のキューを緑色にスタイル設定するでしょう。

WEBVTT

STYLE ::cue(#cue1) {
  color: green;
}

cue1
00:00:00.000 --> 00:00:08.000
Green!

WebVTT CSS では、HTML ページと同様にエスケープシーケンスを使用します。下記は、キュー識別子内の空間をエスケープする方法を示す例です。

WEBVTT

STYLE
::cue(#crédit\ de\ transcription) {
  color: red;
}

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™

仕様書

ブラウザーの互換性

関連情報

• CSS の ::cue および ::cue() 擬似要素