编辑文档 - html-video 上手指南：把公众号文章 / GitHub repo 一键转成解读视频

标题

工具栏

点击或拖拽上传图片

支持 PNG, JPG, GIF, WebP 格式

内容 (Markdown 格式)

最近我装了一下 [html-video](https://github.com/nexu-io/html-video)，跑了一段从公众号链接到 MP4 的完整流程。说一下我看到的东西——优点和坑都会写。

## 它是干啥的

nexu-io 团队两周前刚发的开源项目，Apache-2.0。你给本地装好的 Claude Code / Cursor / OpenCode 这类编码 Agent 一句"给这篇公众号文章做个解读视频"，Agent 就去抓内容、起分镜、套模板，最后在你笔记本上吐一个真 MP4 出来。

跟剪映、Remotion、HeyGen 都不是一个赛道——它做的是「让 Agent 能动视频」这件事的元层。下面 Hyperframes 是默认渲染引擎（headless Chromium 录屏 + ffmpeg 编码），别的引擎（Remotion / Motion Canvas）走适配器接进来，路线图里写着。

整个项目 2.8k Star，319 Fork，131 个 commit。代码很新，所以我也重点看了一下哪里还不成熟，后面会讲。

## 我为什么注意到它

我自己做公众号，每周要给 2-3 个 GitHub 项目写测评。写完文章还要拍一段 1 分钟的解读视频放到视频号上——这条流程是手工的：写脚本、录屏、剪、加字幕、配 BGM，半天起步。

所以当我看到 html-video README 里那句 "Turn HTML, CSS & data into real MP4s" 的时候，第一反应是：**这个要是能跑通，我那个半天的活是不是能砍到 5 分钟**。

## 我跑了一遍流程

下面是我实际操作的命令，按时间顺序：

```bash
git clone https://github.com/nexu-io/html-video
cd html-video
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio
# 浏览器自动开 http://127.0.0.1:3071
```

依赖 4 个：Node 20+、pnpm 9+、ffmpeg、Chromium（Playwright 自带）。Mac/Win/Linux 都行。

启动后 Studio 顶部会扫一遍你机器上装了哪些 Agent CLI。我机器上有 Claude Code 和 OpenCode，它两个都识别出来了，顶部一个下拉框切着用。这个设计挺好的——不绑定任何一家模型。

我选了 Claude Code，聊天框里贴了一篇 1500 字的公众号 URL，让它做"60 秒解读视频"。Agent 用了大概 20 秒读完文章，吐了 4 帧分镜（开头卡点 / 数据展示 / 核心观点 / 收尾），每帧都给出了文字稿。

挑模板那里我看了一下：21 个，确实都是单文件 HTML。README 列了 6 个官方面板（NYT 图表、故障标题、液态渐变、暖光电影感、终端打字机、logo 收尾），剩下 15 个在 templates/ 目录里。我挑了 NYT 那个跑数据展示那帧。

点导出，进度条走完，桌面出现一个 mp4。打开看了一下，文字、动效、配色都对——和模板预览基本一致。

## 几个我想说的细节

**MiniMax 配乐是可选的**。我没配 key，所以导出来是无声的。如果你想加 BGM 或 TTS 旁白，去 Settings → Audio 填一个 MiniMax API key 就行，ffmpeg 帮你混进去。这块没强迫配，是个好设计。

**每个模板都带一份 yaml 清单**。长这样：`template.html-video.yaml`，里面写了分类、标签、分辨率、fps、SPDX 许可证 id、可商用标识、资产归属链接。这事我喜欢——意味着 Agent 不用打开 HTML 就能决定用不用这个模板，模板的版权也一眼能查清楚。商用项目用哪个都心里有数。

**支持 14 个 Agent**。完整列表：Open Design (Vela)、Windsurf、Trae、Claude Code、Cursor、Codex、Hermes、Gemini、Grok、Qwen、OpenCode、Copilot、Aider、Anthropic Messages API。前 13 个走 CLI 探测，第 14 个是你直接给 key 它就干活。

如果你一个 CLI 都不想装，填一个 Anthropic key 就能用——对纯前端或者非开发者也很友好。

## 渲染管线（6 步）

1. 源抓取：URL → 服务端拉取（公众号文章专门适配了）→ 拍平 Markdown
2. Agent 循环：Agent 读内容 + 选中模板风格 → 输出分镜 + 每帧 HTML
3. content-graph：多帧中间表示（节点 + 边），拓扑排序出帧顺序
4. 每帧 HTML：每个节点落盘成一个自包含的动画 HTML
5. Hyperframes 渲染：headless Chromium 加载每帧录制 → webm
6. ffmpeg 合成：webm → mp4（libx264）→ concat → 配乐/旁白混入（可选）

管线本身 6 步不复杂。设计上的关键点：第 2-4 步是「元层」（Agent 决策 + 引擎渲染），第 5 步是引擎特定的。以后 Remotion / Motion Canvas 适配器建好之后，换引擎只动第 5 步那一个包，分镜和 Agent 循环完全不重写。

## 跟别的东西比

跟 Remotion 比：Remotion 是"用 React 组件做视频"，html-video 是"用对话 + 模板 + 引擎适配器做视频"。html-video 把 Remotion 当路线图里的一个适配器目标——意思是将来你在 html-video 里也能用 Remotion 的 React 组件做帧。

跟 HeyGen / Synthesia 比：那些是数字人口播视频，html-video 是程序化生成图表、动画、视觉作品。不是一类东西。数字人去 HeyGen，要把一篇文章变可动视觉才用 html-video。

跟剪映比：剪映是手动剪辑工具，html-video 干的是"剪映这件事的 Agent 版"。剪映做单条很灵活，html-video 做批量更省事。

跟同团队的 Open Design、html-anything 比：三个项目是一条线上的。

- Open Design（63k Star）——设计 Agent 元层，142+ 设计系统可调
- html-anything（6.5k Star）——Agent 编辑静态 HTML（杂志、deck、海报、XHS）
- html-video（2.8k Star）——同系列，**动起来的那一个**

## 我看到的几个问题

**项目太新**。两周大，131 个 commit，issue 和讨论都不多。生产用要稳一手——至少等 Remotion 适配器出来，等生态里的模板攒到 50+。

**目前只有一个引擎**。Hyperframes 能干，但能干的范围有限。要做 3D、复杂动效、shader 效果暂时不行。等 Remotion / Motion Canvas 适配器落地后这个会好很多。

**Mac 上 ffmpeg 路径有时找不到**。我装的时候 homebrew 的 ffmpeg 不在 PATH 里，要 ln -s 一下。Windows / Linux 应该没这问题。

**Studio 的 UI 还在迭代**。能跑，但有些按钮没翻译，有些 hover 提示不完整。

**配乐依赖 MiniMax**。如果你已经在用 ElevenLabs 或者 Azure TTS，得自己改 packages/core 里的 MiniMax provider。这个不是大问题，但确实是"能直接用"和"得改点代码"之间的差距。

## 我用下来的结论

**适合用的人**：

- 内容创作者（公众号、知乎、视频号），每周要稳定产出 2-3 条解读视频
- 开源项目作者，要给自家 repo 做宣传视频
- 教学博主，要给文章做配套短视频
- 企业团队要批量产内部培训视频（数据不出域 + Apache-2.0）

**不适合的人**：

- 做电影感强、需要复杂动效的长视频——html-video 的 Hyperframes 引擎不是干这个的
- 不会装 CLI 的纯非技术用户——Anthropic key 路径能用，但配 MiniMax 配乐那一步还是稍微有点门槛
- 已经有成熟的 Remotion / After Effects 团队——你的工具链更顺手

**我个人打算怎么做**：

公众号视频号那条线我打算从剪映切到 html-video。剪映做单条很灵活，但 html-video 配 Claude Code 做批量是另一个量级——一次喂它 5 个选题链接，过 10 分钟回来拿 5 个 MP4，再花 5 分钟人工过一下内容质量，整体时间砍到原来 1/5。

**写代码做产品的朋友**：html-video 的"适配器 + 元数据清单"这个设计值得抄。它把"什么引擎干、什么数据驱动、什么模板能用"全部做成机器可读，这是 AI Agent 时代基础设施该有的样子。

**你会把什么样的内容做成视频？公众号文章、GitHub repo、还是数据报告？评论区聊聊。**

摘要

标签多个标签用逗号分隔

分类