<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>video</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body onload="ini()">
<div id="videoPreview" ><p>video preview</p></div>
<button type="button" onclick="video.pause();">停止</button>
<button type="button" onclick="video.play() ;">開始</button>
<script>
function ini() {
// video要素をつくる
video = document.createElement('video');
video.id = 'video';
//video.width = 400 ;
//video.height = 300 ;
video.autoplay = true;
document.getElementById('videoPreview').appendChild(video);
// video要素にWebカメラの映像を表示させる
media = navigator.mediaDevices.getUserMedia({
audio: false,
video: {
width: { ideal: 1080 },
height: { ideal: 720 }
}
}).then(function(stream) { video.srcObject = stream; } );
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>動画に字幕を入れる</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
.text-image{
position: relative;
width: 320px;
}
.text-image img{
width: 100%;
}
.text-image p{
position: absolute;
top: 70%;
left: 10%;
font-size: 30px;
color: #ffffff;
}
-->
</style>
</head>
<body>
<!--video src="Xperia.mp4" width="600" controls-->
<video src="Xperia.mp4" controls>
<track src="jimaku.vtt" kind="subtitles" srclang="ja" label="日本語" default>
</video>
</body>
</html>
WEBVTT
00:00.000 --> 00:05.000
動画開始（表示位置指定なし）
00:05.000 --> 00:10.000
複数行表示
１行目
２行目
00:10.000 --> 00:15.000 line:10%
垂直位置指定（上）line:10%
00:15.000 --> 00:20.000 line:80%
垂直位置指定（下）line:80%
00:20.000 --> 00:25.000 position:10%
水平位置指定（左）position:10%
00:25.000 --> 00:30.000 position:90%
水平位置指定（右）position:90%
00:30.000 --> 00:35.000 align:start
水平位置指定（左）align:start
00:35.000 --> 00:40.000 align:middle
水平位置指定（中央）align:middle
00:40.000 --> 00:45.000 align:end
水平位置指定（中央）align:end
00:45.000 --> 00:50.000
<b>太字タグ</b>
00:50.000 --> 00:55.000
<i>イタリック体タグ</i>
00:55.000 --> 02:30.000
<u>下線タグ</u>