track要素で、<video>に字幕などを表示する

<video>要素内に入れて、字幕を表示したサンプルです。

HTMLはこちら ↓

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="video/uchiage.webmsd.webm" type="video/webm">
  <source src="video/uchiage.mp4" type="video/mp4">
  <track src="track.vtt" kind="subtitles" srclang="ja" label="日本語" default>
  <track src="tracken.vtt" kind="subtitles" srclang="en" label="English">
  <p>このブラウザは動画再生に対応していません</p>
</video>

「track.vtt」ファイル（日本語）はこちら ↓

WEBVTT

00:00.000 --> 00:02.000
打ち上げが始まりました！

00:09.500 --> 00:15.500 line:10%
百花繚乱

00:16.500 --> 00:21.000 line:80% position:80%
そろそろ終了です

「tracken.vtt」ファイル（English）はこちら ↓

WEBVTT

00:00.000 --> 00:02.000
The launch of fireworks began！

00:09.500 --> 00:15.500 line:10%
How beautiful.

00:16.500 --> 00:21.000 line:80% position:80%
It will finish soon.

track要素で、<audio>にキャプションなどを…

<audio>要素も、同じく<track>要素を使えるはず...なのですが、今のところ実装しているブラウザは無いそうです。
各ブラウザは <audio>内の <track>要素の内容を無視するらしいです。

一応サンプルを貼っておきます。

HTMLはこちら

<audio controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
  <track src="track2.vtt" kind="captions">
  <p>このブラウザは音声再生に対応していません</p>
</audio>

「track2.vtt」ファイルのソースはこちら ↓

WEBVTT

00:00.000 --> 00:06.000
サンプルサウンドです

00:06.000 --> 00:10.000
著作権：OVER RISE

<video>要素で音声を再生し <track>要素で字幕をつける

<video>要素でも音声ファイルは再生できるので、これで音声にWebVTTファイルの内容を表示する方法です。
参考：WebVTT and Audio - Ian Devlin :: Web Developer

WebVTTファイルは上のサンプルと同じもの（「track2.vtt」）を使っています。

HTMLはこちら

<video controls preload="auto">
  <source src="audio/sample.mp3" type="audio/mp3">
  <source src="audio/sample.wav" type="audio/wav">
  <track src="track2.vtt" kind="subtitles" srclang="ja" default>
  <p>このブラウザは音声再生に対応していません</p>
</video>

CSSはこちら。
疑似要素「::cue」で WebVTTのキューテキストのスタイルを指定することもできます。

video {
	width:100%;
	height:120px;
	border:1px solid #ccc;
	object-fit:initial;  /*WebKit用（追加されるテキストボックスが収まるように）*/
    }
video::cue {  /*疑似要素「::cue」を使います*/
	font-size:20px; /*デフォルトのフォントサイズだと小さいので大きくしました*/
    }