Canvas可以载入图片，那么Canvas 也可以载入视频。
Canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定
时器不停的抓取每帧的画面，放入Canvas画布里面。
示例1 ：
附上demo：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
#Mycanvas {
position: absolute;
top: 0;
left: 0;
}
#mvideo {
position: absolute;
top: 10%;
left: 10%;
width: 480px;
height: 360px;
margin: -180px 0 0 -240px;
}
</style>
</head>
<body>
<canvas id="Mycanvas">
</canvas>
<video loop controls autoplay id="mvideo" >
<source src="sintel.mp4" type="video/mp4"></source>
</video>
</body>
<script>
!(function(doc) {
var Mycanvas = doc.getElementById("Mycanvas"),
cont = Mycanvas.getContext("2d"),
Myvideo = doc.getElementById("mvideo");
cw = window.innerWidth;
ch = window.innerHeight;
Mycanvas.width = cw;
Mycanvas.height = ch;
Myvideo.addEventListener("canplay", function() {
var cont2 = cerateCanvas(cw, ch).getContext("2d");
draw(this, cont, cont2, cw, ch);
}, false)
function cerateCanvas(w, h) {
var cr = doc.createElement("canvas");
cr.width = w;
cr.height = h;
return cr;
}
function draw(v, c, c2, w, h) {
if(v.paused || v.ended) {
cancelAnimationFrame(stop);
return false;
}
c2.drawImage(v, 0, 0, w, h);
var idata = c2.getImageData(0, 0, w, h),
data = idata.data;
for(var i = 0; i < data.length; i = 4) {
var r = data[i],
g = data[i 1],
b = data[i 2];
brightness = (3 * r 4 * g b) >>> 3;
data[i] = brightness;
data[i 1] = brightness;
data[i 2] = brightness;
};
idata.data = data;
c.putImageData(idata, 0, 0);
var stop = requestAnimationFrame(function() {
draw(v, c, c2, w, h);
});
}
})(document)
</script>
</html>示例2 ：setInterval
附上代码：
代码语言：javascript复制<!DOCTYPE html>
<html>
<body>
<p>要使用的视频：</p>
<video id="video1" controls width="270" autoplay src="sintel.mp4"></video>
<p>画布（每 20 毫秒，代码就会绘制视频的当前帧）：</p>
<canvas id="myCanvas" width="270" height="135"></canvas>
</body>
<script>
var v = document.getElementById("video1");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function() {
var i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, 270, 135)
}, 20);
}, false);
</script>
</html>示例3 ：requestAnimationFrame
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi" />
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script>
!(function(doc) {
var cont = doc.getElementById("container");
var cw = window.innerWidth;
var ch = window.innerHeight;
var canvas = document.createElement('canvas');
canvas.width = cw;
canvas.height = ch;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
cont.appendChild(canvas);
var cont2D = canvas.getContext("2d");
var video = document.createElement('video');
video.preload = "auto";
video.volume = 0.3;
video.setAttribute('x-webkit-airplay', true);
video.setAttribute('webkit-playsinline', true);
video.setAttribute('webkit-playsinline', 'webkit-playsinline');
video.src = 'video/nigg2.mp4';
video.autoplay = "autoplay"; //是自动播放
video.addEventListener("play", function() {
draw(this, canvas, cont2D, cw, ch);
}, false)
function cerateCanvas(w, h) {
var cr = doc.createElement("canvas");
cr.width = w;
cr.height = h;
return cr;
}
function draw(v, c, c2, w, h) {
if(v.paused || v.ended) {
cancelAnimationFrame(stop);
return false;
}
c2.drawImage(v, 0, 0, w, h);
var stop = requestAnimationFrame(function() {
draw(v, c, c2, w, h);
});
}
})(document)
</script>
</html>
