H5实现alpha通道视频

目前在做一个项目，项目要求扫描AR播放一段alpha通道视频，我查了一些资料，发现h5如何运用透明通道的视频的资料介绍很少。一般透明视频是mov格式的，但是h5只支持MP4、webm和ogg，并不支持mov。 首先，我们先了解一下alpha通道是什么：alpha通道是一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域，其中白表示不透明，黑表示透明，灰表示半透明。RGBA中的A指的就是alpha，alpha通道一般用作不透明度参数。如果一个像素的alpha通道数值为0%，那它就是完全透明的（也就是看不见的），而数值为100%则意味着一个完全不透明的像素（传统的数字图像）。在0%和100%之间的值则使得像素可以透过背景显示出来。

在我查资料的时候发现webm是可以带alpha通道的，可是悲催的是只有chrome支持webm的alpha通道，别的浏览器暂时还不支持，sad；只好想别的方法了。   第一种方法PNG序列帧 我们常见的带alpha通道的文件是png图片，所以我首先想到的也是最简单的方法是通过png序列帧实现alpha透明通道视频，代码如下：

$(function(){
var i = 0;
var timer = setInterval(function(){
i++;
i = parseInt(i);
if (i < 10){
$(“#img img”).attr(“src”,”./img/Comp 1_0000”+i+”.png”);
} else if(i < 100){
$(“#img img”).attr(“src”,”./img/Comp 1_000”+i+”.png”);
} else if(i < 234){
$(“#img img”).attr(“src”,”./img/Comp 1_00”+i+”.png”);
} else if(i == 234){
$(“#img img”).attr(“src”,”./img/Comp 1_00234.png”);
clearInterval(timer)
}
}, 1000 / 24);
})

但是经过测试发现序列帧方法实现通道视频有个缺点，就是图片太大了；体验不是很好。   第二种方法借助canvas重新绘制视频内容。 将视频画面取出来将不要的部分抠除，要留下的部分放到canvas里重新绘制成视频，首先需要用视频剪辑软件将视频做成这样： 上下两部分，当然左右也是可以的，随便你怎么高兴怎么来，一边是原本的视频，一边是黑白的，白色表示你要留下的部分，黑色表示你要抠除的部分。 下面是代码：

var showCanvas = document.getElementById(“show”);
var showCtx = showCanvas.getContext(“2d”);
var bufferCanvas = document.getElementById(“buffer”);
var bufferCtx = bufferCanvas.getContext(“2d”);
var video = document.getElementById(‘alpha-video’);
var width = showCanvas.width;
var height = showCanvas.height;
var image;
var alphaData;

video.play();

function processFrame () {
bufferCtx.drawImage(video, 0, 0, width, height * 2);
image = bufferCtx.getImageData(0, 0, width, height),
alphaData = bufferCtx.getImageData(0, height, width, height).data;

for (var i = 3, len = image.data.length; i < len; i = i + 4) {
image.data[i] = alphaData[i - 1];
}
showCtx.putImageData(image, 0, 0, 0, 0, width, height);
requestAnimationFrame(processFrame);
}

video.addEventListener(‘play’, function() {
$(‘#loading’).hide();
processFrame();
}, false);

video.addEventListener(‘ended’, function() {
console.log(‘播放完毕跳转’);
}, false);

经过测试这种方法在pc上面显示效果比较好，较新的手机上也没有问题，但是在低端手机上会有卡顿。 完整demo  github链接：https://github.com/zhchi-me/alpha-video-html5