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视频切片

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

相关推荐
邪恶的贝利亚1 小时前
一些有关ffmpeg 使用(1)
ffmpeg
RenderNow4 小时前
深耕ffmpeg系列之AVFrame
ffmpeg
xiaoh_79 小时前
解决视频处理中的 HEVC 解码错误:Could not find ref with POC xxx【已解决】
python·ffmpeg·音视频
王江奎10 小时前
Android FFmpeg 交叉编译全指南:NDK编译 + CMake 集成
android·ffmpeg
灏瀚星空13 小时前
Python在AI虚拟教学视频开发中的核心技术与前景展望
人工智能·python·音视频
Everbrilliant8920 小时前
音视频之H.265/HEVC环路后处理
音视频·h.265·h.265/hevc·去方块滤波技术·h.265环路后处理·sao技术·h.265去方块滤波
飞桨PaddlePaddle20 小时前
Wan2.1和HunyuanVideo文生视频模型算法解析与功能体验丨前沿多模态模型开发与应用实战第六期
人工智能·算法·百度·音视频·paddlepaddle·飞桨·deepseek
EasyDSS1 天前
视频监控从安装到优化的技术指南,视频汇聚系统EasyCVR智能安防系统构建之道
大数据·网络·网络协议·音视频
阿酷tony1 天前
将视频生成视频二维码步骤
音视频·视频格式·视频二维码·视频生成二维码