从零搭建 Remotion 视频开发环境：Codex AI 自动生成视频实践

前言

传统剪辑软件很适合处理实拍素材，但面对文字动效、数据动画和需要反复修改的宣传视频时，时间往往消耗在轨道整理、关键帧调整和版本复制上。客户改一个数字或一句文案，可能就要重新检查整条时间线。

Remotion提供了另一种制作思路：把视频拆成React组件，通过代码控制画面、时间、动画和素材。标题、数据、配色和时长都可以作为参数修改，一套结构也能生成多个内容不同的视频版本。

过去这种方式更适合熟悉前端开发的人，因为创作者需要自己处理组件、样式和动画逻辑。接入Codex后，可以先用自然语言描述分镜、画面比例和动效要求，再让AI分析项目并生成对应代码。

本文会在Windows中安装Node.js和FFmpeg，通过Remotion脚手架创建项目，再在VS Code中使用Codex启动工程、设计分镜、生成动画并渲染为MP4文件，完整走一遍“描述需求—预览调整—导出视频”的流程。

最后再通过cpolar将本地3000端口映射到公网。这样无需先导出多个测试版本，客户或团队成员就能直接打开预览页面，远程查看当前效果并反馈修改意见。

1 什么是 Remotion？

image-20260418200503308

Github 上拥有 44k+ 星的 Remotion，并不是简单的在线剪辑工具，而是一场关于视频生产范式的革命。Remotion 是一个可以使用 React 编写 Video 的框架。它的核心逻辑就是把每一帧视作为网页的一个页面来处理。利用HTML、CSS、JS渲染技术以及结合了视频编码的技术之后，就可以用上Web生态里所有的强大能力（Canvas、SVG、WebGL、Lottie），从而制作出动画效果。也就是说，只要浏览器能实现的效果都可以被“转化”成视频形式存在。

Remotion的核心特性：

  • 视频即代码（Video as Code）： 基本上取消了传统非线性编辑器中轨道逻辑的存在，用 HTML、CSS、JavaScript 以及完整的 React 生态系统来构建每一帧画面。
  • 参数化大规模生产：类似调用函数一样给视频传参。支持使用JSON或者API来实时驱动视频内容，从而达到“一套模板、万人万面”的个性化自动化生成效果。
  • 像素级精准控制： 借助 Web 动画强大的精度，在 60 FPS 的帧率下精确捕捉到每一毫秒的动画效果，避免了传统软件中繁复的关键帧提取过程。
  • Git 版本化管理： 视频工程文件不再是难以理解的二进制包，而是清晰明了的代码行。支持团队协作、代码审查（Code Review）和完美的分支控制。
  • 分布式云端渲染：原生支持AWS Lambda的分布式渲染，可以把渲染任务分发到上千个云节点上并行处理，把渲染耗时从“小时级”压缩至“秒级”。
  • 无缝对接 AI 生态：由于其纯代码的特性，可以和 Codex、Cursor 等 AI 编程工具完美结合。只需要描述逻辑就可以生成复杂的视频组件了，大大降低了技术门槛。

2 安装基础环境

2.1 Node.js环境

在使用Remotion之前，我们需要确保电脑上已经安装了Node.js环境。推荐用nvm来装node.js，NVM是一个Node.js版本控制器，在这个包里可以很容易地切换不同版本的Node.js。首先打开nvm官方GitHub仓库当前最新版本1.2.2发布页面：

https://github.com/coreybutler/nvm-windows/releases/tag/1.2.2

下载之后，双击运行启动安装程序【nvm-setup.exe】，再同意协议后点击下一步即可

image-20260418202003613

来到选择安装目录，这里选择【D:\nvm】，将nvm安装在D盘中，然后继续点击【Next】:
image-20260228155531380

接着设置nodejs的下载位置，这里直接也选择下载在nvm文件夹中，继续点击【Next】：
image-20260228155658861

接下来，一路选择【Next】即可，过程中的复选框及邮箱地址都可以不用修改和输入，直到最后一步点击【install】即可：

