博客站

在 UniApp 中，视频裁剪是常见的需求之一，例如用户上传视频、视频编辑等场景。UniApp 本身没有直接提供视频裁剪功能，但可以通过结合第三方库或手动实现视频裁剪。以下是 UniApp 处理视频裁剪的常用方法：

一、使用第三方视频裁剪库

如果需要实现视频裁剪功能，可以使用第三方视频处理库，如 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 cropVideo(file, startTime, duration) {
    await ffmpeg.load();
    ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
    await ffmpeg.run(
      '-i', 'input.mp4',
      '-ss', startTime, // 开始时间
      '-t', duration, // 持续时间
      '-c', 'copy',
      '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 croppedVideo = await cropVideo(tempFilePath, '00:00:05', '00:00:10');
      console.log('裁剪后的视频：', croppedVideo);
    }
  });
  

二、手动实现视频裁剪

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

1. 使用 Video 和 Canvas 裁剪视频

• 示例：

  function cropVideo(video, startTime, duration) {
    return new Promise((resolve, reject) => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      video.currentTime = startTime;
      video.ontimeupdate = () => {
        if (video.currentTime >= startTime   duration) {
          video.pause();
          const blob = canvas.toBlob((blob) => {
            resolve(blob);
          }, 'video/mp4');
        } else {
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        }
      };
      video.onerror = (err) => {
        reject(err);
      };
      video.play();
    });
  }
  
  const video = document.createElement('video');
  video.src = 'https://example.com/video.mp4';
  video.onloadedmetadata = () => {
    cropVideo(video, 5, 10).then((blob) => {
      console.log('裁剪后的视频：', blob);
    });
  };
  

三、总结

UniApp 处理视频裁剪的步骤如下：

1. 使用第三方视频裁剪库：通过 ffmpeg.js 实现视频裁剪功能。
2. 手动实现视频裁剪：通过 Video 和 Canvas 实现灵活的视频裁剪。

以下是一个完整的 ffmpeg.js 示例：

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

const ffmpeg = createFFmpeg({ log: true });

async function cropVideo(file, startTime, duration) {
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
  await ffmpeg.run(
    '-i', 'input.mp4',
    '-ss', startTime, // 开始时间
    '-t', duration, // 持续时间
    '-c', 'copy',
    '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 croppedVideo = await cropVideo(tempFilePath, '00:00:05', '00:00:10');
    console.log('裁剪后的视频：', croppedVideo);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的视频裁剪功能，满足应用的需求。