videoの情報をcanvasに書き出す理屈は以下のような形で実現できそう。
後は、show関数を編集して、動画にエフェクトを与えられたら面白そう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
<script>
<!--
//onload時の処理を記載
window.onload =function test() {
setInterval("show()",50); //フレームレートを指定
};
//videoのデータをcanvasに書き出す
function show() {
var canvas = document.getElementById("canvas");
var canvas_context = canvas.getContext('2d');
var video = document.getElementById("video");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas_context.drawImage(video,0,0);
}
-->
</script>
</head>
<body>
<div style="display:none"> <!--video本体は表示しない-->
<video id="video" autoplay="true">
<source src="test.mp4">
</video>
</div>
<canvas id="canvas"></canvas>
</body>
</html>
最終更新：2013年08月10日 17:57
