html-video：给 AI 编程代理加一双「做视频」的手
你有一篇文章、一个 GitHub 仓库，或者只是一句描述——想把它变成一个真正的 MP4 视频，全程在本地完成，不花一分钱渲染费。html-video 就是干这个的：它是一个给 AI 编程代理用的「视频生产元层」，支持 14 种编程代理后端、21 个精选模板，用无头 Chromium + ffmpeg 在你自己的机器上渲染出 MP4。
一、为什么需要 html-video
HTML→Video 已经是一个真实存在的赛道，但每个引擎都有自己的「脾气」：
Hyperframes 用 HTML + CSS + GSAP，Remotion 要你写 React 组件，Motion Canvas 走 TypeScript 生成器，Manim 专攻数学动画。每个引擎都想让你学它的范式，选错了就得重写。
html-video 的定位是「元层」——它坐在所有引擎之上，定义了一个统一的 render(input, ctx) 接口。你跟 AI 编程代理说「帮我做一个视频」，代理负责选引擎、选模板、填内容，最后吐出一个真正的 MP4 文件。换引擎只换这一个适配器，工作流完全不变。
目前唯一接入的引擎是 Hyperframes（来自 HeyGen 团队的开源项目），用无头 Chromium 逐帧录制动画 HTML，再用 ffmpeg 编码成 MP4。Remotion、Motion Canvas、Manim 都在路线图上。
二、它怎么工作
整个流程分六步：
① 输入源——支持三种输入方式：
- 文章链接：粘贴一个 URL（包括微信公众号文章），服务端自动抓取并转为 Markdown
- GitHub 仓库：通过公开 API 拉取描述、目录结构和 README
- 纯提示词：描述你想做的视频，代理从零写内容
② Agent 循环——你的编程代理读取素材和模板风格，生成一个 content-graph 分镜脚本。关键点是：素材不是装饰，而是视频内容的实际来源。一篇 1500 字的文章会被拆解成多场景解说视频，每个镜头都能追溯到原文的某个段落。
③ Content Graph——这是多帧分镜的中间表示（IR）。节点是实体/数据/文本，边是序列/依赖/对比关系，拓扑排序后变成帧序列和时间线。
④ 逐帧 HTML——每个节点变成一个自包含的动画 HTML 文件，包含 HTML + CSS + GSAP 动画。
⑤ Hyperframes 渲染——无头 Chromium 加载每帧 HTML，自动检测动画时长并录制，输出 webm 文件。
⑥ ffmpeg 编码——每帧 webm 转成 MP4（libx264），然后拼接成完整视频。如果有 AI 配乐或旁白（通过 MiniMax 生成），也在这一步混合进去。
单帧视频走快速路径，跳过 content-graph 直接渲染。
三、14 种编程代理，一个接口
html-video 最大的卖点是代理兼容性。它自动检测你 PATH 里的 CLI 工具，支持 14 种编程代理：
| 代理 | 检测方式 | 调用方式 |
|---|---|---|
| Open Design (Vela) | vela / 内置 |
ACP over stdio |
| Claude Code | claude |
claude --print |
| Cursor Agent | cursor-agent |
cursor-agent --print |
| Codex CLI | codex |
codex exec |
| Gemini CLI | gemini |
stdin prompt |
| Windsurf CLI | windsurf |
windsurf --yolo |
| Trae CLI | traecli |
traecli acp serve --yolo |
| Grok Build | grok |
grok -p <prompt> |
| Qwen Code | qwen |
stdin prompt |
| OpenCode | opencode |
opencode run |
| GitHub Copilot CLI | copilot |
copilot --allow-all-tools |
| Aider | aider |
aider --message <prompt> |
| Hermes | hermes |
Hermes ACP CLI |
| Anthropic Messages API | BYOK | 直接调 API |
Studio 顶部栏可以切换活跃代理。如果你什么都没装，设置一个 Anthropic API key 就能直接用 Messages API。
四、21 个精选模板
模板不是随机堆砌的——每个模板都是一个自包含的、代理可读的单元，带一个 template.html-video.yaml 清单文件。清单里包含：
- 用途：
category、tags、best_for列表，代理用这些信息匹配你的意图 - 输出规格：支持的分辨率、宽高比、帧率、时长范围
- 输入 schema：JSON schema 定义了文本/数据槽位，代理知道该填什么
- 许可证：每个模板都有明确的 SPDX 标识，fork 带原始许可证
模板覆盖几大类别：
数据可视化：NYT 风格的动画折线图、瑞士网格数据卡片、Vignelli 风格报表
标题与特效：故障风标题、动态排版、打字机光标效果
英雄区与电影感：液体渐变背景、光泄漏电影感、温暖颗粒质感
产品宣传片：15 秒 / 30 秒多场景产品介绍
解说类：决策树解释器、有机运动风格
五、AI 配乐
在设置里填入 MiniMax API key 后，可以在导出时给视频加上：
- 背景音乐：描述一种氛围（如
calm cinematic ambient, slow build），MiniMax 生成纯器乐 - 旁白：输入脚本，MiniMax 做 TTS
两者在导出时通过 ffmpeg 混合进 MP4（音乐会自动在旁白时降低音量）。没有 API key？Studio 的其他功能照常使用。
六、快速上手
前置条件：
| 依赖 | 最低版本 | 检查命令 |
|---|---|---|
| Node.js | 20+ | node --version |
| pnpm | 9+ | pnpm --version |
| ffmpeg | 任意近期版本 | ffmpeg -version |
| Chromium | — | npx playwright install chromium |
安装与运行：
1 | # 克隆仓库 |
Studio 里可以：选模板（或直接描述视频 / 粘贴链接）、跟代理对话、编辑每帧文字、加配乐、导出 MP4。
CLI 工具：
1 | # 检测已安装的代理和引擎 |
七、和 Remotion 的区别
这是最常见的问题。简单说：
| 维度 | html-video | Remotion |
|---|---|---|
| 定位 | 元层——代理驱动，引擎可插拔 | 渲染引擎——React 组件就是视频 |
| 工作方式 | 代理自动生成分镜和 HTML | 开发者手写 React 组件 |
| 学习成本 | 零——跟代理说话就行 | 需要懂 React + Remotion API |
| 许可证 | Apache-2.0，无限制 | 源码可用，4 人以上团队付费 |
| 当前状态 | Hyperframes 已接入，其他引擎规划中 | 成熟，生态丰富 |
如果你喜欢手写代码控制每一帧，Remotion 是更好的选择。如果你想让 AI 代理帮你搞定一切，html-video 更合适。两者不是替代关系——Remotion 未来会作为 html-video 的一个引擎适配器接入。
八、局限性
说清楚它目前不能做什么：
渲染引擎单一：目前只有 Hyperframes，Remotion / Motion Canvas / Manim 都还在路线图上。如果你需要 React 组件级别的精细控制，现阶段只能等。
依赖 Chromium + ffmpeg：本地渲染意味着需要这两个依赖。Windows 用户需要额外安装 Playwright 的 Chromium，ffmpeg 也需要单独配置。
模板数量有限：21 个模板覆盖了常见场景，但如果你需要非常定制化的视频风格，还是得自己写 HTML。
AI 配乐依赖 MiniMax：背景音乐和旁白需要 MiniMax API key，这是一个额外的付费服务。
社区生态刚起步：项目 2026 年 5 月底才开源，1700+ 星标增长很快，但社区模板、插件、教程都还在早期。
九、相关链接
- GitHub 仓库 — 源码、模板、文档
- Open Design — 同团队的设计代理元层项目
- Hyperframes — 当前使用的渲染引擎
- html-anything — 同团队的静态交付物项目
- Discord 社区 — 加入讨论
- 标题: html-video：给 AI 编程代理加一双「做视频」的手
- 作者: Seven
- 创建于 : 2026-06-07 10:00:00
- 更新于 : 2026-07-14 00:18:15
- 链接: https://blog.oneiseven.top/2026/06/07/html-video-用HTML给AI编程代理做视频/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。