WebVTTの字幕付き動画を再生する方法

最近,WebVTTファイルで字幕付き動画を作成する機会があった. WebVTTファイルは,フォーマットに従って,テキストエディタで編集すればよかったが,再生は,VLC media playerのような動画再生ソフトウェアでないと再生できないようだった. このためにわざわざ別のソフトウェアをインストールするのは手間なため, WebVTTは,ウェブブラウザで使用される字幕ファイルなことからHTMLファイルを作ってウェブブラウザ上で閲覧することにした.

動画ファイルは,video.mp4,字幕は,ClosedCaptions.en.vttとし,下記の内容でindex.htmlを作成し,すべて同じディレクトリに保存した.

<!DOCTYPE html>
<html lang="en">
<body>
    <video id="video" controls preload="metadata" width="100%">
        <source src="video.mp4" type="video/mp4">
        <track 
            type="text/vtt"
            label="English" 
            kind="subtitles" 
            srclang="en" 
            src="ClosedCaptions.en.vtt" 
            default>
    </video>
</body>
</html>

index.htmlをウェブブラウザでただ開くだけだと,Security errorがでてしまい表示できなかったので,保存したディレクトリ内で,HTTPサーバを下記コマンドで起動してlocalhost:8000を開き,閲覧した.

python -m http.server
# or
simplehttpserver