Remotion 最有价值的能力，并不是简单地“用 React 做动画”。

它真正解决的问题是：

把已有视频、React 组件、字幕、图表和动态元素放进同一个基于帧的时间轴中，然后通过代码生成最终视频。

这使得它非常适合：

• 真人口播视频；
• 录屏教程；
• 产品演示；
• 数据报告；
• 批量模板视频。

传统剪辑软件通常围绕时间轴操作，而 Remotion 更接近软件开发：

视频由组件组成；

画面由状态决定；

每一帧都有明确的数据来源。

随着 AI 编程工具的发展，Remotion 也成为一种适合 AI Agent 参与的视频生产方式。模型可以帮助生成 React 组件、处理字幕数据、修改动画逻辑，再通过自动化流程完成批量渲染。

本文将从 Remotion 的核心机制、项目结构、AI 工作流以及大模型 API 接入方式展开分析。

---

一、Remotion 如何理解视频

在 Remotion 中，一条视频可以理解成：

“随着帧号变化的 React 页面。”

例如：

第0帧

↓

React组件状态0


第1帧

↓

React组件状态1


第N帧

↓

React组件状态N

组件根据当前帧计算：

• 透明度；
• 位置；
• 缩放；
• 字幕状态；
• 图表变化。

渲染器随后逐帧生成画面。

简单组件示例：

import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig
} from "remotion";


export const TitleCard = () => {

  const frame = useCurrentFrame();

  const {fps} = useVideoConfig();


  const opacity =
    Math.min(1, frame / (fps * 0.5));


  return (

    <AbsoluteFill
      style={{
        opacity
      }}
    >

      <h1>
        AI视频生产
      </h1>

    </AbsoluteFill>

  );

};

其中：

useCurrentFrame()

提供当前帧。

useVideoConfig()

提供：

• 帧率；
• 视频尺寸；
• 时长。

需要注意：

不要使用浏览器当前时间作为动画依据。

因为逐帧渲染要求：

同一个输入，必须得到相同结果。

---

二、视频底层和 React Overlay

Remotion 最典型的应用场景：

底层播放已有视频。

上层叠加 React 内容。

例如：

真人口播：

↓

标题卡；

字幕；

流程图；

代码高亮；

数据图表。

结构类似：

MP4真人视频

↓

React组件层

↓

字幕 / 图表 / 动效

↓

最终视频

示例：

import {
 AbsoluteFill,
 OffthreadVideo
} from "remotion";


export const TalkingHead = () => {

 return (

 <AbsoluteFill>

   <OffthreadVideo
    src="assets/video.mp4"
   />

   <div>
     标题内容
   </div>

 </AbsoluteFill>

 );

};

这里：

MP4负责背景画面；

React负责动态内容。

二者共享同一个帧时间轴，因此可以精确控制：

什么时候出现字幕；

什么时候显示标题；

什么时候切换布局。

---

三、为什么 Remotion 适合 AI 视频工作流

AI 参与视频生产时，最大的挑战不是生成代码，而是保持结构稳定。

如果让模型一次生成：

• 视频逻辑；
• 所有组件；
• 所有素材；
• 所有动画；

项目很容易失控。

更合理的方式是拆分任务。

例如：

主题

↓

AI生成脚本

↓

生成分镜

↓

生成字幕数据

↓

生成React组件

↓

Remotion渲染

↓

输出视频

不同阶段负责不同事情。

AI 更适合：

• 内容规划；
• 代码生成；
• 数据整理；
• 参数调整。

而 Remotion 负责：

• 时间控制；
• 视频合成；
• 稳定输出。

---

四、大模型 API 在视频自动化中的作用

当视频生产流程自动化后，通常不只需要调用一次模型。

例如：

脚本阶段

调用模型：

• 生成视频主题；
• 优化口播内容；
• 调整表达方式。

---

制作阶段

调用模型：

• 生成 React 组件；
• 修改字幕布局；
• 分析视觉结构。

---

审核阶段

调用模型：

• 检查文本错误；
• 检查代码问题；
• 优化视频描述。

因此，一个完整的视频 Agent 可能需要多个模型协同：

规划模型

↓

代码模型

↓

审核模型

↓

总结模型

不同模型在：

• 推理能力；
• 编程能力；
• 成本；
• 响应速度；

方面存在差异。

---

五、多模型工作流中的 API 接入方式

如果只是测试一个模型，直接调用官方 API 即可。

但当项目需要同时使用多个模型时，会遇到：

• 多个 API Key 管理；
• 不同接口格式；
• 不同调用方式；
• 成本统计困难。

因此，一些开发者会增加统一 API 接入层。

架构类似：

Remotion视频Agent

↓

API统一入口

↓

多个大模型

↓

返回结果

例如 4SAPI 这类大模型 API 中转方案，可以作为统一调用入口。

它的作用主要是：

