html5 video javascriptで動画のタイムにあわせてテロップを出す

サイトに埋め込んだ動画にjavascriptを使ってテロップを出す方法です、そもそも「動画に元からテロップ入れておけばいいじゃないか」ってことになってしまいますが….。応用すればflashを使わずにvideoタグとjsで色々な事ができそうな気がします。

demo

方法としてはcurrentTimeプロパティを使って動画の現在尺に合わせた内容の文章を表示させています。

video ＋ javascript 現在の再生位置を表示する

テロップの前にまず現在の再生位置（再生時間）を表示させてみます。


var video = document.getElementById("v");

v.addEventListener("timeupdate", function(){
		document.getElementById("time").innerHTML = v.currentTime;
	}, false);

var video = document.getElementById("v");

v.addEventListener("timeupdate", function(){

document.getElementById("time").innerHTML = v.currentTime;

}, false);

htmlは各ブラウザに対応した動画ファイルを挿入して、再生位置を表示するpタグを書いておきます。


<video controls id="v">
<source src="video/sample1.mp4">
<source src="video/sample1.webm">
<source src="video/sample1.ogg">
</video>

<p id="time"></p>

</video>

「timeupdate:再生位置が変更された」というイベントで処理をさせる事で常に再生時間を取得してくれます。

video ＋ javascript 尺に合わせてテロップを出す

if分で尺を限定する事で、画にあったテロップが出せます。


v.addEventListener("timeupdate", function(){
		if(video.currentTime > 3){
			if(video.currentTime < 8){
				document.getElementById("price").innerHTML = "シャンパン￥2800";
			}
		}
	}, false);