上传视频压缩

上传视频压缩

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

<script>
import * as ffmpeg from "ffmpeg.js";

export default {
  methods: {
    handleFileChange(event) {
      this.videoFile = event.target.files[0];
    },
    async compressVideo() {
      const outputFileName = "compressed.mp4";
      try {
        const video = await this.loadVideo(this.videoFile);
        const compressedVideo = await this.compress(video, outputFileName);
        this.saveFile(compressedVideo, outputFileName);
      } catch (error) {
        console.error(error);
      }
    },
    async loadVideo(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
          const video = ffmpeg.FS("writeFile", "input.mp4", new Uint8Array(reader.result));
          resolve(video);
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.readAsArrayBuffer(file);
      });
    },
    async compress(video, outputFileName) {
      await ffmpeg.load();
      await ffmpeg.run("-i", "input.mp4", "-vcodec", "libx264", "-crf", "20", outputFileName);
      const compressedVideo = ffmpeg.FS("readFile", outputFileName);
      return compressedVideo;
    },
    saveFile(fileData, fileName) {
      const blob = new Blob([fileData.buffer], { type: "video/mp4" });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = fileName;
      link.click();
      URL.revokeObjectURL(url);
    },
  },
};
</script>