ffmpeg.js的基本使用

现在的视频格式有很多,比如MP4,WebM等,我们在开发过程中也经常需要进行格式转换,所以今天给大家分享一下ffmpeg,一个视频格式的处理工具

ffmpeg是什么

ffmpeg.js是js实现的ffmpeg库,它可以在浏览器端进行视频转码和处理

怎么使用

首先通过npm安装

npm install @ffmpeg/ffmpeg @ffmpeg/core -S

然后从模块中导出

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

createFFmpeg

createFFmpeg 是一个创建 ffmpeg 实例的工厂函数。

const ffmpeg = createFFmpeg({})

它的参数如下
corePath: 指定 ffmpeg-core.js 的加载路径。
log: 是否打开所有日志,默认为 false
logger: 获取日志消息的函数,例: ({ message }) => console.log(message)
progress: 跟踪进度的函数,例: p => console.log( p )

ffmpeg.run

ffmpeg.run(…args) 返回一个 Promise

(async () => {
  /* 等价于执行了 `$ ffmpeg -i flame.avi -s 1920x1080 output.mp4` */
  await ffmpeg.run('-i', 'flame.avi', '-s', '1920x1080', 'output.mp4');
})();

-format 输出所有可用格式
-f fmt 指定格式(音频或视频格式)
-i filename 指定输入文件名
-y 覆盖已有文件
还有很多这里就不一一说了,大家可自己搜索一下

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Vue中使用ffmpeg.js可以通过以下步骤实现: 1. 首先,你需要安装ffmpeg.wasm库。你可以使用npm来安装它,命令如下: ``` $ npm install @ffmpeg/ffmpeg @ffmpeg/core ``` 2. 在你的Vue组件中,你可以创建一个异步函数来将图片转换为视频。你可以使用createFFmpeg函数来创建一个ffmpeg实例,并加载ffmpeg.wasm库。然后,你可以使用fetchFile函数来获取图片文件,并使用ffmpeg.FS('writeFile', ...)将图片写入ffmpeg的虚拟文件系统中。 3. 接下来,你可以使用ffmpeg.run函数来运行ffmpeg命令,将图片合成为视频。你可以指定参数如帧率、输入文件、输出文件等。最后,你可以使用ffmpeg.FS('readFile', ...)来读取生成的视频文件,并使用URL.createObjectURL来创建视频的URL。 下面是一个示例代码片段,展示了在Vue中使用ffmpeg.js基本步骤: ```javascript import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; export default { data() { return { ffmpeg: null, imgArr: \[\], // 图片数组 videoUrl: '', videoTime: 10, // 视频时长 }; }, methods: { async imgToVideo() { this.ffmpeg = createFFmpeg({ corePath: "/ffmpeg-core.js", }); if (!this.ffmpeg.isLoaded()) { await this.ffmpeg.load(); } for (let i = 0; i < this.imgArr.length; i++) { this.ffmpeg.FS('writeFile', `${i}.png`, await fetchFile(this.imgArr\[i\])); } const time = this.videoTime.toString(); await this.ffmpeg.run('-r', '24', '-f', 'image2', '-i', '%d.png', '-t', time, 'video.mp4'); const data = this.ffmpeg.FS('readFile', 'video.mp4'); this.videoUrl = URL.createObjectURL(new Blob(\[data.buffer\], { type: 'video/mp4' })); document.querySelector("#videoContainer").style.display = "block"; }, }, }; ``` 请注意,上述代码仅为示例,具体的实现可能需要根据你的具体需求进行调整。你可以根据自己的情况来修改参数和文件路径等。同时,你还需要在Vue组件中添加相应的HTML和CSS代码来显示生成的视频。 希望这个回答对你有帮助! #### 引用[.reference_title] - *1* *3* [VUE整合FFmpeg及常用命令](https://blog.csdn.net/m0_46401243/article/details/123205478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [纯前端实现 vue 利用ffmpeg.wasm将图片合成视频](https://blog.csdn.net/qq_44830060/article/details/127804121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值