WebVTT

WebVTT は時系列にそったテキスト表示に利用されるデータフォーマットです。<track> 要素とともに使われます。  主な用途は <video>  要素に字幕を追加することです。

WebVTT はテキストベースのデータフォーマットです。UTF-8 でエンコードされていなければなりません。スペース、またはタブを使用できます。

mime タイプは text/vtt です。

WebVTT ボディ

WebVTT ファイルは 2 つの必須項目と、4 つのオプショナル項目からなります。

• オプション：byte order mark (BOM)
• WEBVTT という文字列
• オプション： WEBVTT の右隣に書かれるヘッダ
  • WEBVTT の後には最低1つのスペースがなければならない
  • ファイルの説明を記入できる
  • 改行、もしくは "-->"以外の文字列であれば、何でも利用できる
• 空行。2行以上の連続した空行は1行として扱われる
• 0個以上のキュー、もしくはコメント
• 0個以上の空行

例 1 - 最も単純な WEBVTT ファイル

  WEBVTT

例 2 - きわめて単純な WebVTT ファイル

  WEBVTT - This file has no cues.

例 3 - 一般的な WebVTT ファイル例

  WEBVTT - This file has cues.

  14
  00:01:14.815 --> 00:01:18.114
  - What?
  - Where are we now?

  15
  00:01:18.171 --> 00:01:20.991
  - This is big bat country.

  16
  00:01:21.058 --> 00:01:23.868
  - [ Bats Screeching ]
  - They won't get in your hair. They're after the bugs.

WebVTT コメント

コメントは WebVTT ファイルに情報を追加するための選択可能な要素です。コメントはファイルを読む人のために付けられるもので、ユーザーには見えません。コメントには改行を含めることができますが、空の行とすることはできません。二回連続で改行することによって、空の行と同等のものができます。空の行はコメントの終端を意味します。

コメントに "-->" という文字列やアンパサンド (&) 、または小なりの不等号 (<) を含めることはできません。代わりに、アンパサンドには "&amp;"、小なり記号には "&lt;" のエスケープシーケンスを使用してください。また、タグとの混同を避けるため、大なり記号 (>) の代わりに "&gt;" のエスケープシーケンスを使うことを推奨します。 

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

• 文字列 NOTE
• スペースまたは改行
• 上記以外の0文字以上の文字

例 4 - 一般的な WebVTT の例

  NOTE This is a comment

例 5 - 複数行のコメント

  NOTE
  Another comment that is spanning
  more than one line.

  NOTE You can also make a comment
  across more than one line this way.

例 6 - 一般的なコメントの使い方

  WEBVTT - Translation of that film I like

  NOTE
  This translation was done by Kyle so that
  some friends can watch it with their parents.

  1
  00:02:15.000 --> 00:02:20.000
  - Ta en kopp varmt te.
  - Det är inte varmt.

  2
  00:02:20.000 --> 00:02:25.000
  - Har en kopp te.
  - Det smakar som te.  

  NOTE This last line may not translate well.

  3
  00:02:25.000 --> 00:02:30.000
  -Ta en kopp.

WebVTT キュー

キューは開始時間、終了時間、およびテキストのペイロードを含む単一のブロックです。例 6 はヘッダ、空の行、そして空の行で区切られた 5 つのキューから成り立っています。キューは以下の 5 つの要素から成り立っています。

• オプション:改行の後に続くcueID
• Cue timings
• オプション：開始と終了の前に一つ以上の空白を挟み、それぞれのcue設定の間にも一つ以上の空白を挟むcue設定。
• 一行以上の改行
• キューペイロードテキスト

例7 - キューの例

1 - Title Crawl
00:00:5.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
Some time ago in a place rather distant....

キュー識別子

キュー識別子はこのキューの名前です。これを使ってスクリプトからキューを参照できます。 キュー識別子には改行や-->という文字列を含んではいけません。終わるときには改行を入れなければいけません。 一意な（ほかに同じ名前を含んではいけない）識別子である必要があります。ただし共通の数字は可能です(e.g. 1, 2, 3, ...)。

例8 - Cue identifier from Example 7

1 - Title Crawl

例9 - Common usage of identifiers

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

3
00:00:34.159 --> 00:00:35.743
Third

キュータイミング

キュータイミングはキューがいつ現れるかを示します。 開始時間と終了時間をタイムスタンプによって表します. 終了時間は開始時間より遅く,そして開始時間はこれより前のキューの開始時間の値と同じ、もしくはこれ以上に遅い値を使用する必要があります。 キュータイミングはオーバーラップ（被る）することもあります。

WebVTT fileをchaptersとして使っている場合 (<track> kindがchaptersの時)キューはオーバーラップできません。

キュータイミングは５つの要素からできています:

