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）体验效果，再进行集成开发～

相关推荐
AscendKing2 天前
一款针对IT团队开发的简单好用的文档管理系统
开源·好好学电脑·hhxdn.com
AscendKing10 天前
一个开源笔记和待办事项应用Joplin简介
好好学电脑·hhxdn.com
AscendKing13 天前
一个开源的 LLM 应用开发平台
好好学电脑·hhxdn.com
AscendKing16 天前
开源项目分享 图像深度学习Demo项目
开源·好好学电脑·hhxdn.com
AscendKing19 天前
开源白板工具（SaaS），一体化白板，包含思维导图、流程图、自由画等
开源·流程图·好好学电脑·hhxdn.com
AscendKing24 天前
视频号下载视频思路
好好学电脑·hhxdn.com
AscendKing1 个月前
LandPPT - AI驱动的PPT生成平台
人工智能·好好学电脑·hhxdn.com
AscendKing1 个月前
一个开源免费的验证码系统简介 天爱验证码
开源·验证码·好好学电脑
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06本地部署阿里最新开源的Z-Image07Linux下V2Ray安装配置指南08Meta第三代“分割一切”模型——SAM 3本地部署教程：首支持文本提示分割，400万概念、30毫秒响应，检测分割追踪一网打尽09Labelme从安装到标注：零基础完整指南10【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连