uni-app 有没有视频裁剪的插件,用于剪辑时长和宽高。

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

uni-app 有没有视频裁剪的插件,用于剪辑时长和宽高。

有没有视频裁剪的插件,剪辑时长,宽高。

1 回复

在uni-app中,虽然官方没有直接提供视频裁剪的插件,但你可以通过集成第三方库或利用H5+扩展API来实现视频裁剪功能。这里提供一个基于ffmpeg.wasm的示例,该库可以在前端环境中运行FFmpeg,进行视频处理,包括裁剪时长和调整宽高。

首先,你需要在项目中引入ffmpeg.wasm。你可以通过npm安装它(如果支持的话,否则需要手动下载并引入)。

npm install @ffmpeg/ffmpeg

然后在你的uni-app项目中,创建一个页面用于视频裁剪。以下是一个简化的代码示例:

<template>
  <view>
    <button @click="chooseVideo">选择视频</button>
    <input type="file" ref="videoFile" style="display: none;" @change="handleVideoChange" accept="video/*">
    <button @click="cropVideo" :disabled="!videoSrc">裁剪视频</button>
  </view>
</template>

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

let ffmpeg;
let videoSrc;

export default {
  mounted() {
    ffmpeg = createFFmpeg({ log: true });
    ffmpeg.load().then(() => {
      console.log('FFmpeg loaded');
    }).catch(e => {
      console.error('FFmpeg loading failed:', e);
    });
  },
  methods: {
    chooseVideo() {
      this.$refs.videoFile.click();
    },
    async handleVideoChange(e) {
      videoSrc = URL.createObjectURL(e.target.files[0]);
      await ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoSrc));
    },
    async cropVideo() {
      const startTime = '00:00:00'; // 开始时间
      const endTime = '00:00:10'; // 结束时间(裁剪10秒)
      const width = 640; // 新宽度
      const height = 360; // 新高度

      await ffmpeg.run('-i', 'input.mp4', '-ss', startTime, '-to', endTime, '-vf', `scale=${width}:${height}`, 'output.mp4');
      const data = await ffmpeg.FS('readFile', 'output.mp4');
      const outputUrl = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
      // 这里你可以将outputUrl赋值给某个video元素的src属性来预览,或者上传服务器
      console.log('Cropped video URL:', outputUrl);
    }
  }
}
</script>

注意:

  1. 上述代码使用了ffmpeg.wasm进行视频处理,但它依赖于WebAssembly,可能在某些平台或环境下性能受限。
  2. ffmpeg.wasm的加载时间可能较长,需要用户等待。
  3. 视频裁剪操作可能会消耗较多资源,特别是在移动设备上。
  4. 出于安全和性能考虑,实际项目中可能需要更复杂的错误处理和资源管理。
回到顶部