WebVTT

キューの構造

ファイルは、ヘッダーと、それに続くキューで構成されます。各キューはSubRipと似たブロックで、任意の2つの部分を持ちます。

WEBVTT
 
intro
00:00:23.000 --> 00:00:24.500 line:0
<v Celia>You're a jerk,
<i>Thom</i>.
 

タイムコード

キュー以外のブロック

キューのテキスト

色

CSSを使わずに色を指定できるクラスは8つあります: white、lime、cyan、red、yellow、magenta、blue、blackです。背景色には、同じ8つにbg_を付けたものを使います。それ以外の色は、独自のクラスとSTYLEブロックが必要です。

STYLE
::cue(.gold) { color: #ffd700; }

00:00:30.800 --> 00:00:34.000
<c.gold>Why don't you just admit that</c>

キューの設定

Subtitldはline、position、alignを、字幕の画面上の位置として読み取ります。これはSubRipの{\an1}から{\an9}と同じ9つの位置です。また、書き出すときもこれらを使います。上端にはline:0、中央にはline:50%,center、左右の端にはposition:10% align:startとposition:90% align:endを使います。

WebVTTとSubtitld

WebVTTファイルを開く

Subtitldは、各キューをタイミングの行で見つけ、次の内容を読み取ります。

• ヘッダー、NOTE、STYLE、REGIONのブロックは字幕ではなく、それぞれの役割として扱います。キューの識別子は名前として扱います。
• 時間は、時間の有無、ピリオドまたはカンマにかかわらず読み取ります。
• 音声は字幕の話者として扱い、吹き替え用に準備します。
• WebVTTの色クラスと、STYLEブロックが他のクラスに与える色を読み取ります。
• line、position、alignを、画面上の位置として読み取ります。
• WebVTTはUTF-8を求めていますが、任意のエンコーディングを読み取ります。

Subtitldが扱えない内容は省かれます。リージョン、キューのサイズ、縦書き、ルビの読み仮名、カラオケのタイムスタンプが該当します。テキストそのものは残ります。

WebVTTの書き出し

エクスポート、次に字幕、そしてVTTを選ぶと、次のオプションが表示されます。

• テキスト原文、翻訳、または両方（翻訳は原文の下に配置）。
• 話者名省くか、テキストの前に付けるか（Thom: …）、またはWebVTT独自の方法である音声タグ（<v Thom>）として書き出します。
• 書式残すか、取り除きます。
• 時間をずらすすべての字幕を、同じ量だけ早めたり遅らせたりします。

ファイルは、WebVTTの要件どおり常にUTF-8です。WEBVTTの後に、開始時刻の順に並んだキューが続き、すべての時刻には時間が付きます。マークアップとして読まれてしまう文字は実体参照で書かれ、空の字幕は省かれます。

Webページでの利用

<video controls src="tears-of-steel.mp4">
  <track kind="subtitles" src="tears-of-steel.en.vtt"
         srclang="en" label="English" default>
</video>

ファイルはtext/vttとして配信してください。別のドメインから読み込む場合は、動画にcrossoriginを指定し、サーバーがAccess-Control-Allow-Originヘッダーを返す必要があります。そうでなければ、ブラウザはトラックを読み込みません。

WebVTTかSubRipか

再生ソフト、エディタ、アップロードにはSubRip、Web上の動画にはWebVTTを選んでください。両者を並べて比較した内容はSubRipのページにあります。

豆知識