html-video：Open Design团队开源的HTML版剪映，让Agent用HTML生成专业级视频
更新时间:2026-06-06 02:30:59 发布时间:5小时前 阅读:7次html-video 是 Open Design 团队开源的 HTML 版剪映，基于 hyperframes 框架构建。工具让 Agent 通过编写 HTML 即可生成世界级水准的产品宣传、知识解说等视频，内置 20 余套顶级模板，支持分页编辑、多尺寸导出与 AI 配音配乐，无需 API Key 即可本地运行，将视频创作的门槛从专业软件操作降低为代码编写。
目录
显示
html-video是什么：Agent原生的HTML视频生成引擎
html-video 是 Open Design 团队开源的 HTML 版剪映，基于 hyperframes 框架构建。工具让 Agent 通过写 HTML 可生成世界级水准的产品宣传、知识解说等视频，内置 20 余套顶级模板，支持分页编辑、多尺寸导出与 AI 配音配乐，无需 API Key 可本地运行。
html-video的主要功能
- 模板化视频生成：内置 20 多套顶级 HTML 视频风格模板，覆盖产品宣传、知识解说、数据可视化等场景，Agent 可直接调用生成动态 MP4。
- 分页编辑与预览：Studio 编辑器支持分页预览、分页编辑和帧级文字修改，无需反复导出查看效果，修改效率大幅提升。
- 多尺寸适配：一键切换横屏、竖屏、方形、小红书等主流视频规格，适配全平台分发需求。
- Agent 无缝接入：自动识别本地多种 Code Agent CLI，包括 Codex、Claude Code、Hermes、Cursor Agent 等，顶部栏一键切换，零配置即用。
- AI 配音配乐：已接入语音合成服务，支持根据视频内容自动生成旁白配音与背景音乐，Token 消耗低，成本可控。
如何使用html-video
- 克隆仓库：从 GitHub 拉取 html-video 开源项目到本地。
- 安装依赖：运行安装命令，配置本地环境，无需申请任何 API Key。
- 启动 Studio：打开本地可视化编辑器，浏览 20 余套内置模板并选择适合的风格。
- 输入内容：将网站链接、文件或文章等内容交给 Agent，自动生成 HTML 视频脚本。
- 分页精修：在 Studio 中逐页预览、编辑文字与画面，实时调整细节。
- 导出 MP4：确认无误后一键导出高清视频，或直接生成配音配乐后下载。
html-video的核心优势
- 本地优先，零 API 成本：完全本地运行，不依赖云端 API Key，数据隐私有保障，长期使用成本极低。
- Agent 原生设计：专为 Code Agent 工作流打造，支持主流 CLI 工具一键切换，让 AI 自动完成从内容到视频的全链路。
- HTML 驱动，极低成本：用 HTML 和 CSS 替代传统视频工程，数万行代码即可实现专业级体验，技术门槛与维护成本远低于专业视频软件。
- 实时迭代，所见即所得：分页编辑模式支持逐帧修改与实时预览，避免传统视频工具反复渲染的低效循环。
html-video的技术原理
- hyperframes 渲染引擎：基于 hyperframes 框架构建，将 HTML 和 CSS 页面渲染为视频帧序列，实现从网页到视频的无缝转换。
- 分页编辑架构：Studio 编辑器将视频按页组织，每页对应独立的 HTML 片段，支持帧级文字修改和独立预览，编辑操作即时响应。
- Agent 识别与适配层：自动扫描本地环境中的 Code Agent CLI 工具，通过统一的接口抽象层实现与多种 Agent 工具的兼容适配。
- 多尺寸渲染管线：通过 CSS 媒体查询和视口适配技术，一键切换不同宽高比的渲染输出，适配多平台分发需求。
html-video的同类竞品对比
我们将 html-video 与 FireRed-OpenStoryline 进行对比，其在 Agent 原生设计和零成本本地运行上具有显著优势：
| 维度 | html-video | FireRed-OpenStoryline |
|---|---|---|
| 核心定位 | HTML 版剪映，Agent 原生视频生成 | 具备导演思维的对话式 AI 视频剪辑 Agent |
| 技术架构 | hyperframes 加 HTML/CSS 渲染引擎 | MoviePy 加 FFmpeg 加 LangChain 加 MCP 协议 |
| 交互方式 | Studio 可视化编辑器加 Agent CLI 代码驱动 | 自然语言对话加 Web 界面实时交互 |
| 素材来源 | 用户输入加 20 余套内置模板 | 自动在线搜索加用户上传素材 |
| 编辑粒度 | 分页预览加帧级文字编辑 | 对话式精修，包括剪短、替换、重组、调色 |
| AI 能力 | 模板化生成、语音合成配音配乐 | 智能脚本生成、语音识别粗剪、AI 转场、风格仿写 |
| Agent 集成 | 原生支持多种 CLI，包括 Codex、Claude Code、Cursor 等 | 通过 Skills 接入多种 Agent |
| 本地与云端 | 本地优先，核心功能零 API Key | 本地部署，需配置 LLM API Key |
| 硬件要求 | 普通笔记本即可运行 | 无需 GPU，CPU 即可跑通核心逻辑 |
| 模板与技能 | 20 余套内置 HTML 视频模板 | 剪辑 Skill 沉淀，节奏、色调、转场风格复用 |
| 输出格式 | MP4 多尺寸，包括横屏、竖屏、方形 | 自定义分辨率视频 |
| 开源协议 | Apache 2.0 | Apache 2.0 |
html-video 的独特价值在于其 Agent 原生设计和本地零成本运行能力，让开发者可以直接用 HTML 代码驱动视频生成，更适合批量内容生产和自动化工作流场景。
html-video的应用场景
- 知识博主内容量产：将文章、技术文档自动转为带配音的知识解说视频，适配小红书、B站等多平台规格。
- 产品宣传视频：输入产品官网链接，Agent 自动提取卖点并生成动态产品展示视频，适合初创团队快速制作营销物料。
- 数据可视化报告：将结构化数据转化为动态图表视频，用于汇报演示、社交媒体传播，避免静态图表的枯燥感。
- 电商内容创作：批量生成商品介绍、使用教程等短视频，配合 AI 配音，实现低成本、高效率的内容矩阵运营。
html-video总结
html-video 作为 Open Design 团队开源的项目，通过将视频生成简化为 HTML 编写，并深度融合 Agent 工作流，开创了一种全新的视频创作范式。其本地优先、零 API 成本的架构设计，加上 20 余套内置模板和分页编辑能力，使得批量视频内容生产变得高效且经济。在 AI 视频生成日益普及的今天，html-video 为开发者和内容创作者提供了一个兼具灵活性、可控性和成本优势的开源选择，尤其适合需要规模化内容产出的团队和个人。
