H5实现透明通道视频

目前在做一个项目，项目要求是ui和视频相结合，做出动态效果。视频要在ui界面之上，但是又必须可以看见下面的ui界面，所有必须要求视频是透明的。
接着我查了一些资料，但是对h5如何运用透明通道的视频的资料介绍很少。一般透明视频是.mov格式的，但是h5并不支持此格式。所以下面我介绍2种方法。

第一种方法，png序列帧

动画由ui设计师做好，导出透明的png序列帧图片，我们只需要加个定时器每个多少毫秒切换图片即可。下面贴代码

js部分：

$(function(){    var i=0;    var timer;    timer=setInterval(function(){        i++;        i=parseInt(i);        if(i<10){            $(".img img").attr("src","img/my layout_0000"+i+".png");        }else if(i<100){            $(".img img").attr("src","img/my layout_000"+i+".png");        }else if(i<374){                $(".img img").attr("src","img/my layout_00"+i+".png");        }else if(i==374){            $(".img img").attr("src","img/my layout_00374.png");            clearInterval(timer)        }       },100)})

---

-* 解析*

判断语句是因为ui设计给我序列帧图片的时候图片的序号名字就已经定了，我也没有改，因为图片374张。这个根据你图片的名字来看是否需要判断语句。当到最后一张图片的时候，就清除定时器。

第二种方法，canvas

运用canvas绘制视频，直接贴代码

html部分

<video id="video" style="display:none" autoplay>    <source src="png.webm"></source></video><canvas id="buffer" width="1920" height="1080"></canvas><canvas id="output" width="1920" height="1080"></canvas>

js部分

(function(){            var outputCanvas = document.getElementById('output'),                output = outputCanvas.getContext('2d'),                bufferCanvas = document.getElementById('buffer'),                buffer = bufferCanvas.getContext('2d'),                video = document.getElementById('video'),                width = outputCanvas.width,                height = outputCanvas.height,                interval;               function processFrame() {                buffer.drawImage(video, 0, 0);//drawImage(要绘画的元素, x轴, y轴)                //getImageData 复制画布上指定图像的像素数据                var image = buffer.getImageData(0, 0, width, height),                    imageData = image.data,                    alphaData = buffer.getImageData(0, 0, width, height).data;                    //console.log(imageData)                for (var i = 3, len = imageData.length; i < len; i+=4) {                    imageData[i] = alphaData[i-1];                }                // putImageData() 将图像数据放回画布：                output.putImageData(image, 0, 0, 0, 0, width, height);            }            video.addEventListener('play', function() {                clearInterval(interval);                interval = setInterval(processFrame, 40)            }, false);            video.addEventListener('ended', function() {                video.play();            }, false);        })();

-* 解析*
html部分我没有做视频格式的兼容处理，因为我的项目只在固定的电脑上，指定chrome浏览器，所以不考虑兼容性。
js部分用到canvas的一些知识
getImageData 复制画布上指定图像的像素数据
putImageData() 将图像数据放回画布

另外

项目中需要一些互动按钮，但是按钮要在视频的下面，所有的元素都需要在视频之下，但是这样就没有办法给按钮加事件了，那怎么办呢？其实很简单，一个按钮需要写2个，一个带ui元素的按钮，在视频之下，海还有一个是透明的按钮，在视频之前，同时定位在ui元素按钮的上面，即两个按钮是重合的，所以只需要给透明的按钮加事件就可以了

---