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

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

相关推荐
脑子缺根弦24 分钟前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
肥or胖9 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频
笑虾9 小时前
bat 批处理实现 FFmpeg 命令导出 mov 到 png 序列帧
ffmpeg·png·mov·序列帧
DogDaoDao12 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
张海森-1688201 天前
视频码率是什么?视频流分辨率 2688x1520_25fps采用 h264格式压缩,其码率为
音视频
mortimer2 天前
当AI配音遇上视频:实现音画同步的自动化工程实践
python·ffmpeg·ai编程
DogDaoDao2 天前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
IoT砖家涂拉拉2 天前
萌宠语聊新模板!借助On-App AI降噪与音频处理技术,远程安抚宠物更轻松、更安心!
人工智能·ai·app·音视频·智能家居·智能硬件·宠物
AI视觉网奇2 天前
截取视频 截取mp4 视频缩放
音视频
DogDaoDao2 天前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成