canvas+video=背景视频

你可能学过<video>和<canvas>这两个标签，那有没有想过这两个标签结合起来使用呢。其实，两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。

<video width=480 height=360 id=v controls loop>
	<!--chrome-->
	<source src=video/video.mp4 type=video/mp4>
	<!--ff3.6以上,chrome,opera-->
	<source src=video/video.ogg type=video/ogg>
	<!--ff4.0以上，chrome,opera-->
	<source src=video/video.webm type=video/webm>
</video>

</video>

我们给<video>标签设置了两个属性controls和loop。controls是向用户显示控件，比如播放按钮，loop是循环播放。在<video>标签中包含3个子元素<source>，每一个引用一段不同编码格式的视频，来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频，有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。

html和css代码：

body{background:black;}
#c{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;
    height:100%;}
#v{position:absolute;top:50%;left:50%;margin:-180px 0 0 -240px;}

body{background:black;}

#c{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;

height:100%;}

#v{position:absolute;top:50%;left:50%;margin:-180px 0 0 -240px;}

<canvas id=c></canvas>
<video id=v controls loop>
	<source src=video.ogg type=video/ogg>
	<source src=video.webm type=video/webm>
	<source src=video.mp4 type=video/mp4>
</video>

</video>

我们让视频在浏览器中居中，并让canvas布满浏览器，把canvas元素放在前面是让他在视频的底下，来达到背景播放的效果。
js代码：

	document.addEventListener('DOMContentLoaded', function(){
		var v = document.getElementById('v');
		var canvas = document.getElementById('c');
		var context = canvas.getContext('2d');
	 
		var cw = Math.floor(canvas.clientWidth / 10);
		var ch = Math.floor(canvas.clientHeight / 10);
		canvas.width = cw;
		canvas.height = ch;
	 
		v.addEventListener('play', function(){
			draw(this,context,cw,ch);
		},false);
	 
	},false);
	 
	function draw(v,c,w,h) {
		if(v.paused || v.ended)	return false;
		c.drawImage(v,0,0,w,h);
		setTimeout(draw,20,v,c,w,h);
	}

document.addEventListener('DOMContentLoaded', function(){

var v = document.getElementById('v');

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

var context = canvas.getContext('2d');

var cw = Math.floor(canvas.clientWidth / 10);

var ch = Math.floor(canvas.clientHeight / 10);

canvas.width = cw;

canvas.height = ch;

v.addEventListener('play', function(){

draw(this,context,cw,ch);

},false);

function draw(v,c,w,h) {

if(v.paused || v.ended) return false;

c.drawImage(v,0,0,w,h);

setTimeout(draw,20,v,c,w,h);

}

这段js代码很简单，添加一个播放事件，在canvas上画出播放时的放大画面,效果如下：

drawImage方法允许在canvas中插入其他图像(img和canvas元素) 。drawImage函数有三种函数原型：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
drawImage

setTimeout后面的参数是draw函数的参数，语法如下：

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

1 2	var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay);

<html> <head> <meta charset="UTF-8"> <title>Video/Canvas Demo</title> <style> body {background: black;} #c {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;} #v {position: absolute;top: 50%;left: 50%;margin: -180px 0 0 -240px;} </style> <script> document.addEventListener('DOMContentLoaded', function(){ var v = document.getElementById('v'); var canvas = document.getElementById('c'); var context = canvas.getContext('2d'); var cw = Math.floor(canvas.clientWidth / 10); var ch = Math.floor(canvas.clientHeight / 10); canvas.width = cw; canvas.height = ch; v.addEventListener('play', function(){ draw(this,context,cw,ch); },false); },false); function draw(v,c,w,h) { if(v.paused || v.ended) return false; c.drawImage(v,0,0,w,h); setTimeout(draw,20,v,c,w,h); } </script> </head> <body> <canvas id="c"></canvas> <video id="v" loop="loop" controls="controls" width="480" height="360"> <source src="http://www.zcblog.net/resource/video/video.mp4" type="video/mp4" /> <source src="http://www.zcblog.net/resource/video/video.ogg" type="video/ogg" /> <source src="http://www.zcblog.net/resource/video/video.webm" type="video/webm" /> </video> </body> </html>

提示：你可以先修改部分代码再运行。

这里推荐2个在线视频格式转换firefogg或者Online convert，大家感兴趣的话可以尝试一下。

ZC Garden

canvas+video=背景视频

2 Comments

发表评论取消回复

2 Comments

发表评论 取消回复

发表评论取消回复