前端ffmpeg实现视频剪切

利用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-upload
  class="el-upload__video"
  drag
  :show-file-list="false"
  :before-upload="uploadVideo"
  accept="video/mp4,video/mkv"
>
  <h1>视频在线剪切</h1>
</el-upload>

js

  /*
   * 上传
   */
  public async uploadVideo (file: File) {

    this.videoName = file.name

    this.orgFileBuffer = await file.arrayBuffer() // 获取文件数据

    ffmpeg.FS('writeFile', this.videoName, await fetchFile(new Blob([this.orgFileBuffer]))); // 将视频数据写入内存

    this.videoUrl = URL.createObjectURL(new Blob([this.orgFileBuffer])); // 将视频数据转为url

    return 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