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

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

相关推荐
毕设做完了吗?10 天前
视频相似度检测算法(带课设报告)
人工智能·算法·机器学习·音视频
语音之家10 天前
2025年CCF先进音频技术竞赛
人工智能·音视频
CJ点10 天前
FFmpeg命令全解析:三步完成视频合并、精准裁剪、英伟达显卡加速
ffmpeg·显卡·合并·amd·英伟达·裁剪
音视频牛哥10 天前
音视频全链路开发实践:基于SmartMediakit的架构设计与应用实战
音视频·大牛直播sdk·rtsp播放器·rtmp播放器·安卓rtmp播放器·rtmpplayer·linux rtsp
十年编程老舅10 天前
音视频流媒体高级开发-学习路线
ffmpeg·音视频·音视频开发·音视频编解码·c++音视频·流媒体服务器·音视频学习路线
weisian15110 天前
一款强大的音视频处理工具--FFmpeg-2--常用音频处理示例
音视频·mpeg-2
9527华安11 天前
国产安路FPGA实现MIPI视频解码转HDMI输出,基于SC500摄像头,提供TD工程源码和技术支持
fpga开发·音视频·csi·mipi·dphy·安路fpga·sc500
niech_cn11 天前
微信小程序扫码添加音频播放报错{errCode:10001, errMsg:“errCode:602,err:error,not found param“}
微信小程序·小程序·音视频
扫地僧98511 天前
免费1000套编程教学视频资料视频(涉及Java、python、C C++、R语言、PHP C# HTML GO)
java·c++·音视频
dualven_in_csdn11 天前
创世新布控球 国标
音视频