Remotion 整体使用介绍 & Windows 11 本地个人开发完整指南

Remotion 是一款以「视频即代码」为核心的 TypeScript 框架，它允许开发者复用 React 生态的所有能力，以编程方式创建、渲染视频，支持数据驱动、批量生成，完美解决传统视频制作中重复劳动、个性化难度高的痛点，非常适合个人开发者进行创意视频、数据可视化视频、个性化总结视频等开发。

一、组织与团队

• 创始人：Jonny Burger，核心维护者，活跃于 Discord 与 GitHub 社区。
• 协作：接受 Issues/PR，开发依赖 Bun 包管理器（≥1.3.3），提供完整贡献指南。

关键链接

• 官网：https://remotion.dev
• 主仓库：https://github.com/remotion-dev/remotion
• 技能仓库：https://github.com/remotion-dev/skills
• 文档：https://remotion.dev/docs
• 贡献指南：https://remotion.dev/docs/contributing

1. 核心优势（个人开发友好）

• 技术栈复用：无需学习专业视频剪辑软件，React/TypeScript 开发者可快速上手，复用 npm 生态、组件化思想、热重载等开发体验。
• 灵活可控：通过代码控制视频每一帧、分辨率、帧率、动画逻辑，支持 CSS/Canvas/SVG/WebGL 实现各类特效，数据驱动实现批量生成个性化视频。
• 轻量化：本地开发无需高性能设备，基于浏览器预览，渲染速度可根据需求调整，个人开发场景下本地渲染即可满足需求。
• 免费可用：个人开发、开源项目完全免费，无功能限制，无需授权即可使用核心能力。

2. 核心使用流程（通用）

1. 环境准备：搭建 Node.js 运行环境，可选配置 FFmpeg 提升编解码能力。
2. 项目初始化：通过官方脚手架快速创建项目，选择合适模板。
3. 开发与预览：编辑 React 组件编写视频逻辑，启动本地服务器实时预览效果。
4. 参数配置：调整视频分辨率、帧率、时长等核心配置。
5. 本地渲染：将编写的视频逻辑渲染为 MP4 等格式的视频文件。
6. 优化与迭代：根据渲染结果调整动画、性能，实现更复杂的视频效果。

3. 核心文件说明

• src/Video.tsx：核心视频组件，编写视频画面、动画、内容的核心文件，类似 React 项目的页面组件。
• src/Root.tsx：视频组合配置文件，定义视频的分辨率、帧率、时长、合成逻辑。
• remotion.config.ts：项目全局配置文件，配置渲染参数、FFmpeg 路径、静态资源等。
• package.json：项目依赖与脚本配置，包含 start（预览）、build（渲染）等核心脚本。

二、Windows 11 本地个人开发完整步骤

阶段 1：前置环境搭建（必做，一次性配置）

1. 安装 Node.js（核心运行环境）

• 下载地址：https://nodejs.org/（推荐 LTS 版本，≥18.x，兼容 Remotion 最新版，避免版本不兼容报错）。
• 安装步骤：

1. 双击安装包，勾选「Add Node.js to PATH」（默认已勾选，关键步骤，确保终端能识别 node 命令）。
2. 其余步骤默认下一步，无需修改安装路径（如需修改，避免中文、空格路径）。
3. 安装完成后，重启终端（CMD/PowerShell 均可），验证是否安装成功：
   1 2 3 4

   # 查看 node 版本 node -v # 查看 npm 版本 npm -v

4. （可选，优化国内下载速度）配置 npm 淘宝镜像，避免安装依赖时卡顿：
   1	npm config set registry https://registry.npmmirror.com/

2. 安装 FFmpeg（视频编解码工具，可选但推荐）

FFmpeg 是 Remotion 渲染视频的核心依赖，用于视频编解码、格式转换，不安装可能导致渲染失败或无法生成 MP4 文件。

• 下载地址：https://ffmpeg.org/download.html#build-windows（选择「Windows » Static Builds」下的最新版本，对应自己的系统位数（64 位））。
• 安装步骤（解压配置即可，无需安装）：

