利用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

前端ffmpeg实现视频剪切的相关教程结束。