前端如何制作出透明背景视频

近期项目需求做一个透明背景的视频叠加摄像头的交互，于是去了解了一下透明背景视频的实现方法。

1、webm视频格式

首先想到的当然是先跟动画大哥交流能否制作出透明背景的视频，给出的答案是webm格式的视频是可以背景透明的，OK，拿到视频，放到项目中，chorme打开，完美播放，这也太简单了吧，但移动端是不会同意让你这么轻易就播放视频的，Safari，微信，都不支持，没办法，只能继续寻找方案。

2、CSS 样式去掉背景

利用css样式 mix-blend-mode 混合模式，有一个属性 screen 就是黑色和其它元素进行混合的时候表现为透明。但这种方法有一种情况没法解决，就是如果视频中有元素是半透明的就无法成功了。

有关这种方法详细描述可以参考链接：如何让MP4 video视频背景色变成透明？

3、webgl 渲染带透明通道的视频

首先，你需要一个这样的视频

或者一个这样的视频

尽量使得视频尺寸宽高比为1:2或者2:1，这样渲染出来的视频就是1:1大小了。然后用webgl将视频渲染在画布上，渲染的同时将视频上下&