最近,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