uni-app 视频前端压缩

在uni-app中实现视频前端压缩，可以利用一些第三方库来处理视频压缩任务。一个常用的库是 ffmpeg.wasm，它提供了在Web环境中使用FFmpeg进行音视频处理的能力。以下是一个使用 ffmpeg.wasm 在uni-app中进行视频前端压缩的示例代码。

首先，确保你已经在项目中安装了 ffmpeg.wasm。你可以通过npm来安装：

npm install @ffmpeg/ffmpeg

然后，在你的uni-app项目中，创建一个页面或组件来处理视频压缩。以下是一个简单的实现示例：

<template>
  <view>
    <button @click="chooseVideo">选择视频</button>
    <video :src="videoSrc" controls></video>
    <button @click="compressVideo" :disabled="!videoSrc">压缩视频</button>
    <video :src="compressedVideoSrc" v-if="compressedVideoSrc" controls></video>
  </view>
</template>

<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

let ffmpeg;
let videoSrc;
let compressedVideoSrc;

export default {
  data() {
    return {};
  },
  methods: {
    async chooseVideo() {
      const res = await uni.chooseVideo({
        sourceType: ['album', 'camera'],
      });
      videoSrc = res.tempFilePath;
    },
    async compressVideo() {
      if (!ffmpeg) {
        ffmpeg = createFFmpeg({ log: true });
        await ffmpeg.load();
      }
      ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoSrc));
      await ffmpeg.run('-i', 'input.mp4', '-vcodec', 'libx264', '-crf', '28', 'output.mp4');
      const data = ffmpeg.FS('readFile', 'output.mp4');
      
      const blob = new Blob([data.buffer], { type: 'video/mp4' });
      compressedVideoSrc = URL.createObjectURL(blob);
      
      ffmpeg.exit();
    },
  },
};
</script>

<style>
/* 添加你的样式 */
</style>

在这个示例中，我们使用了 uni.chooseVideo 方法来选择视频文件，并使用 ffmpeg.wasm 库来压缩视频。ffmpeg.FS('writeFile') 方法将选择的视频文件写入到FFmpeg的文件系统中，然后使用FFmpeg命令行参数来压缩视频。压缩完成后，我们通过 ffmpeg.FS('readFile') 方法读取压缩后的视频数据，并将其转换为一个Blob对象，最后生成一个URL来播放压缩后的视频。

请注意，前端视频压缩可能会受到设备性能和浏览器限制的影响，对于大型视频文件，压缩过程可能会比较耗时。此外，由于FFmpeg是一个功能强大的工具，它提供了许多配置选项，你可以根据需要调整命令行参数来实现不同的压缩效果。