ClipJS：跑在浏览器里的免费开源视频编辑器

“临时剪个视频”这件事，过去要么打开 Premiere/剪映这类重型客户端，要么上传到在线剪辑网站再等它把文件传完。ClipJS（GitHub 仓库 mohyware/clip-js，MIT 协议）走的是第三条路：整个编辑器就是一个网页，素材不上传服务器，剪辑与渲染全部在你的浏览器本地完成。官方口号直接把卖点写在了落地页上——“在 PC 或手机上剪辑视频，无需下载、无需注册、无水印；在线、免费、开源”。

一、背景：Web 剪辑的技术前提成熟了

浏览器做视频编辑过去有两道坎：一是解码预览性能，二是导出渲染能力。近几年这两道坎分别被两套技术填上：

• Remotion：把视频当作 React 组件来渲染的框架，天生支持时间线式实时预览；
• ffmpeg.wasm：把 FFmpeg 编译成 WebAssembly，让浏览器拿到了完整的音视频编码能力。

ClipJS 正是这两者的组合：用 Next.js + React 搭界面，用 Remotion 做实时预览，用 ffmpeg.wasm 做最终导出。它不是第一个这么做的，但它把”零账号、零上传、无水印”做到了产品形态。

二、是什么：一个本地优先的多轨剪辑台

从官方仓库 README 与编辑器截图看，ClipJS 的功能面已经覆盖轻量剪辑的全部基本动作：

截图里可见的结构与之一一对应：左侧是媒体库（导入的视频/音频文件列表），中央是预览窗（本例中一段动画画面上叠加了洋红色 “ClipJs” 文字），右侧是文字属性面板（内容、起止时间、X/Y 坐标、颜色、透明度、字号 200、字体 Arial），底部是视频/音频/图片/文字四条轨道的时间线，工具栏提供 Track Marker、Split、Duplicate、Delete 与缩放。

三、技术机制：为什么”不上传”是成立的

ClipJS 敢承诺”不用上传文件”，底气完全来自浏览器能力：素材通过本地文件选择进入内存中的 Blob，预览由 Remotion 在前端合成，导出时 ffmpeg.wasm 在 Web Worker 里跑编码，最后产出一个文件让你下载。整个链路不经过任何后端——这也解释了为什么它能同时支持桌面与手机浏览器：只要浏览器够新，谁访问都是一份完整客户端。

代价同样来自这里：渲染全部吃用户本机 CPU 与内存。ffmpeg.wasm 是单线程为主的 WASM 编译产物，编码速度远不及原生 FFmpeg；1080p 是官方明确标出的导出上限，更长、更高码率的视频在中低端设备上很容易让标签页内存暴涨甚至崩溃。这是”纯前端渲染”的物理边界，不是 ClipJS 独有的缺陷，但官方把 1080p 写进 Feature 列表，等于主动承认了这条天花板。

还需要注意一个容易被”不上传”叙事掩盖的点：素材留在浏览器里不代表绝对安全——任何在同一标签页注入脚本的第三方依赖（分析 SDK、广告脚本）理论上都能接触到页面内存中的媒体。官方示例站本身确实是”无广告”的，但如果你自行二次部署并接了别的统计脚本，这条隐私承诺就会被打破。自部署时应当保持依赖干净，这才是”本地优先”真正成立的前提。

四、客观分析：优势与局限

优势：

1. 隐私友好：素材不出本机，剪涉密/内部素材无需担心云端留存；
2. 零门槛：打开网页即用，手机浏览器也能剪一段发社交平台；
3. MIT 开源：可自部署（npm run build 或 docker build -t clipjs .），可二次定制；
4. 无水印无广告，导出不阉割分辨率。

局限：

1. 导出性能受限于浏览器 WASM，长视频、4K 不现实（官方口径上限 1080p）；
2. 项目文件存在浏览器本地（IndexedDB/本地存储），清缓存即丢失，无云端同步；
3. 功能仍是”轻量剪辑”量级：没有复杂调色、关键帧动画曲线、多人协作，对标剪映/CapCut 的高级功能差距明显；
4. 仓库仍在早期（README 旁 open issues 个位数、附 TODO.md），托管示例站在国内访问 Vercel 域名可能超时——想稳定使用建议自行 Docker 部署。

五、适合谁、不适合谁

**适合：**临时剪一段十几秒到几分钟的短视频、合并几个片段、加个字幕/配图就导出的人；对素材隐私敏感、不想把片子传给在线服务的人；想学习”Next.js + Remotion + ffmpeg.wasm 如何搭一个 Web 剪辑器”的前端工程师——这个仓库本身就是一份很好的架构参考。

**不适合：**需要 4K/长片/专业调色的创作者；需要团队协作云工程的机构；对导出速度敏感（批量出片）的流水线场景——那应该回到原生 NLE 或云端渲染农场。

参考来源

• GitHub 仓库：mohyware/clip-js
• ClipJS 在线示例（Vercel 托管）
• GIGAZINE 实测报道（2025-05）
• Koala 项目库条目：ClipJS