vue使用ffmpeg视频压缩

Vue.js 是一个流行的前端框架，而 FFmpeg 是一个强大的多媒体处理工具。在 Vue.js 中使用 FFmpeg 进行视频压缩可以通过以下步骤实现：

1. 安装 FFmpeg

在你的开发环境中安装 FFmpeg。你可以从 FFmpeg 的官方网站（https://ffmpeg.org/download.html）下载对应的版本。

2. 安装 FFmpeg 执行器

安装 FFmpeg 执行器，以便在 Vue.js 应用程序中使用 FFmpeg。你可以使用 npm 进行安装：

npm install @ffmpeg-installer/ffmpeg

3. 安装 FFmpeg.js

安装 FFmpeg.js，这是一个 JavaScript 实现的 FFmpeg 库。你可以使用 npm 进行安装：

npm install ffmpeg.js

4. 在 Vue.js 中使用 FFmpeg.js

在 Vue.js 应用程序中使用 FFmpeg.js 进行视频压缩。以下是一个使用 FFmpeg.js 进行视频压缩的示例：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="compressVideo">压缩视频</button>
  </div>
</template>

<script>
import ffmpeg from 'ffmpeg.js/ffmpeg-mp4.js';

export default {
  data() {
    return {
      inputFile: null,
      compressedFile: null
    };
  },
  methods: {
    onFileChange(event) {
      this.inputFile = event.target.files[0];
    },
    async compressVideo() {
      const inputFilePath = URL.createObjectURL(this.inputFile);
      const inputVideo = await this.loadVideo(inputFilePath);
      const compressedVideo = await this.compress(inputVideo);
      this.download(compressedVideo);
      URL.revokeObjectURL(inputFilePath);
    },
    loadVideo(url) {
      return new Promise((resolve, reject) => {
        const video = document.createElement('video');
        video.src = url;
        video.addEventListener('loadedmetadata', () => {
          resolve(video);
        });
      });
    },
    compress(video) {
      return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(async (blob) => {
          const compressedBlob = await this.compressBlob(blob);
          resolve(compressedBlob);
        }, 'video/mp4', 0.5);
      });
    },
    compressBlob(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (event) => {
          const arrayBuffer = event.target.result;
          const ffmpegInstance = ffmpeg({
            log: true,
            progress: (progress) => {
              console.log(`压缩进度：${progress.ratio}`);
            },
            MEMFS: [{name: 'input.mp4', data: new Uint8Array(arrayBuffer)}],
            arguments: ['-y', '-i', 'input.mp4', '-vf', 'scale=640:-2', '-c:a', 'copy', 'output.mp4'],
            onExit: (code) => {
              console.log(`压缩完成，退出码：${code}`);
              const outputData = ffmpegInstance.FS('readFile', 'output.mp4');
              const compressedBlob = new Blob([outputData.buffer], {type: 'video/mp4'});
              resolve(compressedBlob);
            },
            onError: (error) => {
              console.error(`压缩失败：${error.message}`);
              reject(error);
            }
          });
        };
        fileReader.readAsArrayBuffer(blob);
      });
    },
    download(blob) {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'compressed.mp4';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  }
};
</script>

在上面的代码中，我们使用了 HTML5 的 `<video>` 标签加载视频，使用 Canvas 进行尺寸调整，使用 FFmpeg.js 进行视频压缩，并使用 Blob 对象进行文件下载。其中，`compressBlob` 方法是使用 FFmpeg.js 进行视频压缩的核心部分，它通过创建一个 `ffmpeg` 实例，执行 FFmpeg 命令进行视频压缩，最终生成压缩后的 Blob 对象。