视频即代码，Remotion 能做什么、不能做什么

独立开发阿平
0 阅读6分钟

最近看到了一款用代码写视频的工具--remotion, 我把 remotion.dev 翻了一遍，动机很具体，想知道一套模板能不能喂进不同数据、批量出片，还能像代码一样进版本库。

一、两类工具卡在哪

翻它之前我先想了一遍现有的两条路，都没走通。

剪辑软件的手工账

PR/AE 靠手动拖拽，把片段拖上时间轴，一条片子一个工程，改一版要翻回去找图层。5000 条片子就是 5000 个工程、5000 次导出，这些动作在界面里没有捷径。工程文件丢进 Git 也没用，diff 出来是一堆二进制和图层 id。

AI 视频工具的黑盒账

AI 视频工具把门槛压得低，一句话进去，一段视频出来，能调的东西停在模板和参数上。片头要换成公司当季的动效规范，或者按订单库的 SKU 一条条出片，接口和数据结构都对不上。

两类工具卡在同一处，视频的生产过程没被当成代码。批量生成、版本管理、对接业务系统，这三件事在代码里都有成熟答案，在剪辑软件里没有。

01-contrast.png

视频为什么非得一条一条做？

二、Remotion 是什么，帧是怎么渲染出来的

它给的回答最直接，画面就是 React 组件，时间由帧号决定。

一句话定义

Remotion 是开源、基于 React 的视频框架，官方管它叫 video as code，视频即代码。

渲染链只有三步

写的是 React 组件，组件描述某一帧长什么样。React 把每一帧渲染成 DOM，无头 Chromium 再把它截成图像，FFmpeg 按帧率编码成 MP4。时间轴由帧号推出来，界面里那根播放头到这里只是一个数字。

02-render-chain.png

一帧一帧截，速度能好到哪去？这篇不给数字，我没在本机跑过。

三条入口，首页并排摆着

  • programmatically 全用代码控制，数据进、视频出，能进 Git 也能进 CI，入口是 API Docs。
  • interactively 在 Remotion Studio 里拖时间轴、调关键帧，改完存回代码，入口是 Studio。
  • agentically 让 Agent 读官方文档写组件，人只审代码，入口是 Agent Skills。

首页第三栏那个 agentically，指的就是最后这条，让 Agent 代写组件。

03-modes.png

它不替代 PR/AE

影视后期和精细特效剪辑交给 AE 更合适。Remotion 站在自动化和可编程这条赛道上，卖的是批量、可维护、能和业务系统长在一起。

三、能力盘点，它能干哪些活

帧从哪来清楚了，接下来看这些帧能拼成什么。

参数化与设计系统

片头、字幕条、数据卡都能封装成组件，全公司共用一套动效和排版。改一处，下次出的片子全跟着变。官方把这类做法叫 motion design system。

批量渲染

一套模板配一个数据源，1000 条数据进去，1000 条片子出来。剪辑软件做不了这件事，那也不是它擅长的活。

内置素材

元素、动画、转场、音效、字幕、调色六类都自带。官方首页还列了特效预设和转场预设，拼一个短视频够了。

在哪儿出片

渲染入口官方列了六种，差别在于谁在跑那个浏览器。

  • Studio 手动导出，不写代码的同事也能出片。
  • CLI 用 npx remotion render，本地和 CI 脚本里最直接。
  • SSR 在 Node 服务里调渲染 API，按请求出片。
  • AWS Lambda 一次几百个并发，大批量靠它。
  • GitHub Actions 提交触发，出片当构建产物。
  • 浏览器端渲染在浏览器里直接出，素材不用上传。

生态配套

Remotion Player 把片子嵌进网页播放。Editor Starter 是付费模板，拿它可以做在线剪辑器。Agent SDK 还没发布，官方标着 Soon。remotion.dev/convert 是本地转码工具，remotion.media 提供测试素材。

官网上挂着几个数字，按 2026 年 11 月 14 日的首页抄下来，72K stars、6M+ 月安装、1200 页文档、12K+ Discord 成员、300+ contributors、800 家客户。这些只说明它不会明天消失。

同一套组件能不能既出横屏又出竖屏？能，宽高写在 composition 的参数里，改一处就换一个比例。

四、场景与人群，谁该用谁别用

这些能力落到具体活上，分岔就清楚了。

什么活儿适合

  • 数据可视化短片、技术演示动画，数据一变，片子重出。
  • 批量个性化视频，年度报告、证书、营销素材按用户生成。
  • 自研视频工具、在线剪辑平台，Player 和 Editor Starter 就是为这个准备的。
  • 视频模板要能维护、能回滚、要对接后端自动出片。

它接不住的活儿

  • 复杂影视后期、精细特效剪辑，AE 更合适。
  • 只想拖拽剪长视频、不打算碰 JS 和 React，剪辑软件省事得多。

批量出片适合它，长片后期不适合，这条线分得挺清楚。两条路的差别在数量，一边是很多条、各自不同、还要能重出，一边是一条、要调得很细。

04-fit.png

五、极简上手，五分钟跑起来

活儿对得上，才谈怎么把它跑起来。

前置依赖

Node 16 以上就能跑，具体版本看官方 system requirements。装机页里有条容易漏的，Linux 的 glibc 要 2.35 以上，macOS 要 15 以后，Alpine 和 nixOS 官方不支持。

两条命令

npx create-video@latest

选模板、装依赖，接着启动 Studio。

npm run dev

改代码，画面实时刷新

Studio 里时间轴和关键帧都能拖，保存即生效。一条视频怎么组织，看这段 composition 就明白。

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";

export const Root = () => (
  <Composition id="MyVideo" component={MyVideo} durationInFrames={150} fps={30} width={1080} height={1920} />
);

六、许可与商用

能跑起来之后，才轮到钱。这一节我核了两遍，因为它最容易记错。

免费范围

Remotion 用自家的 Remotion License，MIT 这类通用开源许可在这里不适用。个人用免费，3 人以内的公司也免费，商用不额外收费。

七、优势、局限，和后面几篇

费用算完，最后把它的好坏各摆一边。

值得用的地方

我更看重两处，一是复用前端技术栈，React、CSS、SVG、Canvas、WebGL 都能直接进画面，动效不用另学一套；二是视频即代码，片子和网页一样进 Git，改一版能 diff，回滚不用重做。

  • 数据驱动批量渲染，模板加数据源，出片量跟着数据量走。
  • 能嵌进业务系统，Player 放网页里，渲染 API 挂后端，出片就是一次接口调用。

会卡住的地方

  • 要 React 底子，不会组件和 hooks，学习成本不比学剪辑低。
  • 渲染吃资源，本地渲一版就占满 CPU，量大要上云，云上按量计费。
  • 长视频慢，几十分钟的成片按小时算，短视频和动态图文才是它待着舒服的地方。

参考文档

avatar
文章
阅读
粉丝