ウェブ動画テキストトラック形式 (WebVTT)
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
ウェブ動画テキストトラック形式 (WebVTT) は、<video>
および <audio>
要素内のコンテンツと同期するタイミング設定されたテキストトラックを表示するためのプレーンテキストファイル形式です。
例えば、クローズドキャプションや字幕テキストを <video>
に追加する際に使用することができます。
メディア要素に関連付けられた WebVTT ファイルは、<track>
要素を使用して追加します。ファイルで定義された VTT コンテンツの表示を参照してください。
メディア要素は、異なる時点のデータを表す複数のファイルに関連付けることができます。例えば、さまざまなロケールに翻訳された、クローズドキャプション、字幕、チャプター見出しなどです。
メモ: WebVTT コンテンツは、WebVTT API を使用してプログラムで作成し、管理することもできます。
概要
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 つあります。
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 スタイルを埋め込むために使用することができます。
これらのスタイルはキューの外観とサイズを指定するために使用しますが、位置やレイアウトは指定できません。これらはキュー設定で制御できます。
メモ: WebVTT キューは、video/audio 要素を埋め込んだ関連文書から読み込まれた 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 スタイルブロックは最初のキューの後には現れることができません。
メモ: WebVTT API のキュースタイル設定例では、次の多くの例に従うことで、ライブの例が示されています。
すべてのキュー本体テキストとの照合
::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™
仕様書
Specification |
---|
WebVTT: The Web Video Text Tracks Format |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS の
::cue
および::cue()
擬似要素