博客站

在 UniApp 中，视频压缩是优化应用性能的重要手段之一，特别是在上传视频或展示大量视频的场景中。通过视频压缩，可以减少视频文件的大小，提升加载速度和节省带宽。以下是 UniApp 处理视频压缩的常用方法：

一、使用 uni.compressVideo API

UniApp 提供了 uni.compressVideo API，用于压缩视频。

1. 基本用法

• 示例：

  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePath;
      uni.compressVideo({
        src: tempFilePath,
        quality: 'low', // 压缩质量（low、medium、high）
        success: (compressRes) => {
          console.log('压缩后的视频路径：', compressRes.tempFilePath);
        },
        fail: (err) => {
          console.log('视频压缩失败：', err);
        }
      });
    }
  });
  

2. 设置压缩质量

• 通过 quality 参数设置压缩质量（low、medium、high），质量越低，压缩率越高。
• 示例：

  uni.compressVideo({
    src: tempFilePath,
    quality: 'medium', // 压缩质量为中等
    success: (compressRes) => {
      console.log('压缩后的视频路径：', compressRes.tempFilePath);
    }
  });
  

二、使用第三方视频压缩库

如果需要更复杂的视频压缩功能，可以使用第三方视频压缩库，如 ffmpeg.js。

1. 安装 ffmpeg.js

• 安装 ffmpeg.js：

  npm install @ffmpeg/ffmpeg @ffmpeg/core
  

2. 在 UniApp 中使用

• 示例：

  import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
  
  const ffmpeg = createFFmpeg({ log: true });
  
  async function compressVideo(file, quality = 'low') {
    await ffmpeg.load();
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
    await ffmpeg.run(
      '-i', 'input.mp4',
      '-vf', 'scale=640:-1',
      '-b:v', '1M',
      'output.mp4'
    );
    const data = ffmpeg.FS('readFile', 'output.mp4');
    return new Blob([data.buffer], { type: 'video/mp4' });
  }
  
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const tempFilePath = res.tempFilePath;
      const compressedVideo = await compressVideo(tempFilePath, 'low');
      console.log('压缩后的视频：', compressedVideo);
    }
  });
  

三、手动实现视频压缩

如果需要更灵活的控制，可以手动实现视频压缩。

1. 使用 Canvas 压缩视频

• 示例：

  function compressVideo(file, quality = 0.8) {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.src = URL.createObjectURL(file);
      video.onloadedmetadata = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        video.play();
        video.ontimeupdate = () => {
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          canvas.toBlob(
            (blob) => {
              resolve(blob);
            },
            'video/mp4',
            quality
          );
        };
      };
      video.onerror = (err) => {
        reject(err);
      };
    });
  }
  
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePath;
      compressVideo(tempFilePath, 0.8).then((blob) => {
        console.log('压缩后的视频：', blob);
      });
    }
  });
  

四、总结

UniApp 处理视频压缩的步骤如下：

1. 使用 uni.compressVideo API：通过 uni.compressVideo API 实现视频压缩。
2. 使用第三方视频压缩库：通过 ffmpeg.js 实现更复杂的视频压缩功能。
3. 手动实现视频压缩：通过 Canvas 实现灵活的视频压缩。

以下是一个完整的 uni.compressVideo 示例：

uni.chooseVideo({
  sourceType: ['album', 'camera'],
  success: (res) => {
    const tempFilePath = res.tempFilePath;
    uni.compressVideo({
      src: tempFilePath,
      quality: 'low', // 压缩质量（low、medium、high）
      success: (compressRes) => {
        console.log('压缩后的视频路径：', compressRes.tempFilePath);
      },
      fail: (err) => {
        console.log('视频压缩失败：', err);
      }
    });
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的视频压缩功能，提升应用性能。