安装完毕后，回到刚才设置nvm的地方【D:\nvm】双击打开settings.txt文件，在其中粘贴下面的代码之后按下Ctrl+S保存：

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

该地址为国内淘宝镜像源，添加之后可以更快地下载nodejs环境：
image-20260228161004456

接下来，电脑上按【Win+R】键打开运行窗口，在里面输入cmd并回车即可打开命令提示符（CMD）窗口；然后在CMD中依次执行以下操作以查看版本是否安装：

nvm -v

image-20260228160116976

然后依次输入以下命令来安装nodejs环境（需要22版本以上）并且启用该版本：

nvm install 22
nvm use 22.20.0
node -v
npm -v

安装完毕后，用该版本进行验证，并且确认node环境的版本是否有效果，如上图所示：
image-20260228161349631

Node.js 安装完成之后，可以使用 nvm 管理器来安装并切换不同的 Node.js 版本。

2.2 安装FFmpeg

访问 FFmpeg 官方推荐的 Windows 编译版本网站

在 “release builds” 栏目下，找到 ffmpeg-release-essentials.zip进行下载，下载下来后，将压缩包解压重命名一下：
image-20260418202655532

存放路径设置为【C:\softwares\ffmpeg-8.0】，然后按住Win键再按下R组合键，在打开的对话框中输入下面命令：

control sysdm.cpl,,3

image-20260418202944103

配置完成后，在cmd中验证版本：

ffmpeg -version

image-20260418203042721

终端输出版本信息，代表FFmpeg安装完成。

3 Windows 本地环境实战：从零拉取你的第一个视频项目

想要在本地“写”视频的第一步不是学代码，而是搭建运行环境。Remotion脚手架能大幅缩短环境部署时间。

3.1 初始化项目

打开PowerShell或者CMD（Win+X选择终端即可），执行初始化命令：

npx create-video@latest

按照终端提示完成配置，全程回车默认即可，最后选择Yes用VS Code打开项目。
image-20260418204348569

未安装VS Code可前往官网下载，打开项目时选择信任工程文件：
image-20260418204557561

3.2 安装Codex插件

VS Code侧边栏点击插件图标，搜索Codex并安装：

安装完成后左侧出现插件入口，可自定义调整位置，登录账号即可使用。
image-20260418204858437

3.3 启动项目

方式1：终端手动执行命令

npm install
npm run dev

image-20260418210730309

方式2：Codex AI辅助启动，直接输入指令：

分析一下当前项目，并且帮我启动它

执行完成后访问本地地址：http://localhost:3000
image-20260418210540193

页面正常打开即项目启动成功。

4 视频创作实操演示

在Codex输入自然语言指令生成视频分镜与动画代码：

当前项目my-video中，有一个.codex的skill 查看一下，然后根据其中的skill给我设计一个cpolar内网穿透的宣传视频分镜特效脚本，需要16:9的画面。

image-20260419175308217

AI自动解析项目、输出文字分镜与React动画代码，实时预览渲染效果。
image-20260419185745018

完整渲染预览GIF（加速处理）：

预览效果确认无误后，点击页面右下角Render按钮，自定义渲染参数导出视频：
image-20260419192404475

导出时后台逐帧处理画面：

渲染结束后得到成品MP4视频文件：

5 下载安装cpolar

本地localhost:3000仅本机访问，无法远程给客户、团队预览。借助cpolar内网穿透，将本地服务映射为公网链接，实现远程协作预览。

5.1 什么是cpolar?

  • cpolar是内网穿透工具，通过加密隧道将局域网端口、Web服务映射至公网，无需配置路由器即可外网访问。
  • 支持Windows、macOS、Linux、树莓派、群晖NAS全平台，提供一键安装脚本。

5.2 下载安装cpolar

前往官方下载页获取Windows 64位安装包，解压后默认流程安装。

安装完成CMD验证：

cpolar version

image-20250815171446129

输出版本号即安装成功。

