Remotion让视频创作告别剪按钮——AI生成视频+像素级精准控制！cpolar内网穿透实验室第700个成功挑战

软件名称：Remotion（React 视频框架）、Codex（AI 编程编辑器）

操作系统支持：Remotion/Codex均完美支持 Windows 系统，同时 cpolar 还兼容 macOS、Linux、树莓派、群晖 NAS 等，Remotion 依托 Node.js 环境，Windows 下通过 nvm 可灵活切换 Node 版本适配。

软件介绍 ：

Remotion 不是传统剪辑软件，而是把视频每一帧当成网页页面的 React 框架，浏览器能实现的效果（Canvas、SVG、WebGL）都能变成视频，支持参数化批量生成视频、Git 版本化管理、分布式云端渲染；

Codex 是适配 Remotion 的 AI 编辑器，不用懂代码，自然语言描述就能生成视频组件。

Remotion 的出色功能

Remotion 最亮眼的地方，是把 "视频创作" 从 "鼠标拖拽剪轨道" 变成 "代码化精准控制"：

• 像素级精准：60FPS 帧率下能精准控制每一毫秒的动画，比如想让文字在 0.3 秒时出现、1.2 秒时放大，不用在 AE 里拉关键帧，代码里写死数值就行，误差几乎为 0；
• 批量生成不重复：一套模板能通过 JSON/API 传参，比如给 100 个客户做同款宣传视频，只改名字和产品图，一键生成 100 个不同版本，不用重复剪辑；
• 无缝对接 AI：和 Codex 搭配，哪怕你只懂 "要一个渐入渐出的标题动画"，AI 也能把这句话翻译成 React 代码，不用学 HTML/CSS/JS；
• Git 版本管理：视频工程不再是乱码一样的二进制文件，每一次修改都能提交、回滚，团队协作时代码审查就能核对视频效果，避免版本混乱。

实用场景

场景 1：自媒体批量做垂类短视频

痛点：美食博主需要给 10 款食材做同款 "食材介绍 + 烹饪步骤" 短视频，传统剪辑要重复套模板、改文字，耗时且容易出错；

爽点：用 Remotion 写好基础模板，通过 Codex 描述 "把食材名称换成 XX，步骤图换成第 3 张，背景色改成暖黄色"，AI 自动修改代码，批量渲染 10 条视频，原本一天的工作量压缩到半小时，还能保证每一条的画面精度一致。

场景 2：工作室远程给客户演示视频初稿

痛点：视频工作室在本地做好 Remotion 预览版，客户在外地，没法直接看localhost:3000的界面，只能导出低清小样传过去，客户提修改意见后又要重新导出，来回折腾；

爽点：用 cpolar 把本地 3000 端口映射成公网地址，把链接发给客户，客户直接点开就能看高清实时预览，改一个参数刷新页面就能看到效果，不用反复导出传文件，沟通效率提升 70%。

cpolar 内网穿透技术带来的便利

用 Remotion 做视频的核心爽点是 "高效"，但本地预览界面只能自己看，等于 "好东西藏在局域网里"，cpolar 刚好补上这个缺口，而且全程不用碰复杂的服务器配置：

1. 不用折腾路由器：不管是在家还是在工作室，不用做端口映射、公网 IP 申请，打开 cpolar 创建隧道，填好 Remotion 的 3000 端口，一键就能生成公网地址，哪怕是电脑小白，5 分钟也能搞定；

2. 两种访问方式适配不同需求：

   • 免费随机域名：适合临时给客户演示，虽然 24 小时换一次地址，但胜在不用花钱，复制新地址发给客户就行，应急足够；
   • 固定二级子域名：升级后能绑定比如 remotion.cpolar.top 这样的固定地址，发给客户、团队成员后，不用反复更新链接，长期协作更省心；

3. 多设备无缝访问：客户用手机、平板、电脑都能打开 cpolar 的公网链接，看 Remotion 的视频预览，不用局限在工作室的电脑上，哪怕在咖啡馆和客户沟通，掏出手机就能实时调整视频参数；

4. 安全又稳定：cpolar 的隧道是加密的，不用担心预览界面被无关人员访问，而且公网访问的流畅度和本地几乎没差，哪怕视频预览界面有高清素材，也不会卡顿；

5. 兼容多场景扩展：除了映射 Remotion，cpolar 还能把本地的 PR 工程预览、AE 渲染进度页面也映射出去，等于给整个视频创作流程都开了 "外网通道"，不管是和远程同事协作，还是给异地客户验收，都不用再受局域网限制。

总结