• 减少多个模型接口维护成本；
• 方便模型切换；
• 统一管理调用方式。

在视频自动化场景中：

例如：

脚本生成使用一个模型；

代码生成使用另一个模型；

文本审核使用第三个模型。

通过统一接口，可以减少修改程序结构的次数。

---

六、Remotion 项目结构设计

长期维护的视频项目，不建议把所有代码写在一个文件。

例如：

remotion-video/

├── src/

│   ├── Root.tsx

│   ├── compositions/

│   │   ├── TalkingHead.tsx

│   │   ├── ScreenRecording.tsx

│   │   └── DataVideo.tsx

│   │

│   ├── components/

│   │   ├── Subtitle.tsx

│   │   ├── Chart.tsx

│   │   └── ProgressBar.tsx


├── public/

│   ├── video/

│   ├── audio/

│   ├── images/

│   └── fonts/


└── package.json

这样：

Composition 管理视频结构；

Component 管理视觉元素；

Data 管理内容输入。

方便后续批量生成。

---

七、把时间轴数据化

不要把所有时间写死在组件里面。

更好的方式：

把场景变成数据。

例如：

export const scenes = [

 {

 id:"intro",

 startFrame:0,

 endFrame:150,

 title:"介绍问题"

 },


 {

 id:"demo",

 startFrame:150,

 endFrame:420,

 title:"展示效果"

 }

];

组件只负责读取：

const activeScene =
 scenes.find(
 scene =>
 frame >= scene.startFrame
 &&
 frame < scene.endFrame
 );

这样：

修改视频长度；

修改字幕；

调整节奏；

都不需要重写组件。

---

八、字幕和口播同步

字幕同步通常有：

• 句级；
• 词级；
• 逐字级。

例如：

[
 {
  "text":"今天介绍视频自动化",
  "start":0,
  "end":2.5
 }
]

转换成帧：

startFrame =
Math.round(start * fps);


endFrame =
Math.round(end * fps);

关键是：

字幕；

音频；

动画；

应该共享同一个时间轴。

不要让组件自己猜：

“现在应该显示哪句话”。

---

九、批量生成数据视频

Remotion 很适合模板化生产。

例如：

同一个视频模板：

输入不同 JSON：

生成不同视频。

数据：

{
"name":"产品A",

"price":"299",

"score":95
}

可以生成：

• 产品介绍视频；
• 数据报告；
• 个性化通知；
• 榜单视频。

结合 AI 后：

模型负责生成内容；

Remotion负责渲染。

---

十、AI 使用 Remotion 时需要注意的问题

AI 编写 React 视频代码容易出现：

• JSX结构错误；
• Hook使用错误；
• 秒和帧混淆；
• 素材路径错误；
• 组件尺寸异常。

因此建议分阶段：

第一步：

创建 Composition。

第二步：

加入静态组件。

第三步：

加入视频素材。

第四步：

加入字幕。

第五步：

执行渲染和检查。

不要一次让 Agent 完成整个视频工程。

---

十一、正式渲染前的检查

至少检查：

• 视频尺寸；
• 帧率；
• 时长；
• 视频是否提前结束；
• 字幕是否同步；
• overlay 是否正确出现；
• 字体是否加载；
• 音频是否匹配；
• 批量数据是否完整。

开发环境能够播放，不代表最终渲染一定成功。

尤其注意：

• 外部视频；
• 网络字体；
• 在线图片。

正式生产时最好全部纳入可控素材目录。

---

十二、Remotion 与 AI 视频生产的组合方式

未来较常见的视频生产流程可能是：

用户需求

↓

AI Agent理解任务

↓

调用大模型生成脚本

↓

生成React视频组件

↓

Remotion渲染

↓

自动检查

↓

发布

其中：

大模型负责理解和生成；

API接入层负责模型调用；

Remotion负责视频工程。

每个部分解决不同问题。

---

结论

Remotion 的核心价值，是把视频制作转化为 React 开发问题。

它让：

视频素材；

组件；

字幕；

数据；

动画；

都进入同一个帧级时间体系。

对于真人口播、录屏教程、产品演示和批量数据视频来说，这种方式比传统逐个剪辑更加容易自动化。

而在 AI 视频工作流中，大模型 API 是连接模型能力的重要基础设施。

当一个应用需要同时调用多个模型完成脚本生成、代码生成和内容审核时，通过类似 4SAPI 这样的 API 中转方式，可以减少接口管理成本，让模型切换更加灵活。

不过，工具只是基础设施。

真正决定视频生产效率的，仍然是：

合理的数据结构；

稳定的渲染流程；

完善的验证机制。

当这些环节组合起来，AI 视频生产才会从单次生成，逐渐发展为可持续运行的自动化系统。

参考资料

• Remotion 官方文档：用于核对 Composition、渲染和组件机制。
• OffthreadVideo 文档：用于视频素材导入和逐帧处理。
• Remotion License 文档：用于确认当前授权规则。