我会把素材重组为一篇工具型技术博客，保留可学习的架构、流程和上手步骤，删除公众号推广和视频播放器残留内容。图片会优先用文字上下文判断，能用 Mermaid 或表格讲清的就不额外读取。---
title: 用 HTML 生成视频：HyperFrames 与 html-video 的工作方式和上手流程
date: 2026-06-10
slug: html-video-generation-hyperframes-html-video
categories:

• 前端
• 开源工具
• AI
  tags:
• HTML
• 视频生成
• HyperFrames
• html-video
• FFmpeg
• AI Agent
• GSAP
  description: HTML 生成视频的核心思路，是把页面、样式和动画当作视频时间轴来渲染。HyperFrames 提供底层渲染能力，html-video 在它之上加入模板、链接转视频和本地 Studio，更适合快速制作结构化短视频。

用 HTML 生成视频：HyperFrames 与 html-video 的工作方式和上手流程

用代码做视频，过去通常要接触专业剪辑软件、时间轴编辑器，或者学习一套专门的视频渲染框架。HTML 生成视频换了一个思路：把视频当成一个会按时间变化的网页，用 HTML 描述内容，用 CSS 和动画控制画面变化，再由渲染引擎把每一帧录下来，最后合成为 MP4。

这个方向适合两类场景：

• 批量生成结构相似的视频，比如产品介绍、榜单、数据报告、项目解读。
• 让 AI Agent（智能体）自动写页面、排版、加动画，然后导出成片。
• 用前端技术栈复用已有能力，比如 CSS 布局、GSAP 动画、Canvas、WebGL。
• 需要稳定产物的自动化流程，同一份输入尽量生成一致的视频结果。

目前 GitHub 上比较典型的两个项目是 HyperFrames 和 html-video。前者更像底层渲染引擎，负责把 HTML 变成视频；后者更像视频制作工具，在 HyperFrames 之上提供模板、链接解析、Agent 工作流和本地编辑界面。

HyperFrames: https://github.com/heygen-com/hyperframes
html-video:  https://github.com/nexu-io/html-video

HTML 生成视频的基本模型

HTML 视频生成并不是把网页截图一次就结束，而是把网页放进一个确定的时间轴里，让元素在指定时间出现、移动、消失。渲染器按帧推进时间，浏览器负责计算布局和动画，录制工具负责把画面保存下来。

flowchart LR
    A[HTML 内容结构] --> D[无头浏览器]
    B[CSS 样式与布局] --> D
    C[动画与时间轴配置] --> D
    D --> E[逐帧渲染画面]
    E --> F[FFmpeg 合成]
    F --> G[MP4 视频]

这个流程的好处是前端开发者不需要重新学习一套完全陌生的画面描述语言。标题、图片、卡片、图表、字幕、转场都可以用网页里的概念来表达，复杂动画也可以交给 CSS、GSAP 或 WebGL 完成。

和普通网页不同，视频渲染更关心确定性。网页可以等用户交互，视频不行；网页可以受网络、随机数、异步加载影响，视频最好每次都生成同样的结果。因此，HTML 视频项目通常会把素材、时间、动画和渲染环境固定下来，让同一份工程在多次渲染时得到一致的 MP4。

HyperFrames：把一个 HTML 文件渲染成一个视频

HyperFrames 是 HeyGen 开源的视频渲染框架，核心设计很直接：一个 HTML 文件描述一个视频。页面里的元素不仅有内容和样式，还带有时间信息，比如什么时候出现、持续多久、在哪条轨道上播放。

它的工作流程可以理解为四步：

sequenceDiagram
    participant Dev as 开发者或 Agent
    participant HTML as HTML 视频文件
    participant Chrome as 无头 Chrome
    participant FFmpeg as FFmpeg
    participant MP4 as 视频文件

    Dev->>HTML: 编写结构、样式、动画和时间信息
    HTML->>Chrome: 加载页面并按时间轴播放
    Chrome->>Chrome: 逐帧渲染和录制
    Chrome->>FFmpeg: 输出帧序列或中间素材
    FFmpeg->>MP4: 合成 MP4

在这个模型里，HTML 负责“画什么”，CSS 和动画库负责“怎么动”，HyperFrames 负责“按视频时间把它录下来”。如果一个标题要在第 2 秒淡入、第 5 秒移出，开发者会把这个时间关系写进页面元素或对应的动画配置里。

可以用一个概念示意理解它的写法：

<section class="scene">
  <h1 data-track="title" data-start="0" data-duration="3">
    GitHub 项目介绍
  </h1>

  <p data-track="subtitle" data-start="1" data-duration="4">
    用 HTML、CSS 和动画生成 MP4
  </p>