1. 下载完成后，解压到固定路径（如 D:\Software\ffmpeg，路径不要有中文、空格）。
2. 找到解压目录下的 bin 文件夹（路径示例：D:\Software\ffmpeg\bin），复制该路径。
3. 配置系统环境变量：
   • 右键「此电脑」→「属性」→「高级系统设置」→「环境变量」。
   • 在「系统变量」中找到「Path」，双击打开。
   • 点击「新建」，粘贴刚才复制的 bin 文件夹路径，点击「确定」保存所有窗口。
4. 验证是否配置成功：重启终端，输入以下命令，显示版本信息即成功：
   1	ffmpeg -version

3. 可选工具安装

• 代码编辑器：推荐 VS Code（https://code.visualstudio.com/），安装 React、TypeScript 插件，提升开发效率。
• Git：如需克隆 Remotion 官方模板，可安装 Git（https://git-scm.com/download/win），默认安装即可。

阶段 2：Remotion 项目初始化（快速创建第一个项目）

1. 打开终端（CMD 或 PowerShell），切换到你想要存放项目的目录（如桌面）：
   1 2	# 切换到桌面（示例） cd Desktop

2. 执行官方脚手架命令，快速创建视频项目：
   1	npx create-video@latest

3. 交互步骤（新手友好，默认选择即可）：
   • 输入项目名称（如 my-first-remotion-video），回车。
   • 选择项目模板（推荐默认 Hello World 模板，最基础，便于理解核心逻辑）。
   • 等待依赖安装完成（终端显示 Done! 即表示初始化成功，期间不要关闭终端）。
4. 进入创建好的项目目录：
   1	cd my-first-remotion-video

阶段 3：本地开发与实时预览（核心开发环节）

1. 启动本地开发服务器（热重载，实时预览视频效果）：
   1

   npm start

2. 自动打开预览页面：
   • 命令执行成功后，会自动在默认浏览器打开 http://localhost:3000 预览页面。
   • 若未自动打开，可手动复制该地址在浏览器中访问。
3. 核心开发操作（新手入门）：
   • 查看预览界面：页面左侧是视频预览窗口，右侧是控制面板（可调整播放、暂停、跳转到指定帧、修改分辨率等）。
   • 编辑视频内容：打开 VS Code，导入项目文件夹，编辑 src/Video.tsx 文件（核心视频组件），示例修改：
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   // 替换原有内容，修改文字与简单动画 import { AbsoluteFill, useCurrentFrame } from "@remotion/core"; export const MyVideo = () => { // 获取当前帧（用于实现动画逻辑） const frame = useCurrentFrame(); // 视频总时长（默认 300 帧，帧率 30fps，即 10 秒） const totalFrames = 300; // 实现文字淡入动画 const opacity = Math.min(1, frame / 50); return ( <AbsoluteFill style={{ backgroundColor: "#000", justifyContent: "center", alignItems: "center" }}> <h1 style={{ color: "#fff", fontSize: 60, opacity }}> 我的第一个 Remotion 视频！ </h1> </AbsoluteFill> ); };
   • 热重载生效：修改代码并保存后，浏览器预览页面会自动刷新，实时看到修改效果，无需重启开发服务器。
4. 调整视频核心配置（修改分辨率、时长等）：
   • 编辑 src/Root.tsx 文件，修改 Composition 组件的属性：
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   import { Composition } from "@remotion/core"; import { MyVideo } from "./Video"; // 视频配置 export const Root = () => { return ( <Composition id="my-first-video" // 视频唯一标识 component={MyVideo} // 关联核心视频组件 durationInFrames={600} // 总帧数（帧率 30fps 时，600 帧 = 20 秒） fps={30} // 帧率（每秒帧数，常用 30/60） width={1920} // 视频宽度（1080P 对应 1920） height={1080} // 视频高度（1080P 对应 1080） /> ); };
   • 保存后，预览页面会自动更新配置，看到视频时长、分辨率的变化。

