html-video - Open Design团队开源的本地视频生成工具

html-video是什么

html-video是Open Design团队开源的本地视频生成工具，能将HTML、CSS和数据直接转换为MP4视频。支持21种预设模板，涵盖产品宣传、知识讲解等场景，可配合Claude Code、Cursor等AI编程助手自动处理内容。核心优势是本地渲染、无云端费用，且提供分页编辑、多比例适配等功能。

html-video的功能特色

• HTML/CSS/数据 → 真实 MP4：将动画 HTML 页面通过 Headless Chromium 逐帧录制，再由 ffmpeg（libx264）编码为 MP4，全程本地完成。
• 多帧故事板（Content-Graph）：Agent 生成多帧中间表示（节点+边拓扑排序），驱动复杂多场景视频，支持逐帧编辑、重排、重渲染。
• 21 个精选模板：涵盖数据可视化（NYT 风格折线图）、标题卡（故障特效）、主视觉（极光渐变）、电影感（胶片颗粒）、特效（打字机光标）、片尾（Logo 动画）等类型。
• 14+ 种 Coding Agent 支持：自动检测 PATH 上的 Open Design、Windsurf CLI、Trae CLI、Claude Code、Cursor、Codex、Gemini、Grok、Qwen、OpenCode、Copilot、Aider、Hermes、Anthropic API，顶栏一键切换。
• URL/仓库 → 视频：粘贴文章链接（支持微信公众号）或 GitHub 仓库，Studio 服务端抓取内容后自动生成视频。
• AI 配乐：可选 MiniMax 生成的背景音乐 + 旁白，导出时自动混入 MP4。
• 可插拔渲染引擎：统一 adapter 接口（render(input, ctx)），当前已接入 Hyperframes，Remotion、Motion Canvas、Revideo、Manim 在 Roadmap 中。
• Studio + CLI 双模式：提供本地浏览器 Studio（可视化模板库、聊天、导出）和可脚本化的 html-video CLI。

html-video的核心优势

• 本地优先，零渲染费用：所有渲染在本地完成，无需云端 API Key，无按次/按分钟计费，Apache-2.0 完全免费商用。
• Agent 原生设计：Agent 写 HTML/CSS（它最熟悉的语言）而非学习 Remotion/Motion Canvas 的 DSL，大幅降低创作门槛。
• 引擎无关的元层：更换渲染引擎只需替换 adapter，故事板和 Agent 循环完全不动，避免被单一引擎锁定。
• 开箱即用的模板库：21 个许可清晰的模板可直接预览、填充内容、导出，无需从零设计。
• Iteración rápida：单帧视频走快速路径（跳过 content-graph），直通渲染；多帧视频支持逐帧修改后重渲染。

html-video官网是什么

• Repositorio GitHub：https://github.com/nexu-io/html-video

html-video的操作步骤

• Preparación medioambiental：安装 Node.js ~24、pnpm 10.33.x、ffmpeg，确保 Coding Agent 在 PATH 中。
• proyecto de clonación::git clone https://github.com/nexu-io/html-video.git && cd html-video.
• Instalación de dependencias::corepack enable && pnpm install.
• 启动 Studio::pnpm tools-dev run web，浏览器访问本地地址。
• 选择 Agent：Studio 顶栏自动检测 PATH 上的 Agent，点击切换。
• Material de entrada：粘贴文章链接/GitHub 仓库，或直接用自然语言描述视频需求。
• Agent 生成：Agent 读取素材 + 模板风格，生成 content-graph 和每帧 HTML。
• Ajuste previo：在 Studio 中逐帧修改文案、重排顺序、切换模板。
• 添加配乐（可选）：选择 MiniMax AI 背景音乐和旁白。
• 导出 MP4：点击渲染，本地 Headless Chromium 录制 + ffmpeg 编码，输出最终视频。

html-video的适用人群

• 开发者 & Coding Agent 用户：项目专为 Coding Agent 设计，支持 Open Design、Claude Code、Cursor、Codex 等 14+ 种本地 Agent，适合习惯用 Agent 自动化工作流的开发者。
• 内容创作者 & 自媒体运营：需要快速将文章、公众号链接或素材批量转为短视频（TikTok/Reels/小红书风格），适合社媒内容高频生产场景。
• 数据分析师 & 可视化从业者：适合将数据报告、趋势图表转为 NYT 风格的动态数据可视化叙事视频。
• 产品经理 & 市场运营：适合为产品发布、GitHub 仓库制作高质感宣传片、功能介绍视频，使用极光渐变、故障特效等模板快速出片。
• 前端设计师 & 动效设计师：模板基于纯 HTML/CSS/GSAP 动画，熟悉前端技术的设计师可直接修改单文件模板或从零创建自定义风格。

html-video的常见问题