</section>

上面的属性名只是为了说明思路：视频元素需要绑定时间、轨道和持续时长。真正写项目时，应以 HyperFrames 的模板和文档为准。

为什么要用无头 Chrome

HyperFrames 选择无头 Chrome 作为渲染环境，是因为浏览器本来就擅长处理 HTML、CSS、字体、图片、动画和 WebGL。这样一来，很多前端生态里的能力可以直接复用，而不是在视频渲染器里重新实现一遍。

这种方案尤其适合自动化。只要输入的 HTML、素材和环境不变，渲染结果就不应该随机漂移。对批量生产视频来说，确定性比“每次都看起来不一样”更重要，因为后续流程可能还要做审核、分发、归档和重新生成。

面向 AI Agent 的 Skill

HyperFrames 的另一个重点是 AI Agent 集成。它内置了多个 Skill，可以让 Agent 获得“创建 HTML 视频工程、编写动画、调用渲染器导出视频”的能力。

典型交互不是手动打开剪辑软件，而是给 Agent 一个目标：

帮我安装 hyperframes 这个 skill

安装完成后，可以继续给出视频需求：

使用 hyperframes skill，制作一个 GitHub 项目介绍视频，比例为 16:9，时长 30 秒，包含标题页、功能页和结尾页。

Agent 需要完成的事情包括：

flowchart TD
    A[用户描述视频需求] --> B[Agent 拆分视频结构]
    B --> C[生成 HTML 页面]
    C --> D[补充 CSS 和动画]
    D --> E[调用 HyperFrames 渲染]
    E --> F[导出 MP4]

这类流程对“模板化、结构化、重复性强”的视频很友好。比如项目介绍、产品功能短片、活动议程、数据播报，都可以先抽象成固定场景，再让 Agent 填内容和调整动画。

Catalog 组件库

视频里经常会重复出现一些组件，例如字幕条、转场、统计图表、社交媒体样式卡片、标题页、结尾页。如果每次都从空白 HTML 开始写，效率并不高。

HyperFrames 提供 Catalog 组件库，用来复用这些常见视频元素。组件库的价值不只是少写代码，还能统一视觉结构，让 Agent 或开发者在生成视频时有稳定的积木可用。

HyperFrames 更像“视频渲染基础设施”。它能把 HTML 稳定地变成 MP4，但具体视频好不好看，仍然取决于模板设计、素材质量、动画节奏和 Agent 生成页面的能力。

html-video：在 HyperFrames 之上做 HTML 版剪辑工具

html-video 是 Open Design 团队开源的 HTML 视频项目。它不是重新做一个底层渲染器，而是在 HyperFrames 之上封装了一层更接近成品工具的工作流：模板、链接转视频、多 Agent 后端、本地 Studio。

如果说 HyperFrames 解决的是“HTML 怎么渲染成视频”，html-video 更关注“怎么更快做出一个能用的视频”。

flowchart LR
    A[文章链接或 GitHub 仓库] --> B[AI 分析内容]
    B --> C[拆分视频场景]
    C --> D[套用模板]
    D --> E[Studio 编辑]
    E --> F[渲染引擎]
    F --> G[MP4 导出]

21 套视频模板

html-video 提供了多套预设模板，覆盖数据可视化、产品宣传、动态排版、电影片头、Logo 片尾等场景。模板的意义在于把视频设计里的布局、节奏、字体层级和转场先固定下来，使用者只需要替换内容。

对于需要商用的视频素材，模板授权也很关键。html-video 的模板做了 license 清理，目标是降低商用时的版权风险。实际落地前仍建议检查项目仓库里的授权说明，尤其是字体、图标、图片和音乐这类素材。

链接转视频

html-video 的一个实用能力是把链接直接转成视频。输入可以是一篇技术内容链接，也可以是 GitHub 仓库地址；工具会抓取内容，用 AI 分析结构，再拆成多个视频场景并套用模板。

GitHub 仓库介绍视频大致会经过这样的流程：

flowchart TD
    A[输入 GitHub 仓库地址] --> B[抓取 README 和项目信息]
    B --> C[识别项目名称、功能和亮点]
    C --> D[生成视频脚本]
    D --> E[拆分标题页、功能页、示例页、结尾页]
    E --> F[选择或匹配模板]
    F --> G[渲染并导出 MP4]

这个能力适合快速把结构化信息变成短视频，比如开源项目介绍、产品更新、技术博客摘要、活动说明等。它不适合完全依赖审美判断的创意广告，也不适合需要复杂剪辑节奏和大量人工调色的影视级内容。

多 Agent 后端

