uni-app 高效视频压缩

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 高效视频压缩

要求

开发环境及项目信息

信息 描述
开发工具 未提及
版本号 未提及
项目创建方式 未提及

找人开发一个付费功能，压缩视频支持安卓和IOS，速度和质量均能达到或尽量接近下面的ffmpeg 命令行效果，

ffmpeg  -hwaccel cuda  -i i.MP4  -vcodec libx265 -crf 28 -s 1920*1280 o.mp4

Harmonyos Next教程
4 回复

可以做，联系QQ：1804945430


FFmpeg升级增强完整版、跟官方video不冲突(ios、andorid)：https://ext.dcloud.net.cn/plugin?id=8690

可以做 专业插件开发 q 1196097915 https://ask.dcloud.net.cn/question/91948

在uni-app中实现高效视频压缩，你可以借助ffmpeg-wasm这个库，它可以在前端通过WebAssembly运行FFmpeg，对视频进行高效压缩。以下是一个简单的代码示例，展示了如何在uni-app中使用ffmpeg-wasm进行视频压缩。

首先，确保你已经安装了ffmpeg-wasm库。你可以通过npm安装：

npm install @ffmpeg/ffmpeg

然后，在你的uni-app项目中创建一个页面，比如compressVideo.vue，并在其中编写以下代码：

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

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

let ffmpeg;
let videoUrl;
let compressedVideoUrl;

export default {
  data() {
    return {
      ffmpeg: null,
    };
  },
  async mounted() {
    ffmpeg = createFFmpeg({ log: true });
    await ffmpeg.load();
  },
  methods: {
    async chooseVideo() {
      const res = await uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
      });
      videoUrl = res.tempFilePath;
    },
    async compressVideo() {
      const fileName = 'compressed_video.mp4';
      await ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoUrl));
      await ffmpeg.run('-i', 'input.mp4', '-vcodec', 'libx264', '-crf', '28', fileName);
      const data = await ffmpeg.FS('readFile', fileName);
      const blob = new Blob([data.buffer], { type: 'video/mp4' });
      compressedVideoUrl = URL.createObjectURL(blob);
    },
  },
};
</script>

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

在这个示例中，我们首先创建了一个FFmpeg实例，并在组件挂载时加载它。然后，我们提供了两个按钮：一个用于选择视频，另一个用于压缩视频。选择视频后，视频将显示在页面上。点击“压缩视频”按钮后，视频将被压缩，并显示压缩后的视频。

请注意，这个示例使用了-vcodec libx264和-crf 28参数来压缩视频。-crf（恒定速率因子）的值越低，视频质量越高，但文件大小也越大。你可以根据需要调整这些参数。

此外，由于ffmpeg-wasm在WebAssembly中运行FFmpeg，因此它可能会受到浏览器性能和内存限制的影响。对于非常大的视频文件，你可能需要考虑在后端进行压缩。

回到顶部