阶段 4：本地渲染生成最终视频文件

1. 两种渲染方式（任选其一）：
   • 方式 1：通过浏览器预览页面渲染（可视化操作，新手推荐）
   1. 保持开发服务器运行，浏览器打开 http://localhost:3000。
   2. 右侧控制面板下滑，找到「Render」（渲染）区域。
   3. 选择输出格式（默认 MP4，推荐），点击「Render video」。
   4. 等待渲染完成（进度条显示 100% 后，会自动触发下载，视频文件保存到浏览器默认下载目录）。
   • 方式 2：通过终端命令渲染（更高效，适合熟悉命令行的开发者）
   1. 可关闭浏览器预览页面，保持终端在项目目录下。
   2. 执行渲染命令：
      1	npm run build

   3. 等待渲染完成（终端显示 Rendering done! 即成功）。
   4. 视频文件保存路径：项目根目录下的 out/ 文件夹（文件名默认对应 Composition 的 id，即 my-first-video.mp4）。
2. 验证视频：找到生成的 MP4 文件，双击用播放器打开，查看是否符合预期效果。

阶段 5：个人开发常用优化与进阶技巧（可选）

1. 性能优化（避免渲染卡顿）：
   • 减少复杂动画的层数，避免每一帧都进行大量计算。
   • 对于静态内容，使用 static 标记，减少重复渲染。
   • 降低预览时的分辨率（右侧控制面板可调整），提升预览流畅度，渲染时再切换为高清分辨率。
2. 复用组件（提升开发效率）：
   • 将视频中的重复元素（如片头、片尾、水印）封装为独立 React 组件，在 Video.tsx 中引入复用。
3. 数据驱动（批量生成个性化视频）：
   • 创建 data.json 配置文件，存放个性化数据（如姓名、分数、文案）。
   • 在 Video.tsx 中导入数据，根据数据动态修改视频内容，实现批量渲染不同内容的视频。
4. 添加音频（丰富视频效果）：
   • 将音频文件（MP3/WAV 格式）放入项目 public/ 文件夹。
   • 使用 Remotion 提供的 Audio 组件导入并播放音频：
   1 2 3 4 5 6 7 8 9 10

   import { AbsoluteFill, Audio } from "@remotion/core"; export const MyVideo = () => { return ( <AbsoluteFill> {/* 其他视频内容 */} <Audio src="/background-music.mp3" /> {/* 对应 public 下的音频文件 */} </AbsoluteFill> ); };

阶段 6：常见问题排错（个人开发避坑）

1. 终端提示「node 不是内部或外部命令」：Node.js 未添加到环境变量，重新安装 Node.js 并勾选「Add to PATH」，或手动配置环境变量。
2. 渲染失败提示「FFmpeg not found」：FFmpeg 未安装或环境变量配置错误，重新检查 FFmpeg 的 bin 目录是否添加到 Path，重启终端后重试。
3. 预览页面无刷新、修改代码不生效：关闭终端，重新执行 npm start，或清除浏览器缓存。
4. 视频渲染后无声音/画面模糊：检查音频文件路径是否正确，调整 Composition 中的分辨率和帧率，确保与预期一致。
5. 依赖安装卡顿/失败：切换 npm 淘宝镜像，或使用 yarn 替代 npm（需先安装 yarn：npm install -g yarn）。

三、总结

1. Remotion 对 Windows 11 个人开发者非常友好，核心流程是「环境搭建 → 项目初始化 → 开发预览 → 本地渲染」，一次性环境配置后，后续项目可快速上手。
2. 个人开发优先使用 Hello World 模板入门，掌握核心组件与配置后，再尝试数据驱动、音频添加等进阶功能。
3. 本地渲染的视频文件可直接用于日常分享、创意展示，无需复杂的后续处理，大幅提升个性化视频的制作效率。

免费在线生成视频

自游人免费提供在线视频生成工具：https://video.17you.com/