html-video

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% 以上。