FFmpeg将绿幕视频处理成透明视频播放

怎么在网页端插入透明视频呢,之前在做Web3D项目时,使用threejs可以使绿幕视频透明显示在三维场景中,但是在网页端怎么让绿幕视频透明显示呢?

如图上图,视频背景遮挡住后面网页内容

想要如下图效果

之前有使用过ffmpeg,发现它可以扣掉绿幕,然后导出透明背景的webm视频格式,执行命令如下:

复制代码
ffmpeg -i video.mp4 -filter_complex "[0:v]colorkey=0x87231a: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=0x87231a:0.1:0.1[ckout]" 中 0x87231a 色值,它是是绿幕视频背景的RGB值,具体可以换成你自己的绿幕值。

引用如下:

html 复制代码
<video id="video">
    <source src="./output.webm" type="video/webm">
    <p>您的浏览器不支持内嵌视频,请升级至最新版或者使用其他浏览器观看。</p>
</video>

ffmpeg的安装使用及其他参数,可到我的另一篇文章里查看FFmpeg视频切片

注释:案例中绿幕视频来源于网络下载学习使用,这里如有侵权联系我删除~

相关推荐
karmueo469 小时前
视频序列和射频信号多模态融合算法Fusion-Vital解读
算法·音视频·多模态
昨日之日20069 小时前
Video Background Remover V3版 - AI视频一键抠像/视频换背景 支持50系显卡 一键整合包下载
人工智能·音视频
xmode20 小时前
centos7.9安装ffmpeg6.1和NASM、Yasm、x264、x265、fdk-aac、lame、opus解码器
ffmpeg·centos
站在巨人肩膀上的码农21 小时前
全志T507 音频ALSA核心层注册流程分析
驱动开发·音视频·安卓·全志·alsa·声卡
王江奎1 天前
FFmpeg 升级指北
ffmpeg
】余185381628001 天前
碰一碰发视频源码搭建与定制化开发:支持OEM
音视频
张晓~183399481211 天前
数字人分身+矩阵系统聚合+碰一碰发视频: 源码搭建-支持OEM
线性代数·矩阵·音视频
山登绝顶我为峰 3(^v^)31 天前
如何录制带备注的演示文稿(LaTex Beamer + Pympress)
c++·线性代数·算法·计算机·密码学·音视频·latex
雨夜和阳晨1 天前
FFmpeg录制屏幕及声音
ffmpeg
吴声子夜歌1 天前
FFmpeg——基础知识及FFmpeg框架
ffmpeg