WebVTTファイルを利用して動画に字幕を付ける

小ネタ。自分用のメモです。

WWDCのtranscriptをテキスト化しているasciiwwdcのリポジトリwwdc-session-transcriptsをながめてて、拡張子".vtt"てなんじゃろと思って調べてみたところ、WebVTTという規格のテキストであることがわかった。

テキストはこんな感じで、字幕のテキストの他に表示する時間や表示する形式が書かれている。シンプルな構造だね。

   WEBVTT
   X-TIMESTAMP-MAP=MPEGTS:181083,LOCAL:00:00:00.000

   00:00:13.236 --> 00:00:14.526 A:middle
   >> My name is Olivier Bonnet.

   00:00:14.526 --> 00:00:18.266 A:middle
   I'm the engineering manager for
   the CloudKit on the client side.

動画と組み合わせて字幕を表示させるには、html中のtrack要素で書いてやればよい。

   <video controls autobuffer autoplay loop id="wwdcvideo" width="100%">
       <source src="./2014/408_sd_swift_playgrounds.mov" type="video/quicktime" />
       <track kind="captions" src="./2014/408.vtt" type="text/vtt" srclang="en"
              label="English Subtitles" default />
   </video>

ちなみに2014年のWWDCの動画には最初から字幕データが入っているので、こんなことしなくても字幕付く。てゆか二重に表示される。

いやさ、Safariでそのまま見てると最大化しないと字幕のオプションでてこないから、気付かなかったんですよ！