5.3 注册及登录cpolar web ui管理界面

官网完成免费账号注册：
image-20260301193227057

本地管理后台地址：

http://127.0.0.1:9200

image-20250815171734046

输入注册账号密码登录后台：
image-20250815171846757

6 穿透Remotion以实现公网访问

Remotion预览端口3000，两种隧道方案按需选择。

6.1 随机域名方式(免费方案)

免费隧道域名每24小时自动更换，适合短期临时演示。

  1. 左侧【隧道管理】-【隧道列表】，点击创建隧道；
  2. 隧道名称填remotion，本地端口3000，地区China Top；
    image-20260419203650057
  3. 创建完成后进入【状态】-【在线隧道列表】查看公网地址；
    image-20260419204404412
  4. 复制HTTPS链接浏览器打开，远程访问Remotion预览页。

6.2 固定域名方式（升级任意套餐皆可）

免费域名会定时变更，长期协作推荐付费套餐预留固定二级子域名。

  1. 进入云端预留页面，选择保留二级子域名，地区China Top，自定义域名名称保存；

  2. 返回本地隧道列表，编辑remotion隧道；
    image-20260419210324208

  3. 域名类型改为二级子域名，填入预留名称更新隧道；
    image-20260419210456207

  4. 刷新在线隧道列表，获得永久不变公网地址；
    image-20260419211147120

  5. 使用固定地址长期访问预览页面。

总结

完成整套流程后，Remotion属于可编程视频模板系统，画面、字幕、动画全部由代码管理，修改文案、配色、数据无需手动调整时间轴与关键帧。

Codex大幅降低React动画代码编写门槛，但AI生成代码必须预览校验，复杂动画易出现节奏错乱、元素遮挡、字体缺失、性能卡顿等问题，不能直接交付。

该方案适配品牌片头、产品演示、数据短视频、批量模板项目；纯实拍、重度调色、多镜头人工剪辑场景仍更适合传统剪辑软件。

cpolar映射3000端口可临时对外分享预览页面：随机域名用于短期验收，固定二级域名适合长期协作。不建议将Remotion开发预览页长期公开作为线上视频站点。

公网分享前务必清理项目内密钥、未公开素材、本地私有路径，并增加访问限制；所有图片、字体、音视频素材确认版权授权范围。

三者分工清晰：Remotion实现视频参数化模板，Codex加速代码生成迭代，cpolar提供远程预览通道，组合形成一套可复用、可协作、批量产出的代码化视频生产工作流。

# AI
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

百万Token不是数字游戏：Kimi K3完整吞下10万行代码库后，我测出了它的真实理解力

avatar 亚马逊云科技技术品牌专区

洛雪音乐音源终极指南：免费获取全网无损音乐的完整方案

洛雪音乐音源项目为音乐爱好者提供了一个强大的开源解决方案，通过社区维护的多样化音源配置，让用户能够免费获取QQ音乐、网易云、酷狗、酷我、咪咕五大平台的音乐资源。这个项目不仅支持跨平台音乐聚合，还提供了无损音乐配置方案，确保用户能够享受到高品质的音频体验。## 🎯 为什么选择洛雪音乐音源？**核心优势解析**洛雪音乐音源项目经过多次测试和迭代，已经成为目前最稳定、最全面的开源音乐聚合方

avatar 亚马逊云科技技术品牌专区

为什么选择Warcraft Font Merger？轻量、快速、多功能的字体工具解析

Warcraft Font Merger是一款专为魔兽世界玩家打造的字体合并与补全工具，它能够帮助玩家轻松解决游戏中的字体显示问题，让游戏界面更加美观、易读。无论是中文显示乱码，还是特殊符号缺失，这款工具都能提供高效的解决方案。## 一、轻量级设计，不占用过多系统资源Warcraft Font Merger采用轻量级架构，整个工具包体积小巧，不会占用过多的硬盘空间和系统内存。这意味着即使在

avatar 亚马逊云科技技术品牌专区