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

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

相关推荐
用户96715113916721 天前
Rust 如何轻松实现 RTMP 流媒体推送?深入解析直播推流场景与解决方案
rust·ffmpeg
小小码农Come on1 天前
ffmpeg命令整理
ffmpeg
暮云星影1 天前
三、FFmpeg学习笔记
linux·ffmpeg
逼子格1 天前
五种音频器件综合对比——《器件手册--音频器件》
嵌入式硬件·音视频·硬件工程师·硬件测试·电子器件·硬件笔试真题·音频器件
EasyGBS1 天前
视频设备轨迹回放平台EasyCVR打造视频智能融合新平台,驱动智慧机场迈向数字新时代
网络·人工智能·安全·音视频
EasyGBS1 天前
视频设备轨迹回放平台EasyCVR综合智能化,搭建运动场体育赛事直播方案
网络·安全·音视频
SKYDROID云卓小助手1 天前
三轴云台之相机技术篇
运维·服务器·网络·数码相机·音视频
yunteng5211 天前
音视频(一)ZLMediaKit搭建部署
音视频·zlmediakit·安装搭建
Merokes2 天前
关于Gstreamer+MPP硬件加速推流问题:视频输入video0被占用
c++·音视频·rk3588
EasyGBS2 天前
NVR接入录像回放平台EasyCVR视频系统守护舌尖上的安全,打造“明厨亮灶”云监管平台
安全·音视频