代码视频逐帧渲染原理：HTML、React与FFmpeg完整解析

现在做视频，不一定要打开剪辑软件、拖时间轴、逐个调整关键帧。另一条路线是直接写代码：用 HTML、CSS、React、SVG、Canvas 或动画库描述画面，再由渲染器逐帧生成视频。

这听起来像“用代码剪视频”，但更准确的说法是：用代码定义每一帧画面，浏览器负责绘制，渲染器负责把画面变成 MP4。

这种方式特别适合信息图、产品演示、数据动画、字幕卡片、代码高亮、流程图和模板化内容。AI 时代它还有一个额外优势：大模型本来就擅长写 HTML、CSS 和 React，意味着模型可以参与视频画面生成，而不只是帮你写文案。

本文不比较某两个框架的具体输赢，只先讲清楚代码视频的底层原理、工作流和边界。理解这些之后，后面的框架选型才有意义。

一、代码视频和传统剪辑有什么不同

传统剪辑软件的核心对象是时间轴上的素材：视频片段、音频、字幕、转场和特效。你通过拖动和调整参数，把它们排列成最终成片。

代码视频的核心对象是函数和状态：在第 0 帧显示什么，在第 30 帧显示什么，在第 90 帧显示什么。时间轴不一定以可视化轨道存在，而是被写进代码和数据里。

传统剪辑：素材 + 时间轴 + 手工调整

代码视频：组件 + 时间函数 + 数据 + 逐帧渲染

代码视频的优势：

• 修改文字、颜色和数据后可以重新渲染；
• 同一模板可以批量生成不同版本；
• 字幕、图表和数据可以自动对齐；
• 画面结构可以用组件复用；
• 每次渲染可以记录版本、参数和输入。

它的限制也很明显：

• 需要理解项目结构和渲染参数；
• 预览不等于最终导出；
• 视频素材、字体、音频和路径会引入工程问题；
• 复杂真人剪辑和即兴调色仍然可能更适合传统工具。

二、逐帧渲染到底在做什么

假设视频是 30 fps，时长 10 秒，那么最终需要生成约 300 帧画面。渲染器会根据帧号或时间，打开页面或组件，得到当前状态，再把它截图保存下来，最后交给 FFmpeg 编码成视频。

第 0 帧 -> 浏览器绘制 -> 截图
第 1 帧 -> 浏览器绘制 -> 截图
第 2 帧 -> 浏览器绘制 -> 截图
...
第 299 帧 -> 浏览器绘制 -> 截图
                         |
                         v
                       FFmpeg
                         |
                         v
                        MP4

以 30 fps、1920×1080 为例，每一帧都需要稳定生成相同尺寸的画面。只要某一帧依赖当前时间、随机数、网络请求或尚未加载完成的资源，最终结果就可能不稳定。

这也是代码视频和普通网页动画最大的不同：网页动画追求“实时播放起来顺滑”，视频渲染追求“第 N 帧每次都能得到同样结果”。

三、实时播放模型和时间 seek 模型

动画大致有两种控制方式。

实时播放

页面加载后，动画按照浏览器时间自动向前播放。用户看到的是当前时刻的状态，渲染器需要尽量跟上播放速度。

这种方式接近普通网页动画，但在逐帧导出时容易受加载、机器性能和异步任务影响。

时间 seek

渲染器不让动画自然播放，而是直接告诉页面：“现在是第 60 帧，对应 2 秒。”页面根据这个时间计算状态，渲染器截取当前画面。

function renderFrame(frame, fps) {
  const time = frame / fps;
  return {
    titleOpacity: clamp(time / 0.5, 0, 1),
    cardX: interpolate(time, [0, 1], [120, 480]),
    progress: clamp(time / 8, 0, 1)
  };
}

seek 模型更容易获得确定性，因为画面由“帧号”决定，而不是由“浏览器刚刚播放到哪里”决定。它也更适合 AI 生成：Agent 只需要理解场景起止时间、元素状态和动画函数，不需要处理复杂的实时生命周期。

四、AI 如何参与代码视频生产

不要让一个模型直接输出“最终 MP4”。更稳的方式是分阶段：

选题和文章
    |
    v
