今回はHTML5で新しく加わったVIDEO要素を使って動画の再生と字幕挿入の方法を解説いたします。尚,Internet Exploereでは字幕は表われません。

HTMLのソース

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>焚き火の動画</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<meta name=”keywords” content=”焚き火”>
<meta name=”description” content=”焚き火”>
</head>
<body>

<video controls>
<source src=”fire.mp4″ type=”video/mp4″>
<source src=”fire.webm” type=”video/webm”>
<track src=”jatrack.vtt” label=”日本語” kind=”subtitles” srclang=”ja” default>
</video>

</body>

</html>

 

字幕用にjatrack.vttという新しいファイルを作成します。

WEBVTT

00:00.000 –> 00:05.252
みなさん、こんにちは。寒い日が続きますね。
00:05.252 –> 00:21.409
どうぞ、焚き火で暖まってください。

 

↓完成したWebページです。

https://www.sanpunhtml.net/kouji/douga.html