javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS开源视频编辑项目

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

作者：好好学电脑

随着短视频在互联网的迅速崛起,视频编辑工具逐渐成为了内容创作者们的必备工具,这篇文章主要分享介绍了6个成熟的JS开源视频编辑项目,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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

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

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

核心特点

技术栈

原生 JavaScript + Canvas + HTML5 Video API

核心功能

安装与使用

npm install video-editor-js --save
<!-- HTML -->
<canvas id="editor-canvas" width="800" height="450"></canvas>
<input type="file" id="video-upload" accept="video/*">
// 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 + FFmpeg.wasm + WebGL

核心功能

安装与快速启动

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

# 启动预览
npm run start

# 导出视频
npm run build

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

// 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 端视频编辑器（类桌面体验）

核心特点

技术栈

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

核心功能

安装与使用

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

# 安装依赖
npm install

# 启动开发环境
npm run dev

开源地址

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

核心特点

技术栈

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

核心功能

安装与使用

npm install @ffmpeg/ffmpeg @ffmpeg/core --save
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 + 视频扩展 - 音视频同步编辑（侧重音频可视化）

核心特点

技术栈

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

核心功能

安装与使用

npm install wavesurfer.js --save
<!-- HTML -->
<div id="waveform"></div>
<video id="video" controls></video>
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+）

核心特点

技术栈

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

核心功能

安装与使用

npm install mediaelement --save
<!-- HTML -->
<video id="player" controls width="800">
  <source src="input.mp4" type="video/mp4">
</video>
<button id="cut-btn">裁剪前10秒</button>
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）

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

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

总结

到此这篇关于6个成熟的JS开源视频编辑项目的文章就介绍到这了,更多相关JS开源视频编辑项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文