脚本和口播稿
    |
    v
分镜和场景清单
    |
    v
交接稿和素材清单
    |
    v
HTML / React 视频代码
    |
    v
预览、逐帧渲染和验收
    |
    v
MP4、字幕、封面和发布记录

每一步的产出不同：

这样做的好处是，每个阶段都能单独返工。脚本有问题，不需要重新排查渲染器；字体路径错了，也不需要重新讨论文章主题。

五、交接稿应该包含什么

一份可执行的交接稿可以是 JSON：

{
  "title": "Agent 的三个核心原语",
  "duration": 42,
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "renderer": "html",
  "voiceover": "assets/audio/voiceover.wav",
  "scenes": [
    {
      "id": "scene-01",
      "start": 0,
      "end": 6.5,
      "purpose": "提出问题",
      "elements": ["标题", "背景网格", "强调词"],
      "assets": ["assets/images/grid.webp"]
    }
  ]
}

交接稿把内容判断和渲染实现分开。上游可以由写作 Agent 完成，下游由编码 Agent 根据 renderer、scenes 和素材路径实现。

六、确定性是代码视频的核心质量属性

同一份输入如果每次输出不同，自动化管线就很难维护。常见不确定来源包括：

• 使用 Date.now() 或随机数；
• 依赖在线 API 的实时返回；
• 图片、字体或视频没有加载完成；
• 播放器依赖实时时钟；
• 渲染环境中的字体和浏览器版本不同；
• 外部素材 URL 失效或内容变化。

处理方式是：固定输入、固定素材、固定时间、固定字体、固定渲染参数，渲染前检查所有依赖是否存在。

同一机器、同一环境重复渲染时，可以比较文件哈希：

Get-FileHash .\dist\video.mp4 -Algorithm SHA256

哈希相同不能证明视频内容一定正确，但不同哈希可以提示你检查随机状态、异步资源、字体和编码参数。

七、浏览器画面如何变成视频

代码视频本质上依赖浏览器绘制，因此网页开发中的许多能力都可以复用：

• CSS transition 和 animation；
• GSAP 时间轴；
• SVG 路径和变形；
• Canvas 数据可视化；
• React 组件；
• Web 字体和图标；
• 代码高亮和 Markdown 渲染。

但浏览器环境和真实发布环境可能不同。开发机有某个字体，渲染容器没有；开发服务器能访问一个图片 URL，离线渲染时访问不到；页面在浏览器里能播放视频，逐帧 seek 却无法准确定位。

所以素材清单、预加载和渲染前检查是代码视频的一部分，不是可有可无的工程细节。

八、代码视频适合什么场景

它特别适合具有明确结构的内容：

• AI 工具和软件教程；
• 产品发布和功能演示；
• 数据榜单和信息图；
• 文章口播和章节卡片；
• 代码高亮和流程动画；
• 个性化报价、报告和通知视频；
• 可以批量生成的短视频模板。

如果内容主要依赖真人表演、临场剪辑、复杂音效和大量已有视频素材，代码视频通常应该和传统剪辑工具组合，而不是强行替代它。

九、最小验收清单

第一次做代码视频，至少检查：

• 画布尺寸和帧率固定；
• 首帧没有空白；
• 末帧完整；
• 文本没有溢出；
• 字体在渲染环境中可用；
• 图片和视频路径全部存在；
• 音频长度与画面时长匹配；
• 字幕与口播同步；
• 导出的 MP4 可以被播放器打开；
• 关键场景在首帧、中间帧和末帧都被抽查。

结论

代码做视频的本质，是把每一帧画面变成可运行、可修改、可复用的代码。HTML 适合快速构建从零生成的图形画面，React 适合组件化和视频素材合成，逐帧渲染则负责把这些画面变成可交付的 MP4。

AI 最适合参与脚本、分镜、交接稿和视频代码生成，但最终质量仍然取决于素材、时间轴、字体、音频和导出验收。先把中间产物结构化，再谈自动化，视频生产线才不会变成一次性生成器。

参考资料

• Remotion 官方文档，用于核对 React 视频组件、帧和渲染流程。
• FFmpeg 官方文档，用于核对编码、音频和视频处理能力。