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

首先是的在线效果。

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

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

你可能学过

 <video width=480 height=360 id=v controls loop>

     <source src=video/video.mp4 type=video/mp4>

     <source src=video/video.ogg type=video/ogg>

     <source src=video/video.webm type=video/webm>
 video>

我们给

html和css代码：

 body{background:black;}
 #c{position:absolute;top:0;bottombottom:0;left:0;rightright: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>

我们让视频在浏览器中居中，并让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);
 }

这段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)

第一个参数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函数的参数，语法如下：

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

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

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

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