前端多媒体处理工具——ffmpeg的使用

写在前面

在前端领域,FFmpeg 是一个非常有用的工具,它提供了多种媒体格式的封装和解封装,包括多种音视频编码、多种协议的流媒体、多种色彩格式转换、多种采样率转换、多种码率切换等。可以在多种操作系统安装使用。

安装
下载FFmpeg

在网站根据对应电脑系统下载对应版本即可,windows下载下图版本。

4e5a40297716e5356ae5c672dab20cc.png
下载完成后选择合适的路径存放此工具包,根据对应路径配置环境变量:

我是将工具包放在下图目录:

14e3e2ad08587f70c57a2e4782c7b51.png
因此环境变量是这样的:

0f8345f67f6b8b241ecb82ae4dcc1a1.png
使用控制台输入ffmpeg -version,如果得到类似下图结果则表明配置成功:

70ee2bdfcf213737706d12cbf7e9109.png

配置完成后,在本篇文件主要介绍以下几个功能

  1. 基本格式转换 avi mp4 gif 等
  2. 提取视频中的音频
  3. 裁剪视频 或 音频
  4. 删除水印
  5. 添加水印

1. 基本格式转换

bd7dad42fcba6732e03f987aace3718.png

这里有一段名为tiktok.mp4的文件,我们通过使用FFmpeg将它转换为gif格式:

用法:ffmpeg -i 视频文件名 新格式视频文件名

const { execSync, exec } = require("child_process");


execSync("ffmpeg -i tiktok.mp4 test.gif", { stdio: "inherit" });

生成的gif结果如下:

ee6afda18ae3d071f6464736327ac5c.png
当然其他格式也同样可以,如avi、MP4等都可互相转换。

2. 提取视频中音频

用法:ffmpeg -i 视频文件名 音频文件名

const { execSync, exec } = require("child_process");

execSync("ffmpeg -i tiktok.mp4 test.mp3", { stdio: "inherit" })

结果如下:

0fc0ccb66eeaee1e410b1902369964c.png

3. 裁剪视频或音频

用法:ffmpeg -ss 开始时间 -to 结束时间 -i 视频/音频文件名 生成的视频/音频文件名

参数-ss:set frame size,表示设置帧长

const { execSync, exec } = require("child_process");


execSync("ffmpeg -ss 5 -to 10 -i tiktok.mp4 test2.mp3", { stdio: "inherit" });

结果如下:

21aea2d59635b8a98e7c1cdfd30bdf7.png

4. 删除水印

用法:ffmpeg -i 视频文件名 -vf delogo=w=水印宽:h=水印高:x=水印x位置:y=水印y位置 新视频文件名
参数-vf:video filters,表示使用视频滤镜功能。

const { execSync, exec } = require("child_process");


execSync("ffmpeg -i tiktok.mp4 -vf delogo=w=240:h=120:x=10:y=10 test3.mp4", {
	stdio: "inherit",
});

结果如下:

2c52ac287bb814b2515867044756016.png

5. 添加水印

用法:ffmpeg -i 视频文件名 -vf drawtext=x=水印x位置:y=水印y位置:fontsize=水印字体大小:fontcolor=水印字体颜色:text='水印内容' 新视频文件名

const { execSync, exec } = require("child_process");


execSync(
  "ffmpeg -i test3.mp4 -vf drawtext=x=30:y=30:fontsize=40:fontcolor=white:text='ffmpeg' test7.mp4",
  { stdio: "inherit" }
);

结果如下:

1697815490649.jpg

6. 更多用法

ffmpeg -help查看更多用法

1697815535555.jpg
ffmpge -help filter=参数:查看参数有哪些子参数,比如这里查看添加水印时使用的参数drawtext的子参数:

1697815701949.jpg

阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=21183,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?