利用ffmpeg实现纯前端视频剪切

注意：在新版本Chrome浏览器中由于安全性问题，只能在https或localhost当中才能正常使用

1. 下载ffmpeg

npm install @ffmpeg/ffmpeg @ffmpeg/core

2. 文件引入及初始化

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';const ffmpeg = createFFmpeg();// vue生命周期
created(): void {if(!ffmpeg.isLoaded()) {ffmpeg.load().catch((err) => {console.log(err);});}
}

// 在代理中加入：
headers: {"Cross-Origin-Opener-Policy": "same-origin","Cross-Origin-Embedder-Policy": "require-corp",
}

2. 上传文件

html

<el-uploadclass="el-upload__video"drag:show-file-list="false":before-upload="uploadVideo"accept="video/mp4,video/mkv"
><h1>视频在线剪切</h1>
</el-upload>

  /** 上传*/public async uploadVideo (file: File) {this.videoName = file.namethis.orgFileBuffer = await file.arrayBuffer() // 获取文件数据ffmpeg.FS('writeFile', this.videoName, await fetchFile(new Blob([this.orgFileBuffer]))); // 将视频数据写入内存this.videoUrl = URL.createObjectURL(new Blob([this.orgFileBuffer])); // 将视频数据转为urlreturn false}

3. 播放

  <video><source :src="videoUrl" type="video/mp4"></video>

4. 剪切

// startCutTime开始剪切的时间
// endCutTime结束剪切的时间
// videoName要剪切的视频名
// TEM_FILE_NAME剪切完成后保存到内存的视频名称await ffmpeg.run('-ss', `${this.startCutTime}`,'-t', `${this.endCutTime - this.startCutTime}`,'-i', this.videoName,'-vcodec', 'copy','-acodec', 'copy', this.TEM_FILE_NAME)let arrayBuffer = ffmpeg.FS('readFile', this.TEM_FILE_NAME).buffer // 读取缓存this.videoUrl = URL.createObjectURL(new Blob([arrayBuffer]) // 转为Blob URL

前端ffmpeg实现视频剪切相关推荐

android端采用FFmpeg进行视频剪切、转码与添加水印
前两篇文章介绍过FFmpeg进行音频处理.音视频处理:android端采用FFmpeg进行音频混合与拼接剪切, android端采用FFmpeg进行音视频合成与分离.关于FFmpeg涉及文件导入以及c ...
使用FFMpeg实现视频剪切功能
首先致敬雷神提供的资源,使用雷神的代码实现视频剪切功能雷神实现的ffmpeg代码文章说明一下,这里转载首先是记录一下实现方法,其次就是解决代码无法正常运行问题(avformat_write_hea ...
Java使用ffmpeg实现视频剪切、mp3剪切
直接运行代码即可: import java.io.IOException;public class FfmpegDemo {// 剪切命令static String command = "$ ...
FFmpeg优化苏宁PP体育视频剪切效率提升技巧
FFmpeg功能强大,社区活跃,在多媒体处理业务中扮演着不可或缺的角色.但没有优化过的FFmpeg在生产环境下有很多性能瓶颈,因此对其进行优化势在必行.苏宁旗下PP体育音视频技术负责人田钊撰文分享了团 ...
android 混音源码,FFmpegAndroid android 端基于 FFmpeg 实现音频剪切、拼接、转码、混音、编解码；视频剪切、水印、截图、转码、编 @codeKK c开源站...
android 端基于 FFmpeg 库的使用添加编译 ffmpeg.shine.mp3lame.x264 源码的参考脚本目前音视频相关处理: 音频剪切.拼接音频混音音频转码音视频合成音频 ...
ffmpeg视频剪切与拼接
文章目录 ffmpeg工具进行视频剪切与合并剪切视频拼接视频 ts格式拼接将ts格式文件转为mp4格式 mp4格式拼接 ffmpeg工具常用命令 ffmpeg的安装及基本使用可以看上一篇博客 F ...
【ffmpeg】最全简单实用教程｜安装音频视频剪切融合拼接抽帧等
ffmpeg 实用教程(非常全) FFmpeg Download(Mac) brew ffmpeg 常用操作(最全最简单) 音频音频转换格式多个音频混音改变音量大小音频淡入淡出调整音频速率 ...
FFmpeg视频剪切
视频剪切 ffmpeg -i input.ogv -ss 00:00:30.0 -c copy -t 00:00:10.0 output.mp4 ffmpeg -i input.wmv -ss 30 ...
java ffmpeg 合并视频_android ffmpeg视频剪切与合并
android-ffmpeg-java-demo 说明以前一直希望可以做一个播放器,所以当时就接触了ffmpeg这个库,当时打算使用JNI的方式进行底层的调用,无奈整个逻辑比较麻烦,因此进度一再搁浅 ...

前端ffmpeg实现视频剪切

利用ffmpeg实现纯前端视频剪切

1. 下载ffmpeg

2. 文件引入及初始化

2. 上传文件

3. 播放

4. 剪切

前端ffmpeg实现视频剪切相关推荐

最新文章

热门文章