vue ffmpeg视频压缩代码

Vue.js是一种流行的JavaScript框架，用于构建用户界面。而FFmpeg是一个强大的开源多媒体处理工具，可以用于处理音频和视频文件。下面是一个简单的Vue.js代码示例，用于使用FFmpeg进行视频压缩：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="video/*">
    <button @click="compressVideo">压缩视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoFile: null,
    };
  },
  methods: {
    handleFileChange(event) {
      this.videoFile = event.target.files;
    },
    compressVideo() {
      if (!this.videoFile) {
        alert("请先选择一个视频文件");
        return;
      }

      const ffmpeg = require("ffmpeg.js/ffmpeg-mp4.min.js");
      const worker = new Worker(ffmpeg);

      worker.onmessage = (event) => {
        const { data } = event;
        if (data.type === "ready") {
          // FFmpeg准备就绪
          worker.postMessage({
            type: "run",
            arguments: [
              "-i",
              this.videoFile.name,
              "-vf",
              "scale=640:480",
              "output.mp4",
            ],
          });
        } else if (data.type === "stdout") {
          // FFmpeg输出日志
          console.log(data.data);
        } else if (data.type === "done") {
          // 压缩完成
          const outputBuffer = data.data.MEMFS.data;
          const outputBlob = new Blob([outputBuffer], { type: "video/mp4" });
          const outputUrl = URL.createObjectURL(outputBlob);
          const link = document.createElement("a");
          link.href = outputUrl;
          link.download = "compressed.mp4";
          link.click();
        }
      };

      // 加载FFmpeg核心
      worker.postMessage({ type: "load" });
    },
  },
};
</script>

上述代码中，我们首先使用`<input type="file">`元素让用户选择一个视频文件。然后，当用户选择文件后，我们将其保存在`videoFile`变量中。接下来，当用户点击“压缩视频”按钮时，我们使用FFmpeg进行视频压缩。

在压缩视频的过程中，我们使用了`ffmpeg.js`库，它是FFmpeg的JavaScript版本。我们创建了一个`Worker`对象，并加载了FFmpeg核心。然后，我们通过`postMessage`方法向Worker发送消息，告诉它要执行的命令。在这个例子中，我们使用了`-vf scale=640:480`参数来将视频缩放为640x480的尺寸，并将压缩后的视频保存为`output.mp4`文件。

当FFmpeg处理完成后，它会通过`onmessage`事件返回结果。我们可以通过检查返回的数据类型来确定消息的类型。当类型为`done`时，表示压缩完成，我们可以从返回的数据中获取压缩后的视频文件，并将其下载到本地。