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