vue 怎么用ffmpeg.js压缩视频

要使用 FFmpeg.js 压缩视频，首先需要将 FFmpeg.js 库引入到 Vue 项目中。可以通过以下步骤来完成：

1. 安装 FFmpeg.js 库：可以通过 npm 或 yarn 安装 FFmpeg.js 库。

npm install ffmpeg.js

2. 在 Vue 项目中引入 FFmpeg.js 库：可以在 main.js 中引入 FFmpeg.js 库。

import FFmpeg from 'ffmpeg.js/ffmpeg-mp4.js'

Vue.prototype.$ffmpeg = FFmpeg;

3. 创建 Vue 方法：可以创建一个 Vue 方法来实现视频压缩功能。

methods: {
  compressVideo() {
    const input = document.querySelector('#video-input').files[0];
    const output = 'output.mp4';
    const bitrate = '1024k';

    const ffmpeg = this.$ffmpeg;

    // 创建 FFmpeg 实例
    const worker = ffmpeg.createWorker();

    // 加载 FFmpeg 库
    worker.load();

    // 设置输入文件
    worker.postMessage({
      type: 'run',
      arguments: `-i ${input.name} -b:v ${bitrate} ${output}`,
      files: [
        {
          name: input.name,
          data: input
        }
      ]
    });

    // 监听转换进度
    worker.onmessage = (event) => {
      console.log(event.data);
    };

    // 监听转换完成
    worker.onmessage = (event) => {
      const outputFiles = event.data.outputFiles;
      console.log(outputFiles);
    };
  }
}

在上述代码中，我们首先获取了要压缩的视频文件和输出文件名，然后使用 createWorker() 方法创建了 FFmpeg 实例。接着，我们使用 postMessage() 方法向 FFmpeg 实例发送命令行参数和要处理的文件。最后，我们通过 onmessage() 方法监听了转换进度和完成事件。

需要注意的是，由于 FFmpeg.js 是基于 Web Worker 实现的，因此我们需要在浏览器中运行 Vue 项目才能使用它。