H5实现透明通道视频
目前在做一个项目，项目要求是ui和视频相结合，做出动态效果。视频要在ui界面之上，但是又必须可以看见下面的ui界面，所有必须要求视频是透明的。
接着我查了一些资料，但是对h5如何运用透明通道的视频的资料介绍很少。一般透明视频是.mov格式的，但是h5并不支持此格式。所以下面我介绍2种方法。
第一种方法，png序列帧
动画由ui设计师做好，导出透明的png序列帧图片，我们只需要加个定时器每个多少毫秒切换图片即可。下面贴代码
js部分：
$(function(){
var i=0;
var timer;
timer=setInterval(function(){
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="" autoplay>
<source src="png.webm"></source>
</video>
<canvas id="buffer" width="1920" height="1080"></canvas>
<canvas id="output" width="1920" height="1080"></canvas>
(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元素按钮的上面，即两个按钮是重合的，所以只需要给透明的按钮加事件就可以了
H5实现透明通道视频目前在做一个项目，项目要求是ui和视频相结合，做出动态效果。视频要在ui界面之上，但是又必须可以看见下面的ui界面，所有必须要求视频是透明的。 接着我查了一些资料，但是对h5如果运用透明通道的视频的资料介绍很少。一般透明视频是.mov格式的，但是h5并不支持此格式。所以下面我介绍2种方法。第一种方法，png序列帧动画由ui设计师做好，导出透明的png序列帧图片，我们只需要加个定
首先，你得有个
透明Webm，哪里找？tb搜索：
透明粒子素材，格式一般为mov格式，带alpha
通道
然后用cmd命令，结合ffmpeg转换为vp8或vp9编码得webm
视频：
H:\iApp\小丸工具箱月儿\xiaowan_lune\tools\ffmpeg.exe -i “I:\ZUOYE_2021\Cinematic DustFX 001.mov” -c:v libvpx -pix_fmt yuva420p “I:\ZUOYE_2021\Cinematic DustFX 001.mov.webm”
1、尽量把视频素材压缩，即使高清的背景视频看上去极具诱惑力，但是加载缓慢给人的糟糕体验还是让你觉得会得不偿失的。建议使用1080/720p分辨率，750-1250数据数率，每秒24-25帧的素材。
2、在你视频后面加一个设置了对定位的半透明div，然后你还需要给这个div设置pointer-events: none;以保证对视频的有效点击。这样可以掩盖你的视频因质量不佳或者质量太好而抖动的问题。
直播近年来的风头可以说是一时无两，游戏直播、颜值/才艺直播、带货直播；火爆的直播间通常有各种刷屏大礼物，通常是
透明背景，这就是
透明视频的主要用途之一；
多数
视频格式并不支持alpha
通道，支持alpha
通道的
视频格式可以参考文献：
List of video formats supporting alpha channels
少数
视频格式支持alpha
通道，如webm、mov等；其中webm是google的标准，是一种
视频容器格式，内部编码一般是v
