WebVTTは、ブラウザーが読める字幕の形式です。そして、読めるのはこれだけです。SRTをHTML5の動画に付けても、何ひとつ起こりません。エラーも、警告も、字幕もです。
拡張子は .vtt で、なかはSRTによく似ています。変わるのは3つ。必須のヘッダーを持つこと、SRTがコンマを置くところに点を置くこと、そしてSRTより格段に多くのことを表せることです。
なかに入っているもの
WEBVTT
1
00:00:04.120 --> 00:00:06.480
数字に入る前に、
いまどこにいるかを見直しましょう。
2
00:00:06.600 --> 00:00:09.000 line:90% align:start
思っていなかったのは、
2週目の落ち込みでした。
この1行目は WEBVTT と書かれていなければなりません。それがない場合、その前にバイト順マークが立つ場合、あるいは空行が先に来る場合、ブラウザーはファイルまるごとを捨てます。
そこから先は、これまでと同じブロックです。ひと目で分かる違いが2つあります。ミリ秒の前の点と、時間の行の末尾に設定をぶら下げられることです。
SRTに対して足されるもの
位置とそろえ方。line:90% は字幕を下げ、align:start は左に寄せ、position:20% は横にずらします。映像にすでにあるテロップを隠さないために便利です。
**スタイル。**ファイルの先頭に本物のCSSを書いた STYLE ブロックを置き、本文のなかに <c.narrator> のようにクラスを撒きます。色、大きさ、影。
誰が話しているか。<v マルタ>こんにちは</v> というタグが、声を示すやり方です。これを認識できるプレーヤーは別の色で描けますし、そうでないものは素通りします。インタビューや会議では、これが「文字の壁」と「読めるもの」との境目になります。
領域とノート。NOTE ブロックは誰にも見えないコメントを保ち、REGION は画面の一部を、独自のスクロールを持つ区画として区切ります。生放送で上がっていくテロップのようなものです。
**ブロックの名前。**時間の行の上で、各ブロックは名前——intro、question-3——を受け取れます。JavaScriptからそれを指すためです。
VTTが必要になるとき
動画がブラウザーで再生されるときはいつもです。ページに <video> とその <track> があるなら、そのファイルはWebVTTでなければなりません。
<video controls>
<source src="kaigi.mp4" type="video/mp4" />
<track src="kaigi.vtt" kind="subtitles" srclang="ja" label="日本語" default />
</video>
いまどきのウェブのプレーヤー（Video.js、Plyr、Shaka）でも、字幕をWebVTTの断片として配るHLSの配信でも同じです。
ブラウザーの外に出ると、これを求める相手はほとんどいません。パソコンの編集ソフト、みんなが昔から使ってきたプレーヤー、ほとんどの投稿フォームは、いまもSRTを待っています。
転ぶ2つのことと、それがファイルのせいではないこと
サーバーは text/vtt として返さなければなりません。text/plain や application/octet-stream で渡されると、一部のブラウザーはこれを捨てます。直す場所はサーバーの設定であって、ファイルではありません。
そして、同じオリジンから来るか、CORSを備えている必要があります。Access-Control-Allow-Origin ヘッダーなしに別のドメインに置かれた .vtt は、手で開けばうまく動くアドレスであっても、決して読み込まれません。「動画は動くのに字幕が出ない」という古典の第1の原因がこれです。
どちらも内容の問題ではなく、どちらもページ上に見えるエラーを残しません。ブラウザーの開発者ツールのネットワークのタブに現れます。しかも、そこを見に行くべきだと知っている場合だけ。
変換する
SRTからVTTへの道は簡単です。ヘッダーを置き、コンマを点に替え、SRTが文字として持っていて、WebVTTならマークアップと受け取ってしまう & と < を escape する。SRTをVTTには、この3つをブラウザーのなかで片づけます。ファイルはどこにも出ません。
逆向きでは、SRTに言えないものはすべて外に残ります——位置、スタイル、領域——。だからVTTをSRTにはそれらを外し、声のタグは行頭の「マルタ：」に変えます。SRTがそれを示せるやり方です。どちらを、何のために選ぶか。
手元にあるのが動画で、字幕ではない場合
アップロードしてください。時間と、声ごとに分かれて名前の付いた文字起こしと、要約をお返しします。VTTはそこから、組み上がった状態で、声の印付きで出てきます。始めるのにアカウントは要りません。