GavinAI
我的订单

GAVINAI / AI IN PRACTICE

AI 视频制作实战：脚本、动画、字幕到 MP4

参考 Remotion 官方 Skill，实际合成一段 12 秒动画短片，提供成品、字幕和可复现源码。

GavinAI 原创案例 · · 约 20–40 分钟，首次需准备运行环境

适合谁

希望做知识短片、产品介绍或字幕动画，愿意让编程助手处理制作步骤的人。

本次使用

remotion-best-practices

这次，我们做了什么

这里的 AI 主要负责整理脚本和编写动画，Remotion 把这些内容按时间轴渲染成视频。它不是自动生成真人镜头的模型。本例不使用配音、音乐或外部素材，先把一条完整而可检查的制作链跑通。

THE RESULT

先看实际效果

本站实际制作并渲染了一段 12 秒、1280×720、30fps 的三场景 MP4，包含文字进场、逐段字幕和页码。提供实际视频、字幕文件和独立示例源码。没有把代码预览或静态封面冒充成视频。

本地 Remotion 实际渲染 · 12 秒 · 1280×720 · 30fps · 无配音
下载 MP4 成品 下载字幕文件 下载本站原创项目源码

实测到了哪一步

本次已验证

  • 在独立临时项目中准备 Remotion 4.0.536 和 React 环境。
  • 实际本地渲染 MP4，检查时长、分辨率、帧率，并抽帧查看三个场景。
  • 提供播放器、字幕和独立源码下载，不把 Remotion 加入商城运行依赖。

未验证与适用边界

  • 未验证 AI 配音、真人素材生成或付费云渲染。
  • Remotion Skills 独立仓库未发现许可证文件，不能将它标成 MIT 或承诺任意再分发；本站不托管原 Skill 全文。

开始前，准备这些

  • Node.js、编程助手和可下载/使用的 Chrome；本次使用 Remotion 4.0.536。
  • 建议先下载本页最小示例，或让助手在新的练习目录创建项目。
  • 安装官方 Skill 时注意版本；引擎商业使用资格与模型费用另行核对。

安装方法与来源核对

以下为当前项目范围的安装方式，不使用全局 Skill 安装。先在独立练习文件夹执行，装好后重新打开助手确认可用。安装文件已在隔离目录实跑；这不代表你的模型、账号和外部服务也已经连接。

remotion-best-practices

终端命令
npx --yes skills@1.7.2 add https://github.com/remotion-dev/skills/tree/1441a11e95db35443bd76bb318386c0d3ca00053/skills/remotion-best-practices --agent codex --yes
remotion-best-practices
remotion-dev/skills
许可证：未发现独立许可证
仓库最近提交：2026-10-16 · 核对 2026-10-16
核对版本：1441a11e95db35443bd76bb318386c0d3ca00053

日期表示核对到的仓库提交，不承诺每个功能都在该日期单独更新。许可证按原始文件范围记录，第三方模型、软件和素材可能采用不同条件。安装指令固定了核对版本；UI/UX Pro Max 使用已验证的作者 CLI 版本。

跟着做，走完整个流程

  1. 01 / 把想法拆成分镜与字幕

    先写清楚每个场景讲什么、持续多久、字幕是什么。本例为三个场景，每段 4 秒，共 12 秒。先做无音频版本，减少配音和素材依赖。

  2. 02 / 下载示例或新建独立项目

    本页源码包只包含本站原创视频项目。下载解压到新的文件夹后，运行 npm install 准备依赖，不要把 Remotion 安装进你的正式商城。

    终端命令
    npm install

  3. 03 / 让助手修改，再打开预览

    安装官方 Skill 后，将下方任务指令交给助手。让它把动画绑定到视频帧，而不是靠浏览器 CSS 动画随机播放。启动 Studio，按时间轴检查开场、中段、结尾和字幕。

    终端命令
    npx remotion studio index.tsx

  4. 04 / 渲染并核对成品

    预览确认后运行导出命令。首次运行可能下载浏览器；已安装 Chrome 时可按官方选项指定浏览器路径。本次字幕分为 0–4、4–8、8–12 秒三段，可下载 captions.vtt 与 MP4 对照。30fps 下每段是 120 帧，三段共 360 帧；调整时长时需同时调整场景边界和字幕时间。导出后打开 MP4，看完开场、中段和结尾，确认字幕与画面对应，而不只检查命令退出。

    终端命令
    npx remotion render index.tsx GavinIntro out.mp4 --codec h264 --concurrency 2

把这份任务交给你的助手

使用支持 Skill 的 Codex 时，可用 $名称 指明工作流程。其他工具的调用入口可能不同，以对应客户端为准。先替换材料和条件，再执行。

可复制到助手中的任务
请参考 remotion-best-practices，在独立练习目录制作一个 12 秒中文文字动画。
主题：把一句想法变成一段可交付的视频。
三个场景，每段 4 秒：整理脚本、安排画面、预览导出。
规格：1280×720，30fps，MP4；白底、深灰文字、少量 #16734a 绿色。
用帧数驱动文字淡入和位移，加入与画面一致的字幕。
不要调用配音、素材生成或收费 AI API，不使用没有授权的音乐。
先启动预览，检查时间轴，再本地渲染；报告实际成品参数和未验证项。

可能产生的费用

本例没有调用配音或收费 AI API，也没有使用云渲染服务；本地电脑仍消耗时间和算力。官方目前为个人与不超过 3 人的组织提供有条件免费许可，4 人及以上组织有商业许可要求。你的使用资格、自动化产品场景与当前价格须按官方条款核对，不能把“源码可见”当作一律免费商用。

使用时，注意这几件事

  • 核对 Remotion 引擎商业条款；Skill 的安装指导不等于为整个视频业务授权。
  • 配音、音乐、图片和真人肖像分别核对版权、许可和费用。
  • 首次下载浏览器可能较慢；失败时先检查连接或按官方方式使用已安装 Chrome，不要把失败状态当成渲染成功。

常见问题

这是 AI 自动生成真人视频吗？

不是。本例由 AI 辅助编写脚本和动画代码，再由 Remotion 本地合成文字动画，没有真人镜头或模型生成素材。

为什么没有配音？

第一版先验证脚本、画面、字幕与导出。配音通常需要额外模型或服务，本次没有验证，也没有把相关费用隐藏在免费流程里。

所有商业项目都免费吗？

不是。Remotion 引擎有组织规模和用途相关的许可条件；Skill 仓库也未发现独立许可证。请看底部原始来源与官方商业条款。

按用途选择 Skill →一篇文章，变成小红书图文。 →从一段文字，到一份 PPT。 →

参考来源

依据以下资料核对，查证日期 2026-10-16。外部资料在新标签页打开；界面与功能可能随版本变化。