使用ffmpeg.js压缩视频

Question

我尝试使用 ffmpeg.js 上传和压缩视频。然而，这个过程似乎在现代浏览器上无效。我已经实现了控制台日志记录来验证视频压缩是否正在发生，但到目前为止，尚未实现压缩。谁能建议一个可能更适合要求的替代视频压缩库？

<template>
  <div>
    <input type="file" @change="handleFileInputChange" accept="video/*">
    <video ref="video" controls></video>
  </div>
</template>

<script>
import { FFmpeg } from '@ffmpeg/ffmpeg';

export default {
  methods: {
    async handleFileInputChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      const video = this.$refs.video;
      const url = URL.createObjectURL(file);
      video.src = url;

      const inputVideoPath = 'input.mp4';
      const outputVideoPath = 'compressed_output.mp4';

      console.log("Compressing video...");
      await this.compressVideo(file, inputVideoPath, outputVideoPath);
      console.log("Compression completed.");

      video.src = URL.createObjectURL(await this.downloadFile(outputVideoPath));
    },
    async compressVideo(file, inputVideoPath, outputVideoPath) {
      const ffmpeg = new FFmpeg();
      await ffmpeg.load();

      // Writing the input file to the FFmpeg file system
      await ffmpeg.writeFile(inputVideoPath, file);

      // Execute FFmpeg command for compression
      await ffmpeg.exec(['-i', inputVideoPath, '-vcodec', 'libx264', '-crf', '28', outputVideoPath]);
    },
    async downloadFile(filePath) {
      const ffmpeg = new FFmpeg();
      await ffmpeg.load();

      // Read the compressed file from FFmpeg file system
      const data = await ffmpeg.readFile(filePath);

      return new Blob([data.buffer], { type: 'video/mp4' });
    }
  }
};
</script>

<style scoped>
</style>

Answer 1

基本上，视频本身是一个压缩文件（高熵）。文件的熵比越高，压缩就越困难。

如果你想减少容量，可以用低比特率重新编码，代价是降低视频质量。