videoタグの動画をcanvasを使って表示する

html5のvideoタグを使って動画をサイトに組み込む場合、スマホで動画を再生するとフルスクリーン表示になってしまいます。iosは基本的にフルスクリーン表示になるはずです。

動画上をクリックして表示されている物の情報を出すなどインタラクティブなサイトを作ろうとすると、このフルスクリーン表示が問題になってしまいます。

今回はこのフルスクリーン表示を何とか解消できないかと思い、videoタグの動画をcanvasに出力する方法を探ってみました。

videoタグの動画をcanvasに切り取る

demo1

まずはhtmlです。videoタグで動画を設置して、動画の出力先となるcanvasと動画を出力させるためのbuttonも作っておきます。


<video controls id="v" width="480px" height="270px">
<source src="video/sample1.mp4" width="480px" height="270px">
<source src="video/sample1.webm" width="480px" height="270px">
<source src="video/sample1.ogg">
</video>

<button onClick="drawVideo()">スキャン</button>

<canvas id="c" width="480px" height="270px"></canvas>

</video>

ここではsourceにもサイズを指定します。

続いてjsです。


function drawVideo(){
var video = document.getElementById("v");
var canvas = document.getElementById("c");
canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);
}

function drawVideo(){

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

var canvas = document.getElementById("c");

canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);

}

canvasに画像や動画を描写するにはdrawImage()メソッドを使用します。

canvasに表示させるためのスクリプト自体はかなりシンプルですが、sourceのどの部分をもってくるかなどサイズの指定が実感複雑です。詳しくはこちらを参照してください。http://www.html5.jp/canvas/ref/method/drawImage.html

videoタグの動画をcanvas内にリアルタイムで表示させる

demo2

今度はcanvasの中で動画が再生されるようにします。


<button onClick="outputVideo1()">output</button>

1	<button onClick="outputVideo1()">output</button>

htmlはdemo1とほとんと変わらず、buttonタグ内だけ名前を変更してあります。


function outputVideo1(){
	
var video = document.getElementById("v");

video.addEventListener("timeupdate", function(){
        var canvas = document.getElementById("c");
        canvas.getContext("2d").drawImage(video, 0, 0, 480, 270); 
    }, true);
}

function outputVideo1(){

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

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

var canvas = document.getElementById("c");

canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);

}, true);

}

timeupdateイベントは現在の再生位置が変更された時に発生するので、動画が再生されている状態で常にcanvasに動画が出力されます。

しかし、実際再生してみるとカクカクしてしまい常に出力ができません。

タイマーを使ってフレームレートに合わせる

demo3

今度はタイマーを使って動画のフレームレートに合わせて処理を行うようにします。


function outputVideo2(){
 var video = document.getElementById("v");

 setInterval(function(){
	 var canvas = document.getElementById("c");
	 canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);
 }, 1000/30);
}