html-video 使用教程
从入门到精通的完整指南
html-video 简介
html-video 是一款将 HTML 转换为视频的编程化视频生成工具，专为编码智能体设计。用户可以通过本地编码 Agent（如 Claude Code、Cursor、Codex 等）描述视频内容或粘贴文章链接，Agent 自动渲染多帧动画视频并输出为 MP4 文件。基于 Hyperframes（无头 Chromium + ffmpeg）技术栈，提供 21 种模板和可选 AI 配乐，完全开源无渲染费用。
详细功能介绍
【工具简介】
html-video 是一款将 HTML 转换为视频的开源工具，通过编码 Agent 实现编程化视频生成，输出真实 MP4 文件。
【核心功能】
①HTML 转视频：将 HTML/CSS 动画内容自动录制并转换为 MP4 视频文件，支持多帧动画渲染。
②Agent 驱动创作：支持 Claude Code、Cursor、Codex、Hermes 等主流编码 Agent，通过自然语言描述即可生成视频。
③模板系统：提供 21 种预设视频模板，覆盖常见的视频风格和排版需求。
④AI 配乐生成：可选的 AI 配乐功能，自动为视频生成匹配的背景音乐。
⑤链接内容转换：支持粘贴文章链接或 GitHub 仓库地址，自动提取内容并转换为视频格式。
【适用场景】
①技术内容可视化：将技术博客、文档或 GitHub 项目转换为视频形式，用于社交媒体传播和知识分享。
②产品演示制作：快速生成产品功能演示视频，用于市场营销和用户教育。
③自动化视频生产：需要批量生成视频内容的团队，通过编程化流程实现视频生产的自动化。
【快速入门】
①安装 Hyperframes 运行环境（需要 Chromium 和 ffmpeg）。
②选择一个支持的编码 Agent（如 Claude Code）并配置好环境。
③描述想要生成的视频内容，或提供文章/仓库链接。
④Agent 自动生成 HTML 并渲染为 MP4 视频文件。
【优缺点分析】
优点：①完全开源免费，无按次渲染费用，成本优势明显。②支持多种主流编码 Agent，灵活性高。③编程化方式生成视频，可批量自动化处理。
缺点：①需要本地安装 Chromium 和 ffmpeg，环境配置有一定门槛。②视频质量受限于 HTML/CSS 动画的表现力。③生成过程需要编码 Agent 参与，纯手动使用不够直观。
【适合人群】
①技术内容创作者：需要将技术内容转换为视频形式的博主和教育者。②自动化工程师：希望将视频生成整合到自动化工作流中的开发者。③编码 Agent 用户：已经在使用 Claude Code、Cursor 等工具的开发者，希望扩展 Agent 的视频生成能力。
1html-video 入门教程：用代码轻松生成动画视频
入门10分钟
html-video 是一款将 HTML 转换为视频的编程化工具，专为编码智能体设计，支持多种模板和AI配乐，完全开源无渲染限制。
## 快速开始
1. 确保本地已安装 Node.js 18+ 和 ffmpeg，运行 初始化项目。
2. 选择一个模板作为起点，运行 查看可用的 21 种模板列表。
3. 用你喜欢的 AI 编码工具（如 Claude Code、Cursor）描述你想制作的视频内容，Agent 会自动生成 HTML 动画帧。
4. 运行 将生成的动画渲染为 MP4 文件。
## 核心功能演示
**功能一：模板驱动的视频生成**
运行 选择科技演讲模板，然后在生成的 HTML 文件中修改文字、颜色和动画效果。模板内置了转场动画、字幕排版和背景样式，你只需关注内容本身。保存后执行 即可导出视频。
**功能二：AI Agent 自动创作**
在 Claude Code 中输入：帮我制作一个60秒的产品介绍视频，内容是关于我们新的AI写作助手，风格简洁现代。Agent 会自动创建 HTML 动画文件，包含产品功能展示、文字动画和过渡效果，你可以在浏览器中预览并调整细节，满意后一键渲染。
**功能三：AI 智能配乐**
渲染时添加 参数，如 ，工具会根据视频内容和风格自动生成匹配的背景音乐。内置多种音乐风格可选（科技感、轻松、紧张等），也可以指定自定义音频文件。
## 实际使用案例
**场景一：快速制作产品演示视频**
产品经理小王需要为下周的发布会制作一个产品演示视频。他用 Claude Code 描述了产品的核心功能和演示流程，html-video 自动生成了一个90秒的动画演示，包含功能截图展示、数据可视化动画和文字说明。小王微调了几个细节后导出，整个过程不到2小时，而传统制作方式至少需要2天。
**场景二：技术博客视频化**
技术博主小陈想把自己的热门文章转成视频。她把文章链接粘贴给 Cursor 中的 AI Agent，Agent 自动提取关键内容，生成了分段讲解的动画视频，配合代码高亮和技术图表。视频发布后阅读量是纯文字版的8倍。
## 常见问题 FAQ
**Q1：生成的视频分辨率和时长有限制吗？**
默认支持 1080p 分辨率，时长无硬性限制。你可以在配置中调整为 4K 输出。长视频建议分段生成后用 ffmpeg 拼接，渲染更稳定。
**Q2：需要联网使用吗？**
核心渲染功能完全离线运行，基于本地的无头 Chromium 和 ffmpeg。只有使用 AI 配乐功能时需要联网生成音乐，也可以完全不使用配乐。
**Q3：可以自定义模板吗？**
可以。在项目的 目录下创建新的 HTML/CSS/JS 文件夹即可。模板使用标准的 Web 技术栈，支持 CSS 动画、SVG 和 Canvas，你可以复用任何前端动画库。
## 小贴士
1. 浏览器预览省时间：渲染前先运行 在浏览器中实时预览动画效果，确认无误后再渲染，避免反复等待。
2. 善用分段动画：复杂视频拆分成多个短片段分别制作，最后用工具自带的 命令合并，调试更方便。
3. 优化渲染速度：在配置中启用 模式可以利用多核 CPU 并行渲染帧，长视频渲染时间可缩短 40% 以上。