HTML5 vedio标签与canvas的结合实现视频同步模糊效果

首先是<vedio>的在线效果。

其次是对于canvas的基础知识。

FROM： http://zcblog.net/index.php/2011/343

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

view plaincopy to clipboardprint?

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

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

html和css代码：

view plaincopy to clipboardprint?

1. body{background:black;}  
2. #c{position:absolute;top:0;bottombottom:0;left:0;rightright:0;width:100%;  
3.     height:100%;}  
4. #v{position:absolute;top:50%;left:50%;margin:-180px 0 0 -240px;}  

view plaincopy to clipboardprint?

1. <canvas id=c></canvas>  
2. <video id=v controls loop>  
3.     <source src=video.ogg type=video/ogg>  
4.     <source src=video.webm type=video/webm>  
5.     <source src=video.mp4 type=video/mp4>  
6. </video>  

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

view plaincopy to clipboardprint?

1. document.addEventListener('DOMContentLoaded', function(){  
2.     var v = document.getElementById('v');  
3.     var canvas = document.getElementById('c');  
4.     var context = canvas.getContext('2d');  
5.   
6.     var cw = Math.floor(canvas.clientWidth / 10);  
7.     var ch = Math.floor(canvas.clientHeight / 10);  
8.     canvas.width = cw;  
9.     canvas.height = ch;  
10.   
11.     v.addEventListener('play', function(){  
12.         draw(this,context,cw,ch);  
13.     },false);  
14.   
15. },false);  
16.   
17. function draw(v,c,w,h) {  
18.     if(v.paused || v.ended) return false;  
19.     c.drawImage(v,0,0,w,h);  
20.     setTimeout(draw,20,v,c,w,h);  
21. }  

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


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

1. drawImage(image, dx, dy)  
2. drawImage(image, dx, dy, dw, dh)  
3. 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坐标的偏移量）的宽度和高度值。

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

view plaincopy to clipboardprint?

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

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

由于我的服务器不支持文件下载，就无法看到视频了。这里推荐一个在线视频格式转换firefogg，大家可以在本地尝试一下。

需要注意不同浏览器支持的视频的格式哦！