videoタグの動画に字幕を表示する

html

HTML5で動画を表示させる時、videoタグを使用する。
これで表示させた動画に対して字幕を付ける場合、videoタグの中にtrackタグを設定することで実現できる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Video Sample</title>
</head>
<body>
    <video width="320" height="240" controls>
        <source src="sample.mp4" type="video/mp4">
        <track kind="subtitles" label="subtitle" src="subtitle.vtt" srclang="ja">
    </video>
</body>
</html>

こんな感じでtrackタグを実装する。
ちなみにvttファイルは字幕やキャプションのための標準規格で、一定のフォーマットに従っている必要がある。（参考: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API）

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

上記のように、表示されるタイミングと内容をvttファイルに記述する。
すると、動画再生中に指定された時間の間、設定した文字列が字幕やキャプションとして表示される。