Remotion+Codex 重构了视频创作的逻辑 ------ 把 "剪视频" 变成 "写视频"，用 AI 和代码解决传统剪辑的低效、不精准、协作难问题；而 cpolar 则是给这套高效的创作系统加了 "外网翅膀"，让本地的创作成果能随时随地被访问、演示、协作。对于视频创作者来说，不用再被剪辑软件的轨道、关键帧绑架，也不用再被局域网限制协作范围，一套组合拳下来，既省时间又省沟通成本，哪怕是没编程基础的人，也能靠 Codex 的自然语言交互，做出像素级精准的视频；对于团队来说，Git 版本管理 + cpolar 远程访问，让视频创作的协作效率翻了倍。

想要提高效率最好的办法就是把利器随身携带。这个的最优解就在下面。按照教程一步步安装就好！

今天，就手把手地带大家在 Windows 环境下用 Codex + Remotion 开启一场降维打击式的视频创作实战。告别了繁琐的鼠标拖拽操作之后，"敲一下回车键就可以制作出一部大片"的极致爽快感也出现了！

1 什么是 Remotion？

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】，再同意协议后点击下一步即可

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

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

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

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

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

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

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

nvm -v

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

nvm install 22

nvm use 22.20.0

node -v

npm -v

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

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

2.2 安装FFmpeg

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

https://www.gyan.dev/ffmpeg/builds/

如下图：

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

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

control sysdm.cpl,,3

如下图：

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

ffmpeg -version

可以发现已经输出了版本信息，这就完成了安装

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

想要在本地"写"视频的第一步不是学代码，而是把这台"视频工厂"搬进你的 Windows 电脑。使用 Remotion 超好的脚手架工具的话，在安装大剪辑软件之前的时间会短很多。

3.1 初始化项目

首先，打开PowerShell或者CMDm（Win+X选择终端即可），输入下面这行神奇的代码：

npx create-video@latest

如下图：

接着做一些基础配置操作，基本一路回车即可：

安装完毕后会问是否要使用VsCode打开项目，我们选择了Yes：

如果还没有安装Vscode编辑器的话，可以到官网下载：https://code.visualstudio.com/

打开后会询问是否信任此项目，选择信任即可：

3.2 安装Codex插件

在侧边栏，选择插件图标，然后搜索codex即可，选择codex插件进行安装：

安装完成后，应该会在左侧出现，可以调整刀自己喜欢的位置：

登录就不多说了，下面开始进行交流并启动项目。

3.3 启动项目

启动有两种方式，可以直接在终端中输入命令：

npm install
npm run dev

如下图：

或者可以直接和它交流，让其为我们做分析并启动项目，我们直接对它说：

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

如下图：

等待它跑完，查看输出结果：

可以看到它已经启动了，目前是空项目状态，请访问一下：

http://localhost:3000

如下图：

可以成功访问到项目了，我们的项目也启动好了！

4 视频创作实操演示

直接与codex对话，由它用react代码给我们生成一个视频分镜脚本：

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

可以看到，提示词给出来后，它已经在执行任务了，还创建了视频分镜特效脚本，让我们等待任务完成。看到这里他出的是文字版，所以补了一句，让我们看看最终效果：

如下为GIF动图演示（做了加速处理）：

怎么样，效果是不是还不错，每一帧都是由React代码生成的。如果觉得还不错，可以点击右下角的Render按钮，配置相关参数调整，然后进行导出：

点击导出后，右边会进行帧处理，如下图：

等待导出完成后，就可以得到一个可以直接播放的MP4格式的视频啦：

这样一来，我们便做了一段宣传视频了嘛？

5 下载安装cpolar

既然已经掌握了用Codex+Remotion高效生成视频的方法，那么就会遇到一个新的问题：既然这种"视频即代码"的模式如此强大，如果我想把本地运行的Remotion实时预览界面分享给远方的客户观看，又该怎么办？

本地运行的 localhost:3000 就像一座孤岛，不能直接被外网访问。

为了突破地域限制，达到真正的远程云端协作的效果，我们还需要用到另一款神器------cpolar。它是目前最强大的内网穿透工具之一，可以立刻为本地环境创建一个公网访问的"专属隧道"。接下来就是安装 cpolar 了，在这里彻底打通本地创作和远端演示之间的最后一公里距离。

5.1 什么是cpolar?

• cpolar 是一款内网穿透工具，可以将局域网内的服务（本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射到公网之上，使外部设备无需配置路由器就可以访问。
• 支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并且可以提供一键安装脚本方便部署。

5.2 下载安装cpolar

打开cpolar官网的下载页面

点击立即下载 64-bit按钮，然后就可以把安装包下载下来了

