vue3 视频裁剪功能

1.工具：vue3+vite+ffmpeg 

指定版本

  // "@ffmpeg/core": "^0.10.0",

   // "@ffmpeg/ffmpeg": "^0.10.1",

npm install @ffmpeg/ffmpeg @ffmpeg/core     

2.vite环境配置

vite.config.js 配置

 build: {

    minify: 'terser',

  },

3.下载ffmpeg文件到public下面

 下载地址：

https://ffmpeg-core.oss-cn-hangzhou.aliyuncs.com/ffmpeg-core.js?Expires=1675304451&OSSAccessKeyId=TMP.3KgbPc1QsYMFi1n5DAC4KBmgZ34iKQ6gQipA6KkmWCZZFJDG7wtVQFNq8SRmhqY4sew1dqBNK4R24ZapCUzujetjkQSwcb&Signature=jKLRtYaQJXKICdCrIdHYbKjk9JA%3D

https://ffmpeg-core.oss-cn-hangzhou.aliyuncs.com/ffmpeg-core.wasm?Expires=1675304465&OSSAccessKeyId=TMP.3KgbPc1QsYMFi1n5DAC4KBmgZ34iKQ6gQipA6KkmWCZZFJDG7wtVQFNq8SRmhqY4sew1dqBNK4R24ZapCUzujetjkQSwcb&Signature=zaal%2BSpU2npk%2B7kz84YPCCuMrWw%3D

https://ffmpeg-core.oss-cn-hangzhou.aliyuncs.com/ffmpeg-core.worker.js?Expires=1675304472&OSSAccessKeyId=TMP.3KgbPc1QsYMFi1n5DAC4KBmgZ34iKQ6gQipA6KkmWCZZFJDG7wtVQFNq8SRmhqY4sew1dqBNK4R24ZapCUzujetjkQSwcb&Signature=%2Fdm6RDYsIXgptdhVrnQMh3Wh3lU%3D

3.项目中引入文件

import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"

const ffmpeg = ref(

  createFFmpeg({

    corePath: "/ffmpeg-core.js", // 刚才移动到的目录

    log: true,

  })

);

4.裁剪视频

const clipFile = async (file) => {

  console.log(file);

  const { name } = file;

//timeValue.value 时间段，没有可以写死

  const startTime = timeValue.value[0].format("HH:mm:ss");

  const endTime = timeValue.value[1].format("HH:mm:ss");

  if (!ffmpeg.value.isLoaded()) {

    await ffmpeg.value.load();

  }

  ffmpeg.value.FS("writeFile", name, await fetchFile(file));

  await ffmpeg.value.run(

    "-i",

    name,

    "-ss",

    startTime,

    "-to",

    endTime,

    "output.mp4"

  );

  const data = ffmpeg.value.FS("readFile", "output.mp4");

  const tempURL = URL.createObjectURL(

    new Blob([data.buffer], { type: "video/mp4" })

  );

  console.log(tempURL);//裁剪后的视频地址

};