当前位置： 首页 > news >正文

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

news 2025/11/13 6:36:42

目录

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

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

核心特点

技术栈

核心功能

安装与使用

开源地址

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

核心特点

技术栈

核心功能

安装与快速启动

示例代码（React 组件定义视频）

开源地址

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

核心特点

技术栈

核心功能

安装与使用

开源地址

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

核心特点

技术栈

核心功能

安装与使用

开源地址

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

核心特点

技术栈

核心功能

安装与使用

开源地址

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

核心特点

技术栈

核心功能

安装与使用

开源地址

二、项目选择建议

三、快速上手示例（基于 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();
});
开源地址
  • GitHub：https://github.com/volodymyrbaydalka/video-editor-js
  • 协议：MIT（自由商用，需保留版权声明）

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 (<Compositionid="HelloWorld"width={1920}height={1080}durationInFrames={150} // 5秒（30fps）fps={30}><AbsoluteFill style={{ backgroundColor: "#000" }}><Textstyle={{fontSize: 72,color: "#fff",textAlign: "center",marginTop: "40%",}}>我的第一个Remotion视频</Text></AbsoluteFill></Composition>);
};
开源地址
  • GitHub：https://github.com/remotion-dev/remotion
  • 协议：MIT（商业使用需注意：100 万次导出以上需购买商业授权）

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
开源地址
  • GitHub：https://github.com/tnfe/WebVideoEditor
  • 协议：Apache 2.0（自由商用）
  • 在线 Demo：https://web-video-editor.netlify.app/（可直接体验）

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' });
};
开源地址
  • GitHub：https://github.com/ffmpegwasm/ffmpeg.wasm
  • 协议：LGPL 2.1（非商业使用免费，商业使用需遵循 LGPL 条款或购买商业授权）

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示例）
};
开源地址
  • GitHub：https://github.com/katspaugh/wavesurfer.js
  • 协议：MIT
  • 视频扩展示例：https://wavesurfer-js.org/example/video-sync/

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 => {// 下载或上传});
});
开源地址
  • GitHub：https://github.com/mediaelement/mediaelement
  • 协议：MIT

二、项目选择建议

需求场景推荐项目优势
快速嵌入、轻量基础编辑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）体验效果，再进行集成开发～

http://www.dtcms.com/a/601070.html

相关文章：

  • 网站建设管理维护责任书格式怎样在网站做链接
  • Flutter---Stream
  • 佛山企业网站建设机构南明区住房和城乡建设局网站上
  • 仓颉三方库开发实战：Simple HTTP Server 实现详解
  • 做360网站官网还是百度济南有做五合一网站公司
  • 详细解读视频生成模型Wan2.1代码
  • Cortex-M3-STM32F1 开发：（二十二）HAL 库开发 ➤ STM32 中断逻辑优先级计算
  • THC63LVD1027D一款10位双链路LVDS信号中继器芯片，支持WUXGA分辨率视频数据传输THC63LVD1027支持30位数据通道方案
  • 考研规划手册
  • MongoDB中 client_connection和database和collection之间的关系
  • 建筑网站建设赏析外贸公司用什么建网站
  • [智能体设计模式] 第4章：反思（Reflection）
  • 系统架构设计师与考研408在IT基础设施能力考核上的全面对比研究
  • 饮用水品牌营销型网站手机网站主页
  • 亿网中国网站管理系统绍兴网站网站建设
  • 基于web宿舍管理系统的设计与实现
  • 利用idea创建springboot多模块项目
  • C++仿muduo库高并发服务器项目：Poller模块
  • QT C++ QWebEngine与Web JS之间通信
  • 华为防火墙web配置SSL-在外人员访问内网资源
  • 本地部署事务管理软件 JIRA 并实现外网访问（Windows 版本）
  • 18、Linux常用命令-磁盘分区相关命令
  • nvm与node.js的安装指南
  • python+django/flask+vue的书城图书阅读器系统，亮点含目录章节pycharm
  • 外贸cms什么意思seo海外推广
  • C++网络开发---CURL与CURLcode数据类型
  • 【Python数据分析】数据分析与可视化
  • MyBatis概述
  • Hadoop集群搭建（下）：centos 7为例（已将将安装所需压缩包统一放在了/opt/software目录下）
  • 美创网站建设优势开县网站制作