React.js如何实现视频裁剪？react-video-trimmer用法及替代方案

1. 包工作原理与视频地址传入方式 #

核心工作机制 #

• 播放预览层基于浏览器原生HTML5 <video> 标签实现，时间轴帧预览通过Canvas定时截取视频帧绘制完成，裁剪区间选择是纯React实现的拖拽交互组件，支持用户手动调整起止时间点
• 裁剪导出逻辑完全在前端本地运行：内置WebAssembly版本的FFmpeg（ffmpeg.wasm），用户确认裁剪后会将视频二进制数据传入wasm运行时，按选中的时间区间完成切片、重编码，全程不会上传原视频到第三方服务器
• 示例代码中的timeRange参数仅为组件初始化时默认选中的裁剪区间，用户拖动时间轴调整后组件会自动更新内部选中值，点击导出按钮时才会触发编码回调

视频地址传入方法 #

该组件和原生<video>标签API保持一致，直接通过src prop传入待裁剪视频地址即可，支持三类地址：同域静态资源路径、配置了CORS规则的跨域CDN地址、本地文件选择后生成的Blob URL。
补全后的可运行示例代码：

import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";
 
const Trimmer = () => {
  const [videoSrc, setVideoSrc] = React.useState("");

  // 本地选择视频文件的场景
  const handleLocalFileSelect = (e) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile) {
      setVideoSrc(URL.createObjectURL(selectedFile));
    }
  };

  const handleVideoEncode = React.useCallback((trimmedVideoBlob) => {
    // 回调入参是裁剪完成后的视频Blob对象，可直接用于上传、本地下载
    console.log("裁剪完成视频：", trimmedVideoBlob);
    // 本地下载示例
    // const downloadUrl = URL.createObjectURL(trimmedVideoBlob);
    // const a = document.createElement("a");
    // a.href = downloadUrl;
    // a.download = "trimmed-video.mp4";
    // a.click();
  }, []);

  return (
    <div>
      <input type="file" accept="video/*" onChange={handleLocalFileSelect} />
      {videoSrc && (
        <ReactVideoTrimmer
          src={videoSrc} // 此处传入视频地址，也可直接写线上地址如"/static/demo.mp4"
          onVideoEncode={handleVideoEncode}
          timeRange={{ start: 10, end: 100 }} // 初始默认选中10s-100s区间
          // 其他常用配置
          // maxDuration={60} // 限制最大可选裁剪时长为60秒
          // trimmerColor="#1677ff" // 裁剪选框主题色
        />
      )}
    </div>
  );
};

注意：传入跨域线上视频地址时，必须确保视频资源返回了允许当前域名访问的CORS响应头，否则ffmpeg.wasm无法拉取完整视频二进制数据，会触发跨域报错导致裁剪失败。该包内置的ffmpeg版本对H.265/HEVC、AV1等新编码格式兼容性较差，遇到加载、编码失败时优先排查原视频是否为H.264编码的MP4格式。

2. React生态视频裁剪的其他可行替代方案 #

• 基于ffmpeg.wasm自实现：如果需要高度定制交互（比如加滤镜、多段拼接、插入字幕等），可以直接引入@ffmpeg/ffmpeg、@ffmpeg/util两个官方包，自行开发时间轴选择、预览交互，灵活度最高。缺点是交互逻辑需要从零开发，首次加载wasm核心包约20MB体积，需要做好加载态提示
• react-video-cut：轻量裁剪组件，体积比react-video-trimmer小30%左右，无冗余依赖，API设计简洁，仅保留基础裁剪能力，适合不需要复杂配置的轻量化场景
• 前后端配合裁剪方案：如果对前端包体积敏感、需要处理4K以上大体积视频，可以前端仅实现时间区间选择交互，把用户选中的起止时间戳传给后端，由后端通过原生FFmpeg命令完成裁剪，前端不需要加载wasm资源，兼容性更好。缺点是需要用户上传完整原视频到服务端，处理耗时受网络带宽影响较大
• video.js生态插件方案：如果项目本身已经接入video.js作为基础视频播放器，可以直接搭配videojs-trim插件实现裁剪能力，不需要额外引入独立的视频播放组件，和现有播放逻辑适配成本最低

内容的提问来源于stack exchange，提问作者Ramya Ramaradjou