你可能学过<video>和<canvas>这两个标签,那有没有想过这两个标签结合起来使用呢。其实,两个标签结合使用可以发生有趣的事情。下面来看一个简单的实例。
1 2 3 4 5 6 7 8 |
<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>标签设置了两个属性controls和loop。controls是向用户显示控件,比如播放按钮,loop是循环播放。在<video>标签中包含3个子元素<source>,每一个引用一段不同编码格式的视频,来兼容不同的浏览器。
不知道大家有没有用过在windows桌面播放视频,有些播放器可以支持这个功能。接下来我们就用<video>和<canvas>模拟这个有趣的功能。
html和css代码:
1 2 3 4 |
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;} |
1 2 3 4 5 6 |
<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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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函数有三种函数原型:
1 2 3 |
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函数的参数,语法如下:
1 2 |
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay); |
提示:你可以先修改部分代码再运行。
这里推荐2个在线视频格式转换firefogg或者Online convert,大家感兴趣的话可以尝试一下。
以后有了这个,flash啥的就可以不用管了。
@笑云天: IE是个杯具