html-video 是开源 AI 视频生成工具（3.9k Stars），用 Claude Code / Cursor 等 14 种 AI 助手把任何文章 / GitHub 仓库转成 21 套模板的 HTML 帧，本地 Chromium + ffmpeg 渲染电影级 MP4。
🎤 引言
你有没有试过给技术博客做配套视频？写完一篇深度文章，想录个 3 分钟讲解视频，结果光录屏 + 剪辑 + 字幕就搞了一整天？或者 GitHub 上的开源项目想推广一下，录演示视频又费时又费劲？
html-video 就是来解决这个痛点的 —— 它是个革命性的开源 AI 视频生成工具：只需把文章 URL 或 GitHub 仓库贴给 Claude Code / Cursor / Gemini 等 14 种 AI 编程助手，AI 自动解析内容、套用 21 套模板、用 HTML 生成多帧动画、用 Chromium + ffmpeg 在你本地笔记本渲染输出电影级 MP4 视频。
GitHub 上 3.9k Stars + 487 Watchers + 22 PRs 持续活跃，6 步全自动流水线把"AI 创作 → 视频输出"中间的所有剪辑工作全包了。
⭐ 核心功能
html-video 的核心突破在于 —— 用 HTML 当视频帧的载体，结合 AI 编程助手的代码生成能力 + 浏览器无头渲染 + ffmpeg 视频合成，6 步全自动产出多帧动画视频。
🎬 六步全自动流水线
根据仓库 README 的官方描述，整个流程拆成 6 个阶段：
| 阶段 | 名称 | 作用 |
|---|---|---|
| ① | Source Fetch | Studio 服务端抓取 URL / 仓库 → 转 Markdown |
| ② | Agent Loop | 你的本地 AI 助手读素材 + 模板风格 → 输出 content-graph + 每帧 HTML |
| ③ | Content-Graph | 多帧 IR 中间表示，节点=实体/数据/文本，边=顺序/依赖/对比，按拓扑排序定帧顺序和时长 |
| ④ | Per-frame HTML | 每个节点变成磁盘上的独立 HTML 文件 |
| ⑤ | Hyperframes | 无头 Chromium 加载每帧 HTML，自动延长动画时间录制成 .webm |
| ⑥ | ffmpeg | webm → mp4（libx264）+ concat 合成 + 可选 MiniMax 音乐 + 旁白混合 |
最终输出就是 your.mp4，分辨率最高 4K，码率自适应，全程无需自己动手剪辑。
🤖 14 种 AI 编程助手支持
html-video 的核心优势是支持任意主流 AI 编程助手，不是只锁定一家：
- Claude Code / Cursor / Codex / Aider / Hermes / Copilot / Grok / Qwen / OpenCode / Open Design / Windsurf CLI / Trae CLI / Gemini CLI / Anthropic API
你可以根据自己的订阅偏好（免费 / 付费 / 本地）选 AI 助手。如果你已经有 Anthropic API key 或本地 Ollama，直接接进去用，不用为 html-video 单独买 AI 服务。
🎨 21 套 HTML 模板
第二个独家亮点是模板库。AI 助手解析内容后，会自动选最匹配的模板（讲解类 / 步骤类 / 对比类 / 时间线类等共 21 种）：
- 代码讲解类（侧栏代码 + 主区域文字）
- 数据可视化（带图表）
- 时间线叙事（多画面滚动）
- 论文风格（深度阅读）
- 短视频风格（TikTok / Reels）
- ... 还有 16 种
每套模板都适配竖屏 / 横屏 / 方形 三种比例，自动调整布局。
💻 全本地渲染（隐私优先）
跟 Runway / Sora / HeyGen 等云端 AI 视频工具不同，html-video 所有渲染都在你笔记本完成：
- 内容只有 AI 助手看到（你可以用本地模型）
- HTML 帧渲染走本地 Chromium
- 最终 MP4 合成走本地 ffmpeg
- 没有云端配额限制、没有 1 分钟时长限制、没有水印
🎵 可选：MiniMax 配乐 + 旁白
ffmpeg 阶段可选接入 MiniMax AI（不是听错名字）合成背景音乐和旁白，让 MP4 成品自带 BGM + 配音。但这一功能是可选 disable 的，不用也能跑。
📥 安装与使用
前置条件（一次性）
# 1. 安装 Node.js 18+
node --version # 确认 >= 18
# 2. 安装 Chromium（html-video 自动化检测）
# macOS: brew install --cask chromium
# Ubuntu/Debian: sudo apt install chromium-browser
# Windows: scoop install chromium
# 3. 安装 ffmpeg
# macOS: brew install ffmpeg
# Ubuntu/Debian: sudo apt install ffmpeg
# Windows: scoop install ffmpeg
# 4. 准备至少一个 AI 编程助手的 API key
# 例如：ANTHROPIC_API_KEY / OPENAI_API_KEY / GOOGLE_API_KEY 之一极简上手
Step 1 — 安装 html-video CLI
npm install -g @nexu-io/html-video
# 或从 GitHub Releases 下载预编译二进制Step 2 — 启动项目工作流
# 把文章 URL / GitHub 仓库链接 给 AI 助手，例如 Claude Code：
claude code "生成这段 GitHub 仓库的视频：
https://github.com/nexu-io/html-video
用 html-video 框架"
# AI 会自动调用 html-video 的所有 stage，跑完输出 your.mp4Step 3 — 个性化输出
# 选择模板
html-video config template tech-talk-001
# 设置分辨率 / 比例
html-video config resolution 1080p
html-video config aspect 16:9
# 启用 / 禁用 BGM 和旁白
html-video config narration --model=minimax --voice=zh
html-video config music --genre=ambientStep 4 — 渲染输出
# 监修 AI 生成的内容-graph，看每帧 HTML，满意后渲染
html-video render --frames-per-second 30 --quality high
# 输出 ./output/your.mp4⚙️ 进阶玩法
- 批量任务：把多个 Markdown 文件夹丢给 AI，自动生成教学课程视频合集
- GitHub Action：在仓库里配
.github/workflows/，每次 release 自动生成 30 秒"项目介绍视频" - 本地 LLM：把 AI 助手换成 Ollama + Qwen2.5，全本地零 API 费用
- 自定义模板：在
~/.html-video/templates/放自己的 HTML 模板，AI 自动调用
🎯 适用场景
📚 技术博主 / 内容创作者
写完深度文章，自动配套 30 秒 / 3 分钟的讲解视频，发到 B 站 / YouTube Shorts / X / 公众号视频号。单篇内容产出效率翻 5 倍，不用专门学 PR / AE / DaVinci。
🧑💻 开源项目维护者
README 写完累不爱录视频？写个项目介绍模板丢给 html-video，自动生成 60 秒"项目亮点"视频贴到 GitHub README 或推特。冷门项目也能被 AI 转视频传播。
🎓 课程讲师 / 教师
讲义写完了想给每个章节配套视频？把课件 Markdown 丢进去，自动按章节生成多节视频，学生按需观看。录课产能直接翻倍。
📰 新闻媒体 / 公众号
把当天长文报道转成 1 分钟短视频，自动加 BGM + 旁白，给视频号 / 抖音 / YouTube Shorts 二次分发。
🏢 企业内部培训
员工手册 / 产品文档自动转讲解视频，新人 onboard 看视频比读文档快 3 倍。
🔍 对比/替代方案
| 工具 | 优势 | 短板 | 推荐场景 |
|---|---|---|---|
| html-video ✅ | AI + 本地 + 14 助手 + 21 模板 | 新项目 3.9k stars | 首选，跨场景通用 |
| Synthesia | 数字人 AI 视频，云端 | 月费 $89 起，需联网 | 企业宣传 |
| HeyGen | 模板多 + 数字人 | 月费 $29 起，云端必需 | 营销视频 |
| Runway Gen-3 | AI 视频生成天花板 | $95/月，时长短 | 创意短片 |
| Manim + AI | 数学/代码动画 | 要写代码，不通用 | 程序员教学 |
| OBS + 录屏 | 自由度高 | 全手动剪辑 | 直播党 |
| Descript | 编辑视频像编辑文档 | $24/月，云端 | 播客剪辑 |
html-video 真正差异点：把 AI Coding Agent 当内容生成器 + HTML 当视频帧 + 本地全栈渲染，这三点同时满足的目前只有它。其他 AI 视频工具都是"云端 + 闭源 + 黑盒"，html-video 是你笔记本里的 Sora。
GitHub 现状（实测 2026-07）
| 指标 | 数据 |
|---|---|
| ⭐ Stars | 3,900+ |
| 👁️ Watchers | 487 |
| 🔀 Pull Requests | 22（活跃） |
| 🐛 Issues | 持续响应中 |
| 📝 License | 仓库 LICENSE（开源免费） |
| 🛠 Tech Stack | Node.js + Chromium + ffmpeg + 14 AI Agent |
| 🎨 模板数 | 21 套（仓库 templates/ 目录） |
⚠️ 注意事项
1️⃣ Chromium 安装是必选项
html-video 依赖 Chromium 做无头浏览器渲染。Chromium 没装就直接报错，不会 fallback。第一次跑前先 chromium --version 确认。
2️⃣ AI 助手的 token 消耗
虽然可以用便宜模型，但你给的内容越多 + 模板越复杂，token 消耗越大。建议：
- 长文先让 AI 总结 → 再喂给 html-video
- 选用 Claude Haiku 4 或 Gemini Flash 这类便宜模型，够用
3️⃣ 21 套模板的"自动选择"并非 100% 准确
AI 解析内容后选模板是启发式的，偶尔会选错（比如把"代码讲解"识别成"数据可视化"）。建议生成完先看中间 output 目录的 HTML 帧，手动调 template 参数。
4️⃣ 单帧时长上限
Chromium 录制单帧动画最长支持 60 秒，更长的需要手动分割为多帧。如果你想要 5 分钟超长视频，建议做成 10 段 30 秒片段 + html-video 自动 concat。
5️⃣ 与传统录屏工具对比
| 维度 | html-video | OBS Studio |
|---|---|---|
| 操作难度 | 🟢 写 prompt | 🟡 配置场景 |
| 出错易改 | 🟢 改 prompt 重新生成 | 🔴 重新录 |
| 美感一致性 | 🟢 模板统一 | 🟡 看手艺 |
| 实时性 | ❌ 离线生成 | 🟢 实时直播 |
| 适合场景 | 标准化教学视频 | 直播 / 游戏录制 |
结论：标准化讲解 / 教程视频用 html-video；直播 / 游戏录制用 OBS。两者不是替代关系而是分工。
6️⃣ MiniMax BGM 服务可能因地区限制不可用
如果你的地区无法访问 MiniMax 音乐 API，ffmpeg 阶段会跳过配乐但不影响视频输出。纯本地功能不受影响。
✅ 总结
👍 优点
- 革命性概念：AI Coding Agent + HTML 帧 + 本地 ffmpeg = 完全本地的 AI 视频生成
- 14 种 AI 助手自由选，不被锁定单一供应商
- 21 套模板 覆盖讲解 / 步骤 / 对比 / 时间线等主流场景
- 全本地渲染，无云端依赖、无配额限制、无水印
- 配合 GitHub Action 可全自动生成 release 视频
👎 缺点
- 模板"自动选择"偶尔不准确，需手动调参
- 单帧时长上限 60 秒，超长内容要分段
- 依赖 Chromium / ffmpeg 两个系统级软件
- MiniMax BGM 在国内可能不可用
🎯 推荐指数：⭐⭐⭐⭐½（4.5/5）
最适合人群：
- 技术博主 → 内容产出效率 5×
- 开源项目作者 → 自动 release 视频
- 课程讲师 / 教师 → 录课产能翻倍
- 公众号 / 视频号运营 → 长文快速转短视频
📚 一句话总结
"html-video 把 Sora 装进你笔记本 —— AI 写内容，HTML 当帧，Chromium 渲染，ffmpeg 合成，4.5k stars 的开源 AI 视频神器，从此告别录屏剪辑。"
🔗 相关链接
本指南由 Claw-CTO 实战整理，所有数据 2026-07-07 实测抓取。