6 个成熟的 JS 开源视频编辑项目

AscendKing2025-11-13 14:54

目录

一、核心推荐项目（按场景分类）

[1. VideoEditorJS - 轻量无依赖，快速嵌入 Web 应用](#1. VideoEditorJS - 轻量无依赖，快速嵌入 Web 应用)

核心特点

技术栈

核心功能

安装与使用

开源地址

[2. Remotion - React 生态，代码化视频编辑](#2. Remotion - React 生态，代码化视频编辑)

核心特点

技术栈

核心功能

安装与快速启动

[示例代码（React 组件定义视频）](#示例代码（React 组件定义视频）)

开源地址

[3. WebVideoEditor - 全功能 Web 端视频编辑器（类桌面体验）](#3. WebVideoEditor - 全功能 Web 端视频编辑器（类桌面体验）)

核心特点

技术栈

核心功能

安装与使用

开源地址

[4. FFmpeg.wasm - 底层视频处理核心（所有 JS 编辑器的基石）](#4. FFmpeg.wasm - 底层视频处理核心（所有 JS 编辑器的基石）)

核心特点

技术栈

核心功能

安装与使用

开源地址

[5. WaveSurfer.js + 视频扩展 - 音视频同步编辑（侧重音频可视化）](#5. WaveSurfer.js + 视频扩展 - 音视频同步编辑（侧重音频可视化）)

核心特点

技术栈

核心功能

安装与使用

开源地址

[6. MediaElement.js + 编辑插件 - 兼容性优先（支持 IE8+）](#6. MediaElement.js + 编辑插件 - 兼容性优先（支持 IE8+）)

核心特点

技术栈

核心功能

安装与使用

开源地址

二、项目选择建议

[三、快速上手示例（基于 VideoEditorJS + FFmpeg.wasm）](#三、快速上手示例（基于 VideoEditorJS + FFmpeg.wasm）)

以下是 6 个成熟的 JS 开源视频编辑项目，涵盖轻量集成、全功能编辑、React 生态、底层处理等不同场景，附核心特点、技术栈、使用方式和开源地址，方便你根据需求选择：

一、核心推荐项目（按场景分类）

1. VideoEditorJS - 轻量无依赖，快速嵌入 Web 应用

核心特点
  • 纯 JS 编写，无第三方依赖（仅依赖 Canvas），体积小（gzip < 20KB）
  • API 简洁，易集成到任何 Web 项目（Vue/React/ 原生 JS 均可）
  • 专注「基础视频编辑」，无冗余功能，加载速度快
技术栈

原生 JavaScript + Canvas + HTML5 Video API

核心功能
  • 视频裁剪（按时间轴截取片段）
  • 尺寸调整（缩放、裁剪画面）
  • 添加文字水印 / 图片水印（自定义位置、大小、透明度）
  • 简单转场效果（淡入淡出）
  • 导出为 Blob/Base64，支持直接上传服务器
安装与使用

bash

复制代码 
npm install video-editor-js --save

html

预览

复制代码 
<!-- HTML -->
<canvas id="editor-canvas" width="800" height="450"></canvas>
<input type="file" id="video-upload" accept="video/*">

javascript

运行

复制代码 
// JS
import VideoEditor from 'video-editor-js';

const editor = new VideoEditor({
  canvas: document.getElementById('editor-canvas'),
  maxWidth: 800,
  maxHeight: 450
});

// 加载视频
document.getElementById('video-upload').addEventListener('change', (e) => {
  const file = e.target.files[0];
  editor.loadVideo(file).then(() => {
    console.log('视频加载完成');
  });
});

// 裁剪视频（从1秒到5秒）
editor.crop(1000, 5000);

// 添加文字水印
editor.addTextWatermark({
  text: '我的水印',
  x: 50,
  y: 50,
  fontSize: 24,
  color: '#ffffff'
});

// 导出视频（返回Blob）
editor.exportVideo('video/mp4').then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'edited-video.mp4';
  a.click();
});
开源地址

2. Remotion - React 生态，代码化视频编辑

核心特点
  • 基于 React + TypeScript，用「组件化思维」编写视频
  • 支持「程序化视频」（通过代码生成动态内容，如数据可视化视频）
  • 功能强大，可实现复杂动画、多轨道编辑、3D 效果（支持 Three.js）
技术栈

React + TypeScript + FFmpeg.wasm + WebGL

核心功能
  • 时间线精确控制（帧级别的动画编排）
  • 多轨道编辑（视频、音频、文字、图片分层）
  • 支持 Lottie 动画、SVG、Three.js 3D 元素
  • 导出 MP4/GIF/PNG 序列
  • 实时预览（本地开发热更新）
安装与快速启动

bash

复制代码 
# 创建Remotion项目
npx create-remotion-app@latest my-video-editor
cd my-video-editor

# 启动预览
npm run start

# 导出视频
npm run build
示例代码（React 组件定义视频）

tsx

复制代码 
// src/Video.tsx
import { Composition, AbsoluteFill, Text } from "remotion";

export const MyVideo = () => {
  return (
    <Composition
      id="HelloWorld"
      width={1920}
      height={1080}
      durationInFrames={150} // 5秒（30fps）
      fps={30}
    >
      <AbsoluteFill style={{ backgroundColor: "#000" }}>
        <Text
          style={{
            fontSize: 72,
            color: "#fff",
            textAlign: "center",
            marginTop: "40%",
          }}
        >
          我的第一个Remotion视频
        </Text>
      </AbsoluteFill>
    </Composition>
  );
};
开源地址

3. WebVideoEditor - 全功能 Web 端视频编辑器（类桌面体验）

核心特点
  • 仿桌面视频编辑软件（如剪映）的 UI/UX，功能全面
  • 基于 Vue.js 开发，支持多轨道编辑、滤镜、转场等高级功能
  • 底层依赖 FFmpeg.wasm 处理视频编码，支持多种格式
技术栈

Vue.js 3 + TypeScript + FFmpeg.wasm + WebRTC（视频采集）

核心功能
  • 多轨道编辑（视频轨、音频轨、文字轨、贴纸轨）
  • 视频剪辑、分割、合并、变速（0.5x-2x）
  • 滤镜效果（亮度、对比度、饱和度、复古 / 胶片滤镜）
  • 文字动画（入场 / 出场动画、字体自定义）
  • 音频混合（音量调节、音频淡入淡出）
  • 导出为 MP4/WebM，支持自定义分辨率和码率
安装与使用

bash

复制代码 
# 克隆项目
git clone https://github.com/tnfe/WebVideoEditor.git
cd WebVideoEditor

# 安装依赖
npm install

# 启动开发环境
npm run dev
开源地址

4. FFmpeg.wasm - 底层视频处理核心（所有 JS 编辑器的基石）

核心特点
  • FFmpeg 的 WebAssembly 移植版，在浏览器中运行完整的 FFmpeg 功能
  • 无需后端依赖，所有视频处理（编码、解码、剪辑、格式转换）均在前端完成
  • 支持几乎所有视频 / 音频格式（MP4、WebM、AVI、MP3 等）
技术栈

C/C++（FFmpeg 源码）+ Emscripten（编译为 wasm）+ JavaScript

核心功能
  • 视频剪辑（ffmpeg -i input.mp4 -ss 00:00:01 -to 00:00:05 output.mp4）
  • 格式转换（MP4 转 WebM、视频转 GIF 等）
  • 滤镜处理（模糊、锐化、裁剪、旋转）
  • 音频分离 / 合并（提取视频中的音频、给视频添加背景音）
  • 分辨率调整、码率压缩（减小视频体积）
安装与使用

bash

复制代码 
npm install @ffmpeg/ffmpeg @ffmpeg/core --save

javascript

运行

复制代码 
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

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

// 视频剪辑示例（截取1-5秒）
const cutVideo = async (inputFile) => {
  // 加载FFmpeg核心
  await ffmpeg.load();

  // 将本地文件写入FFmpeg虚拟文件系统
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(inputFile));

  // 执行FFmpeg命令（剪辑+导出MP4）
  await ffmpeg.run(
    '-i', 'input.mp4',       // 输入文件
    '-ss', '00:00:01',       // 开始时间
    '-to', '00:00:05',       // 结束时间
    '-c:v', 'libx264',       // 视频编码器
    '-c:a', 'aac',           // 音频编码器
    'output.mp4'             // 输出文件
  );

  // 读取输出文件
  const data = ffmpeg.FS('readFile', 'output.mp4');

  // 转换为Blob并返回
  return new Blob([data.buffer], { type: 'video/mp4' });
};
开源地址

5. WaveSurfer.js + 视频扩展 - 音视频同步编辑（侧重音频可视化）

核心特点
  • 主打「音频波形可视化」，可结合视频标签实现音视频同步编辑
  • 轻量灵活，适合需要精准音频剪辑 + 视频同步的场景（如 Podcast 视频、旁白视频）
技术栈

原生 JS + Web Audio API + Canvas + HTML5 Video

核心功能
  • 音频波形生成与标注（精准定位音频关键点）
  • 音视频同步裁剪（按音频波形截取对应的视频片段）
  • 音频淡入淡出、音量调节
  • 支持多音频轨道混合
  • 导出同步后的音视频文件（需配合 FFmpeg.wasm）
安装与使用

bash

复制代码 
npm install wavesurfer.js --save

html

预览

复制代码 
<!-- HTML -->
<div id="waveform"></div>
<video id="video" controls></video>

javascript

运行

复制代码 
import WaveSurfer from 'wavesurfer.js';

// 初始化波形图
const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F46E5',
  progressColor: '#818CF8',
  barWidth: 2,
  height: 120
});

// 加载音视频（音频从视频中提取，或单独加载）
const video = document.getElementById('video');
video.src = 'input.mp4';

// 加载音频并绑定视频
wavesurfer.load('input-audio.mp3');
wavesurfer.on('ready', () => {
  // 音视频同步播放
  video.addEventListener('play', () => wavesurfer.play());
  video.addEventListener('pause', () => wavesurfer.pause());
  video.addEventListener('seeked', () => wavesurfer.seekTo(video.currentTime / video.duration));
  wavesurfer.on('seek', (progress) => video.currentTime = progress * video.duration);
});

// 裁剪音视频（配合FFmpeg.wasm）
const cutSync = async () => {
  const start = wavesurfer.getCurrentTime(); // 从波形图获取开始时间
  const end = start + 5; // 截取5秒
  // 调用FFmpeg.wasm执行裁剪（参考上面FFmpeg.wasm示例）
};
开源地址

6. MediaElement.js + 编辑插件 - 兼容性优先（支持 IE8+）

核心特点
  • 兼容旧浏览器（IE8+、低版本 Chrome/Firefox），基于 HTML5 Video 的降级方案
  • 自带播放器 + 简单编辑功能，适合需要兼容老系统的项目
技术栈

原生 JS + HTML5 Video + Flash（降级兼容）

核心功能
  • 基础视频剪辑、速度调节（0.5x-2x）
  • 字幕添加（支持 SRT/VTT 格式）
  • 音量控制、静音、全屏
  • 视频截图
  • 导出剪辑后的视频（需配合后端或 FFmpeg.wasm）
安装与使用

bash

复制代码 
npm install mediaelement --save

html

预览

复制代码 
<!-- HTML -->
<video id="player" controls width="800">
  <source src="input.mp4" type="video/mp4">
</video>
<button id="cut-btn">裁剪前10秒</button>

javascript

运行

复制代码 
import MediaElementPlayer from 'mediaelement';
import 'mediaelement/build/mediaelementplayer.css';

// 初始化播放器
const player = new MediaElementPlayer('player', {
  features: ['playpause', 'progress', 'volume', 'fullscreen', 'edit'], // 启用编辑功能
  editOptions: {
    maxDuration: 600 // 最大剪辑时长（10分钟）
  }
});

// 裁剪按钮点击事件
document.getElementById('cut-btn').addEventListener('click', () => {
  // 裁剪前10秒
  player.crop(0, 10);
  // 导出（返回Blob）
  player.exportVideo().then(blob => {
    // 下载或上传
  });
});
开源地址

二、项目选择建议

需求场景 推荐项目 优势
快速嵌入、轻量基础编辑 VideoEditorJS 无依赖、体积小、集成快
React 生态、程序化视频 Remotion 组件化、支持复杂动画和 3D
类桌面全功能编辑 WebVideoEditor 多轨道、滤镜、转场、UI 友好
底层视频处理（编码 / 格式） FFmpeg.wasm 功能全面、格式支持多
音视频同步、音频可视化 WaveSurfer.js 波形精准、同步性好
兼容旧浏览器（IE8+） MediaElement.js 兼容性强、降级方案完善

三、快速上手示例（基于 VideoEditorJS + FFmpeg.wasm）

实现「视频裁剪 + 文字水印 + 格式转换」完整流程：

javascript

运行

复制代码 
import VideoEditor from 'video-editor-js';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

// 1. 初始化编辑器和FFmpeg
const editor = new VideoEditor({ canvas: document.getElementById('editor-canvas') });
const ffmpeg = createFFmpeg({ log: false });

// 2. 加载视频并编辑
const processVideo = async (file) => {
  // 加载视频
  await editor.loadVideo(file);
  
  // 步骤1：裁剪（1-10秒）
  editor.crop(1000, 10000);
  
  // 步骤2：添加文字水印
  editor.addTextWatermark({
    text: '开源视频编辑',
    x: 20,
    y: editor.videoHeight - 40,
    fontSize: 18,
    color: '#fff',
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: 4
  });
  
  // 步骤3：导出编辑后的视频（Blob）
  const editedBlob = await editor.exportVideo('video/mp4');
  
  // 步骤4：用FFmpeg.wasm转换为WebM格式（减小体积）
  await ffmpeg.load();
  ffmpeg.FS('writeFile', 'temp.mp4', await fetchFile(editedBlob));
  await ffmpeg.run('-i', 'temp.mp4', '-c:v', 'libvpx-vp9', 'output.webm');
  const webmBlob = new Blob([ffmpeg.FS('readFile', 'output.webm').buffer], { type: 'video/webm' });
  
  // 5. 下载结果
  const a = document.createElement('a');
  a.href = URL.createObjectURL(webmBlob);
  a.download = 'edited-video.webm';
  a.click();
};

// 触发文件选择
document.getElementById('upload-btn').addEventListener('click', () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'video/*';
  input.onchange = (e) => e.target.files[0] && processVideo(e.target.files[0]);
  input.click();
});

所有项目均为活跃维护的开源项目，可根据自身技术栈和功能需求选择，建议先通过在线 Demo（如 WebVideoEditor、Remotion）体验效果，再进行集成开发～

相关推荐
AscendKing4 天前
视频号下载视频思路
好好学电脑·hhxdn.com
AscendKing7 天前
LandPPT - AI驱动的PPT生成平台
人工智能·好好学电脑·hhxdn.com
AscendKing15 天前
一个开源免费的验证码系统简介 天爱验证码
开源·验证码·好好学电脑
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05Linux下V2Ray安装配置指南06Labelme从安装到标注：零基础完整指南07BongoCat - 跨平台键盘猫动画工具08智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践09《大数据技术原理与应用》实验报告三 熟悉HBase常用操作10全面评测 | Photoshop 2026 新特性深度解析与实测体验