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

写在前面

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

安装
下载FFmpeg

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

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

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

因此环境变量是这样的:

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

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

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

1. 基本格式转换

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

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

javascript 复制代码
const { execSync, exec } = require("child_process");

// 1. 基本格式转换 avi mp4 gif 等
execSync("ffmpeg -i tiktok.mp4 test.gif", { stdio: "inherit" });

生成的gif结果如下:

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

2. 提取视频中音频

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

javascript 复制代码
const { execSync, exec } = require("child_process");
// 2. 提取视频中音频
execSync("ffmpeg -i tiktok.mp4 test.mp3", { stdio: "inherit" })

结果如下:

3. 裁剪视频或音频

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

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

javascript 复制代码
const { execSync, exec } = require("child_process");

// 3. 裁剪视频 或 音频 -ss(set frame size设置帧长) ? -to ? ...
execSync("ffmpeg -ss 5 -to 10 -i tiktok.mp4 test2.mp3", { stdio: "inherit" });

结果如下:

4. 删除水印

用法:ffmpeg -i 视频文件名 -vf delogo=w=水印宽:h=水印高:x=水印x位置:y=水印y位置 新视频文件名

参数-vf:video filters,表示使用视频滤镜功能。

javascript 复制代码
const { execSync, exec } = require("child_process");

// 4. 删除水印 -vf(video filters) delogo=w=?:h=?...
execSync("ffmpeg -i tiktok.mp4 -vf delogo=w=240:h=120:x=10:y=10 test3.mp4", {
	stdio: "inherit",
});

结果如下:

5. 添加水印

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

javascript 复制代码
const { execSync, exec } = require("child_process");

// 5. 添加水印 -vf(video filters) drawtext=text=?:fontsize=?...
execSync(
  "ffmpeg -i test3.mp4 -vf drawtext=x=30:y=30:fontsize=40:fontcolor=white:text='ffmpeg' test7.mp4",
  { stdio: "inherit" }
);

结果如下:

6. 更多用法

ffmpeg -help查看更多用法

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

相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
魔尔助理顾问2 小时前
一个简洁高效的Flask用户管理示例
后端·python·flask
李长渊哦6 小时前
使用Druid连接池优化Spring Boot应用中的数据库连接
数据库·spring boot·后端
web135085886356 小时前
【Spring Boot】Spring AOP动态代理,以及静态代理
spring boot·后端·spring
nbsaas-boot7 小时前
Go 自动升级依赖版本
开发语言·后端·golang
zzyh1234567 小时前
springcloud的组件及作用
后端·spring·spring cloud
尚学教辅学习资料8 小时前
基于SpringBoot的图书借阅小程序+LW参考示例
spring boot·后端·小程序·java毕设·图书借阅
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
山海不说话8 小时前
从零搭建微服务项目Base(第5章——SpringBoot项目LogBack日志配置+Feign使用)
spring boot·后端·spring·spring cloud·微服务·logback