html-video 支持多个 Agent 后端，包括 Open Design、Claude Code、Codex、Hermes 等。用户可以在 Studio 里切换不同 Agent，让不同模型或工具链负责分析内容、生成脚本、改写文案、调整场景。

如果没有完整的本地 Agent 环境，也可以配置 Anthropic API Key 来使用。这样设计的好处是，模板系统和渲染流程不被单一 Agent 绑定，后续替换模型或接入新工具时，不需要推翻整个视频生成流程。

flowchart LR
    A[Studio 界面] --> B{选择 Agent}
    B --> C[Open Design]
    B --> D[Claude Code]
    B --> E[Codex]
    B --> F[Hermes]
    C --> G[生成或修改视频工程]
    D --> G
    E --> G
    F --> G
    G --> H[渲染导出]

本地 Studio

html-video 还提供本地 Studio 界面。浏览器打开后，可以选择模板、编辑每一帧的文字、添加背景音乐和配音，再导出 MP4。整个流程可以在本地运行，不需要把素材上传到云端。

本地化工作流对隐私和可控性更友好，尤其是输入内容包含未发布产品、内部文档、客户素材时，本地处理能减少不必要的数据外传。

启动流程如下：

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio

服务启动后访问：

http://127.0.0.1:3071

HyperFrames 和 html-video 怎么选

两个项目的关系可以理解为“底层引擎”和“上层工具”。HyperFrames 适合需要直接控制 HTML、动画和渲染流程的人；html-video 适合希望通过模板、链接和 Studio 更快生成视频的人。

如果目标是搭建自己的视频生成基础设施，或者希望让 Agent 直接写 HTML 并稳定导出视频，HyperFrames 更合适。如果目标是快速把链接、仓库、产品说明变成视频，并且希望有模板和本地编辑界面，html-video 更省时间。

可插拔渲染引擎的意义

html-video 的架构里，渲染引擎被设计成可插拔适配器。默认使用 HyperFrames，但 Remotion、Motion Canvas 等引擎也可以作为未来方向接入。

这意味着模板、Agent 工作流和内容生成逻辑可以尽量保持稳定，而底层渲染器可以替换。对一个视频生成系统来说，这种分层很重要：上层负责内容和场景，下层负责渲染和编码，中间用适配器隔离差异。

flowchart TD
    A[视频需求] --> B[AI 内容分析]
    B --> C[场景脚本]
    C --> D[模板系统]
    D --> E[渲染适配器]
    E --> F[HyperFrames]
    E --> G[Remotion]
    E --> H[Motion Canvas]
    F --> I[MP4]
    G --> I
    H --> I

这样做的直接收益是减少迁移成本。未来如果某个渲染引擎在性能、动画能力或生态上更适合当前需求，项目不必重写所有模板和 Agent 逻辑，只需要新增或调整适配层。

使用时需要注意的坑

HTML 生成视频看起来像写网页，但它最终输出的是固定时长的视频，所以工程约束和普通网页不完全一样。

尤其要注意素材加载。网页可以等用户刷新，视频渲染通常不会给这种补救机会。图片、字体、音频、接口数据都应该在渲染前准备好，避免渲染过程中临时请求外部资源。

一个推荐的上手路径

如果只是想快速体验 HTML 生成视频，可以先从 html-video 的 Studio 和模板开始；如果要做更底层的自动化，再研究 HyperFrames 的时间轴和渲染机制。

flowchart TD
    A[想快速生成视频] --> B[启动 html-video Studio]
    B --> C[选择模板或输入链接]
    C --> D[编辑文案、配音和背景音乐]
    D --> E[导出 MP4]

    F[想做自定义视频系统] --> G[学习 HyperFrames]
    G --> H[编写 HTML、CSS 和动画]
    H --> I[接入 Agent Skill]
    I --> J[批量渲染视频]

实际选型可以按目标倒推：

• 只想把链接或 GitHub 仓库快速变成介绍视频，优先用 html-video。
• 想控制每个元素的时间、轨道、动画和渲染流程，优先看 HyperFrames。
• 想让 AI Agent 参与生成，两个项目都值得看：HyperFrames 提供底层 Skill，html-video 提供更完整的工作流。
• 想做长期的视频生成系统，要重点关注模板抽象、素材管理、渲染确定性和引擎适配层。

HTML 生成视频的关键不只是“网页能导出 MP4”，而是把前端工程、模板系统和 AI Agent 串成稳定流程。HyperFrames 解决渲染确定性和底层能力，html-video 把模板、内容分析和本地编辑补齐；两者组合起来，已经能覆盖从代码生成视频到半自动剪辑的大部分基础需求。