下来一下就是个压缩包，解压之后再运行里面的程序即可，默认安装就好，装完后打开CMD窗口输入下面的命令来验证是否已经成功安装好了：

cpolar version

出现以上版本就代表安装成功

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

访问cpolar官网，点击免费注册按钮进行账号注册

进入到如下的注册页面进行账号注册：

注册成功后，在浏览器中输入以下地址访问Web UI管理界面：

http://127.0.0.1:9200

输入刚才注册好的cpolar账号登录就可以进入后台页面了：

6 穿透Remotion以实现公网访问

刚才我们已经成功地安装并登录了 cpolar，万事俱备只欠东风。接下来只需要把本地运行的 Remotion 服务（默认端口一般为3000或者顺延端口，在文中显示为3000）通过 cpolar 映射出去就可以立刻获得一个公网访问地址。

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

随机域名的方式比较适合预算有限的用户。使用该方法时，系统会每隔24小时左右自动更换一次域名地址。不太友好地对待长期访问的人群，但是这个方案是免费提供的，如果您的资金允许的话，请参见大纲6.2中的固定域名的方法以及它所带来的一点小好处------就是更稳定的网页浏览体验。

首先，点击左侧菜单栏的【隧道管理】，展开进入【隧道列表】页面，在该页面下默认有两个隧道：

• 远程桌面隧道，指向3389端口，tcp协议
• 网站隧道指向8080端口，使用http协议（HTTP默认会生成两个公网地址，一个是http，另一个是https，省去了配置SSL证书的麻烦）

点击创建隧道，进入创建隧道页面，在这里填写一个【隧道名称】为【remotion】，本地地址处输入remotion的端口号3000，并选择一个地区为中国Top后点创建按钮：

创建完毕之后，在【状态】下的【在线隧道列表】里就可以看到我们新建的隧道已经在其中了：

以https为例，我们来测试一下：

https://1ccad265.r1.cpolar.top

可以看到，成功访问到穿透之后的remotion页面了！

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

上面的随机域名方案虽然可以免费使用，但是有一个绕不开的小问题就是每隔24小时就会自动刷新一次。这又意味着什么呢？你昨晚辛苦搭好的模型今天想发给甲方或者朋友看一眼炫耀一下结果发现地址失效了还要回到cpolar后台重新复制新地址来回折腾很不优雅。

如果你想要拥有一个永久固定、随时可用 的专属访问地址，比如 remotion.cpolar.top 这样的简洁好记的链接发给谁都能直接打开的话，只需要把 cpolar 升级到任意付费套餐，并配置一个固定的二级子域名就可以实现！操作也十分简单：

第一，进入官网预留页面：

https://dashboard.cpolar.com/reserved

然后选择【预留】菜单，就可以看到其中的【保留二级子域名】项了，在里面填写好地区、名称以及描述（可以不填），最后点击一下保存按钮即可。操作步骤图如下：

列表里有一条被保留下来的二级子域名记录：

• 地区：China TOP。
• 二级域名为remotion。

二级域名为唯一，每个账号都不一样，请以自己所留的二级域名为主

保留成功之后，回到本地 cpolar 管理界面（http://127.0.0.1:9200），进入侧边菜单栏的【隧道管理】→【隧道列表】中找到之前创建好的 remotion 隧道：

点击右侧的【编辑】按钮，把域名类型 改为"二级子域名"，在 Sub Domain 栏中输入你之前保存好的名称（例如 remotion），然后点一下 【更新】：

更新完成之后，接着进入【状态】→【在线隧道列表】就可以看到公网地址由之前随机字符串变成现在固定的二级子域名形式：

然后复制公网地址，在浏览器中直接输入你自己的固定地址来访问：

完美！页面一眨眼就打开了，感觉还是以前那样丝滑。一个永远不变的域名也设置好了

总结

本教程带大家从零开始搭建一个基于Codex+Remotion的"视频即代码"创作系统，实现了环境配置到AI自动生成动效视频的一整套流程，并且利用 cpolar内网穿透 使本地运行的视频预览界面可以被公网访问。

• 技术范式重构：用Remotion框架把视频每一帧看作一个Web页面，实现像素级精确控制和Git版本化管理。

• AI降维打击：借助Codex插件，使不会编程的用户也可以用自然语言对话的方式控制React生成复杂的视频分镜和特效。

• 高效远程协作：通过cpolar内网穿透技术，无需复杂的服务器部署就可以把本地开发环境映射到公网之上，方便了远程演示和客户验收。

本教程可以让你很快地建立一个自动化、智能化的视频制作系统，既可以省去传统剪辑软件中繁琐的关键帧操作步骤，又可以用AI快速提升动效大片产出的速度。