• 開始タイムスタンプ
• 一つ以上の空白
• 文字列 "-->"
• 一つ以上の空白
• 終了タイムスタンプ
  • 開始タイムスタンプより遅い時間である必要があります。

タイムスタンプはどちらかのフォーマットでなければいけません:

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

これらの補足をしておきます:

• hhは時間を表します
  • Must be at least two digits and not less than 01
  • Hours can be greater than two digits (e.g. 9999:00:00.000)
• mm は分を表します
  • 00~59の中でなければいけません
• ssは秒を表します
  • 00~59の中でなければいけません
• tttはミリ秒を表します
  • 000~999の中でなければいけません

Example 10 - Basic cue timing examples

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

Example 11 - Overlapping cue timing examples

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

Example 12 - Non-overlapping cue timing examples

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

キュー設定

キュー設定はビデオの上のキューのテキストが表示される場所を設定する為に使われるオプションです。これにはテキストが垂直や平行に表示されるかどうかなどが含まれます。There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

• vertical
  • Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.

  Table 1 - vertical values
  vertical:rl	writing direction is right to left
  vertical:lr	writing direction is left to right

• line
  • Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.
  • Value can be a line number
    • The line height is the height of the first line of the cue as it appears on the video
    • Positive numbers indicate top down
    • Negative numbers indicate bottom up
  • Or value can be a percentage
    • Must be an integer (i.e. no decimals) between 0 and 100 inclusive
    • Must be followed by a percent sign (%)

  Table 2 - line examples
  	vertical omitted	vertical:rl	vertical:lr
  line:0	top	right	left
  line:-1	bottom	left	right
  line:0%	top	right	left
  line:100%	bottom	left	right

• position
  • Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.
  • Value is a percentage
  • Must be an integer (no decimals) between 0 and 100 inclusive
  • Must be followed by a percent sign (%)

  Table 3 - position examples
  	vertical omitted	vertical:rl	vertical:lr
  position:0%	left	top	top
  position:100%	right	bottom	bottom

• size
  • Specifies the width of the text area. If vertical is set, size specifies the height of the text area.
  • Value is a percentage
  • Must be an integer (i.e. no decimals) between 0 and 100 inclusive
  • Must be followed by a percent sign (%)

  Table 4 - size examples
  	vertical omitted	vertical:rl	vertical:lr
  size:100%	full width	full height	full height
  size:50%	half width	half height	half height

• align
  • Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.

  Table 5 - align values
  	vertical omitted	vertical:rl	vertical:lr
  align:start	left	top	top
  align:middle	centred horizontally	centred vertically	centred vertically
  align:end	right	bottom	bottom

例13 - キュー設定の例

デモの中の最初の行には設定がありません。２行目はsignやlabelの上にテキストを重ねて使用します。３行目はタイトルとして使われています。最後の行はアジアの言語で使用されます。

00:00:5.000 --> 00:00:10.000
00:00:5.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:5.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:5.000 --> 00:00:10.000 vertical:rt line:-1 align:end

キューペイロード

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

キューペイロードテキストタグ

<bold>などのいくつかのタグをテキスト内で使用することができます。しかし、もしWebVTTファイルをif the WebVTT file is used in a <track> 要素のkind属性の値がchaptersの場合、タグを使用することができません。

• Timestamp tag
  • タイムスタンプはキューの開始時間より大きく、 greater than any previous timestamp in the cue payload, キューの終了時間より小さい必要があります。 Theactive text is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before theactive text in the payload isprevious text . Any text beyond theactive text isfuture text . This enables karaoke style captions.

  例12 - カラオケ風のテキスト

  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
        

以下のタグは開始タグと終了タグが要求されます。 (例 <b>text</b>).

• Class tag (<c></c>)
  • Style the contained text using a CSS class.

  Example 14 - Class tag

  <c.classname>text</c>

• Italics tag (<i></i>)
  • Italicize the contained text.

  Example 15 - Italics tag

  <i>text</i>

• Bold tag (<b></b>)
  • Bold the contained text.

  Example 16 - Bold tag

  <b>text</b>

• Underline tag (<u></u>)
  • Underline the contained text.

  Example 17 - Underline tag

  <u>text</u>

• Ruby tag (<ruby></ruby>)
  • Used with ruby text tags to display ruby characters (i.e. small annotative characters above other characters).

  Example 18 - Ruby tag

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

• Ruby text tag (<rt></rt>)
  • Used with ruby tags to display ruby characters (i.e. small annotative characters above other characters).

  Example 19 - Ruby text tag

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

• Voice tag (<v></v>)
  • Similar to class tag, also used to style the contained text using CSS.

  Example 20 - Voice tag

  <v Bob>text</v>

互換性

仕様

• https://dev.w3.org/html5/webvtt/