前言很多人做视频时真正卡住的不是创意而是工具。PR里一层层轨道看得人头大AE里一个文字动效就要反复拉关键帧改一点位置、节奏和透明度都可能要来回预览很多次。Remotion提供了另一种思路视频不一定只能“剪”也可以“写”。它把每一帧当成可以被React、HTML、CSS和JavaScript控制的画面动画、文字、图形、数据和转场都能通过代码生成。对于开发者来说这意味着视频可以版本管理、参数化复用也更适合批量生成。但很多人一听“视频即代码”就会退一步因为不是每个内容创作者都懂React。Codex的作用就在这里它可以像一个会写代码的视频助手把你描述的画面、分镜、动效节奏和宣传逻辑转换成Remotion项目里的组件和脚本。本文会从Windows本地环境开始演示Node.js、FFmpeg、Remotion项目初始化、VS Code中安装Codex插件、本地启动预览以及通过自然语言让Codex生成一个16:9宣传视频分镜和动效页面。跑通以后再通过Render导出MP4视频。最后还会通过 cpolar 将本地运行的Remotion预览页面映射到公网。这样视频还没最终导出前也可以把实时预览地址发给客户或同事远程查看减少反复录屏、截图和打包发送的麻烦。1 什么是 RemotionGithub 上拥有 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.jsNVM是一个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文件在其中粘贴下面的代码之后按下CtrlS保存node_mirror: https://npmmirror.com/mirrors/node/ npm_mirror: https://npmmirror.com/mirrors/npm/该地址为国内淘宝镜像源添加之后可以更快地下载nodejs环境接下来电脑上按【WinR】键打开运行窗口在里面输入cmd并回车即可打开命令提示符CMD窗口然后在CMD中依次执行以下操作以查看版本是否安装nvm-v然后依次输入以下命令来安装nodejs环境需要22版本以上并且启用该版本nvminstall22nvm use22.20.0node-vnpm-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或者CMDmWinX选择终端即可输入下面这行神奇的代码npx create-videolatest如下图接着做一些基础配置操作基本一路回车即可安装完毕后会问是否要使用VsCode打开项目我们选择了Yes如果还没有安装Vscode编辑器的话可以到官网下载https://code.visualstudio.com/打开后会询问是否信任此项目选择信任即可3.2 安装Codex插件在侧边栏选择插件图标然后搜索codex即可选择codex插件进行安装安装完成后应该会在左侧出现可以调整刀自己喜欢的位置登录就不多说了下面开始进行交流并启动项目。3.3 启动项目启动有两种方式可以直接在终端中输入命令npminstallnpmrun dev如下图或者可以直接和它交流让其为我们做分析并启动项目我们直接对它说分析一下当前项目并且帮我启动它如下图等待它跑完查看输出结果可以看到它已经启动了目前是空项目状态请访问一下http://localhost:3000如下图可以成功访问到项目了我们的项目也启动好了4 视频创作实操演示直接与codex对话由它用react代码给我们生成一个视频分镜脚本当前项目my-video中有一个.codex的skill 查看一下然后根据其中的skill给我设计一个cpolar内网穿透的宣传视频分镜特效脚本需要16:9的画面。可以看到提示词给出来后它已经在执行任务了还创建了视频分镜特效脚本让我们等待任务完成。看到这里他出的是文字版所以补了一句让我们看看最终效果如下为GIF动图演示做了加速处理怎么样效果是不是还不错每一帧都是由React代码生成的。如果觉得还不错可以点击右下角的Render按钮配置相关参数调整然后进行导出点击导出后右边会进行帧处理如下图等待导出完成后就可以得到一个可以直接播放的MP4格式的视频啦这样一来我们便做了一段宣传视频了嘛5 下载安装cpolar既然已经掌握了用CodexRemotion高效生成视频的方法那么就会遇到一个新的问题既然这种“视频即代码”的模式如此强大如果我想把本地运行的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然后点一下 【更新】更新完成之后接着进入【状态】→【在线隧道列表】就可以看到公网地址由之前随机字符串变成现在固定的二级子域名形式然后复制公网地址在浏览器中直接输入你自己的固定地址来访问完美页面一眨眼就打开了感觉还是以前那样丝滑。一个永远不变的域名也设置好了总结完成这套流程后Remotion就不再只是开发者的小众框架而可以成为一套AI辅助的视频创作工作台。你可以用自然语言描述想法再让Codex逐步生成分镜、画面、动画和交互逻辑。这套方案的价值不是完全替代PR或AE而是适合做结构清晰、风格统一、可参数化复用的视频内容。比如产品宣传片、功能演示、数据可视化视频、教程片头和批量模板视频都很适合用这种方式生成。配置 cpolar 后本地localhost:3000的Remotion预览页面可以从外部网络打开。随机域名适合临时发给别人看效果固定二级子域名更适合长期项目演示和远程协作。需要注意的是预览页面里可能包含未发布的视频脚本、项目素材和品牌内容。公网访问时不要把地址随意公开正式协作最好使用固定入口并控制分享范围。Remotion负责把视频工程代码化Codex负责降低创作和编码门槛cpolar负责补上远程演示入口。当这几部分组合起来以后视频创作就不再只是拖轨道和拉关键帧也可以变成一条从想法、代码、预览到导出的自动化工作流。程序山海以像素为砖以算法为梁搭建未有的世界。一个探索和分享的有趣博主点击了解