用html5的视频网站带后台的网站建设

  最近我们尝试在网页上叠加数字人讲解的功能，发现如果直接在网页上放一个矩形的数字人视频，效果会很差，首先是会遮挡很多画面的内容，其次就是不管使用任何任务背景，画面都和后面的网页不是很协调，如图所示：

  如果能去掉视频的背景，只展示人物效果就会好很多。经过一些调研和实验，我终于探索出一种可以批量自动化实现透明背景视频的方法，最终实现的效果如下：

  数字人的视频我是使用的腾讯智影生成带绿幕的视频，要实现透明背景，有个很关键的信息需要知道，不是所有的视频格式（视频编码）都支持透明背景，首先我们最常用的mp4就是不支持（不管是h264还是h265）都不支持，目前支持透明背景的只有少部分视频编码，比如google的vp9(webm)格式，上图中我用就是webm+vp9编码的视频。实测这种视频兼容性也不行，比如在苹果的safari浏览器下，就无法透明背景。

  另外一个问题是webm的格式也并不普及，比如腾讯智影导出只支持mp4，像剪映甚至final cut pro这样专业的剪辑软件都无法编辑导出透明背景的webm格式。 这里经过尝试，发现使用ffmpeg可以很轻松扣掉绿幕，然后导出透明背景的webm视频格式，完整命令如下：

ffmpeg -i green_video.mp4 -filter_complex "[0:v]colorkey=0x299530:0.1:0.1[ckout]" -map "[ckout]" -map 0:a -c:v libvpx-vp9 -b:v 2M -c:a libvorbis output.webm

  这里需要说下其中最关键的参数 -filter_complex "[0:v]colorkey=0x299530:0.1:0.1[ckout]" -map "[ckout]" 其中0x299530 是我使用的绿幕的RGB值， 具体可以根据你绿幕的RGB值调整。 其他参数就比较简单了,具体可以参考我这个ffmpeg系列文章.