canvas+video=背景视频

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

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

html和css代码:

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

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


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

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

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

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

2 Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注