H5实现透明通道视频

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部分

"buffer" width="1920" height="1080">
"output" width="1920" height="1080">

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元素按钮的上面，即两个按钮是重合的，所以只需要给透明的按钮加事件就可以了

---