html-video – Open Design 团队开源的 HTML 版剪映

1. html-video是什么

html-video是Open Design团队（nexu.io）开源的HTML版剪映，基于hyperframes框架构建。该工具让智能体通过编写HTML即可生成世界级水准的产品宣传、知识解说等视频内容，内置20多套顶级模板，支持分页编辑、多尺寸导出与Minimax AI配音配乐，无需API Key即可完全本地运行。其核心理念是用HTML/CSS替代传统视频工程，将视频制作的门槛从专业软件操作降低到前端开发技能，同时保持输出质量达到商业级标准。

技术定位与领域： html-video属于AI视频生成与前端技术交叉的创新型工具，具体定位于“Agent原生视频生成引擎”。它不同于传统的视频编辑软件或AI视频生成模型，而是通过HTML/CSS渲染技术实现视频内容的动态生成，让AI智能体直接操控网页元素来完成视频制作。这一技术路线在视频生成领域较为罕见，开辟了“代码驱动视频”的新范式。

研发背景： 由Open Design团队（nexu.io）开发，该团队专注于设计工具与AI工作流的融合。研发动机源于传统视频制作流程的痛点：专业软件学习成本高、渲染效率低、难以与AI工作流集成。通过将视频工程简化为HTML代码，团队希望实现“任何能写HTML的Agent都能做视频”的目标，降低视频制作的技术门槛。

核心价值： html-video解决了三个关键问题：一是视频制作的高昂成本（软件许可、硬件配置、人力投入），二是AI智能体与视频生成的断点（Agent无法直接操作专业视频软件），三是数据隐私与云端依赖的权衡（无需API Key完全本地运行）。其创新价值在于用3万行代码实现了剪映级体验，将视频制作成本降低了一个数量级。

技术特点： 采用hyperframes框架作为底层渲染引擎，通过HTML/CSS描述视频帧的布局与动画，实现像素级的画面控制。内置20+顶级模板覆盖主流视频风格，支持16:9、9:16、1:1、4:5等多尺寸一键切换。原生集成6种Code Agent CLI（Codex、Claude Code、Hermes、Cursor Agent等），实现从内容输入到视频输出的全自动化流程。

2. 主要功能

• 模板化视频生成： 内置20多套顶级HTML视频风格模板，覆盖产品宣传、知识解说、数据可视化等主流场景。用户只需选择模板，Agent即可自动填充内容生成动态MP4视频，无需手动设计每一帧的布局与动画。

• 分页编辑与预览： Studio编辑器支持分页预览、分页编辑和帧级文字修改，用户可以在不导出视频的情况下实时查看修改效果。这一设计避免了传统视频工具“修改-渲染-检查”的低效循环，将编辑效率提升数倍。

• 多尺寸适配： 一键切换横屏16:9、竖屏9:16、方形1:1、小红书4:5等主流视频规格，适配全平台分发需求。技术实现上通过CSS媒体查询和视口单位实现响应式布局，无需为每个尺寸单独制作视频。

• Agent无缝接入： 自动识别本地6种Code Agent CLI（Codex、Claude Code、Hermes、Cursor Agent等），顶部栏一键切换，零配置即用。这一设计让AI智能体直接接管视频制作流程，从内容提取、脚本生成到视频导出全链路自动化。

• AI配音配乐： 已接入Minimax AI配音服务，支持根据视频内容自动生成旁白配音与背景音乐。Token消耗低，成本可控，用户只需提供文本内容即可获得专业的配音效果，无需额外录制或购买音乐版权。

• 本地优先运行： 完全本地运行，不依赖云端API Key，数据隐私有保障。用户只需克隆仓库并安装依赖即可使用，无需申请任何第三方服务授权，长期使用成本极低。

• 实时迭代预览： 分页编辑模式支持逐帧修改与实时预览，用户在Studio中修改文字或画面后立即看到效果。这一功能特别适合需要反复调整的创作场景，如产品宣传视频的文案优化或知识解说视频的画面调整。

• 开源可定制： 采用Apache 2.0开源协议，代码完全开源，支持商业和学术用途。开发者可以根据需求修改模板、扩展功能或集成其他AI服务，灵活性远高于闭源商业软件。

3. 如何使用

1. 环境要求： 需要Node.js 18+和npm 8+运行环境。操作系统支持macOS、Linux和Windows（需安装Git Bash或WSL）。无需GPU，普通笔记本即可流畅运行核心功能。

2. 克隆仓库： 打开终端，执行 git clone https://github.com/nexu-io/html-video.git 将项目拉取到本地。建议使用SSH方式克隆以避免GitHub API限流问题。

3. 安装依赖： 进入项目目录，运行 npm install 安装所有依赖。安装过程无需申请任何API Key或注册账号，所有依赖包均来自npm公共仓库。如果网络环境受限，可以使用淘宝镜像加速。

4. 启动Studio： 运行 npm run dev 启动本地可视化编辑器，默认在 http://localhost:3000 访问。首次启动时会自动加载内置的20+模板库，用户可以浏览并选择适合的风格。

5. 输入内容： 将网站链接、文件或公众号文章等内容交给Agent。如果是手动模式，可以直接在Studio中编辑HTML模板；如果是Agent模式，系统会自动识别本地已安装的Code Agent CLI并调用。

6. 分页精修： 在Studio中逐页预览、编辑文字与画面，实时调整细节。支持帧级文字修改、元素位置调整和动画参数配置。每次修改后无需重新渲染，画面立即更新。

7. 导出MP4： 确认无误后点击“导出”按钮，系统将自动渲染生成高清MP4视频。如果启用了Minimax配音配乐，系统会在导出前自动生成对应的音频文件并合成到视频中。

注意事项： 首次使用Minimax配音功能时，需要配置Minimax API Key（可选，不影响核心功能）。建议在导出前预览所有分页，确保文字和画面无遗漏。对于长视频（超过5分钟），建议分页导出后再合并，避免单次渲染时间过长。

4. 优缺点分析

5. 同类工具对比

选型建议： 对于开发者或AI Agent工作流使用者，html-video是最佳选择。它提供了最直接的代码驱动方式，零API成本，且完全本地运行保护数据隐私。特别是需要批量生成产品宣传或知识解说视频的场景，html-video的模板化和Agent集成能力可以大幅提升生产效率。

对于内容创作者和Vlog博主，FireRed-OpenStoryline的对话式交互更适合非技术背景用户。它通过自然语言沟通实现视频剪辑，学习成本更低，且支持AI脚本生成和风格仿写，适合需要创意灵感的场景。而剪映专业版适合需要精细控制视频效果的创作者，其时间线编辑和丰富的特效库是专业视频制作的基础。Runway Gen-3则适合需要生成全新视频内容而非编辑现有素材的用户，其扩散模型能力在创意视频生成方面具有独特优势。

6. 编辑点评

html-video是一个极具创新性的开源项目，它在视频生成领域开辟了一条独特的技术路线。与主流的AI视频生成工具（如Runway Gen-3、Pika）不同，html-video不依赖大规模扩散模型或生成式AI，而是回归到HTML/CSS这一成熟的前端技术栈，通过模板化和Agent集成来实现视频制作。这一技术选择看似“复古”，实则精妙——它避开了生成式AI的不确定性（如人物面部不一致、运动逻辑错误等问题），同时利用前端技术的高性能和可定制性，实现了高质量、低成本的视频输出。

从实用价值来看，html-video解决了当前AI Agent生态中的一个关键断点：Agent可以写代码、写文章、画图，但无法直接制作视频。html-video让Agent通过写HTML就能生成视频，填补了这一空白。对于需要批量生产视频内容的团队（如知识博主、产品营销团队），html-video的模板化和自动化能力可以大幅提升生产效率，降低人力成本。

技术实现上，hyperframes框架的设计值得关注。它通过HTML/CSS描述视频帧的布局与动画，实现了像素级的画面控制，同时保持渲染效率。20+内置模板的质量达到商业级水准，覆盖了产品宣传、知识解说等主流场景。多尺寸一键切换功能通过CSS媒体查询实现，技术方案简洁高效。

适用人群方面，html-video最适合具有前端开发基础的开发者或技术团队。对于完全无技术背景的内容创作者，学习曲线可能稍显陡峭。但随着AI Agent能力的提升，未来用户可能只需通过自然语言描述需求，Agent即可自动完成HTML编写和视频生成。

发展潜力上，html-video有望成为AI Agent生态中的基础设施工具。随着更多Code Agent的普及，以及模板社区的建设，html-video的应用场景将不断拓展。未来可能的方向包括：支持更多AI配音服务、增加动态图表生成能力、引入社区模板市场等。

7. 应用场景

• 知识博主内容量产： 将公众号文章、技术文档自动转为带配音的知识解说视频。用户只需提供文章链接，Agent即可提取核心内容并生成视频脚本，适配小红书4:5、B站16:9等多平台规格。一个技术博主一天内可产出10+条知识解说视频，内容覆盖效率大幅提升。

• 产品宣传视频制作： 输入产品官网链接，Agent自动提取卖点并生成动态产品展示视频。适合初创团队快速制作营销物料，无需专业视频制作团队。从输入链接到导出MP4，整个过程可在10分钟内完成，成本仅为传统制作的1/10。

• 数据可视化报告： 将CSV/JSON数据转化为动态图表视频，用于汇报演示、社交媒体传播。通过HTML/CSS实现数据驱动的动态图表，避免静态图表的枯燥感。金融分析师或市场研究员可以快速将数据洞察转化为可视化视频，提升报告的说服力。

• 电商内容创作： 批量生成商品介绍、使用教程等短视频，配合Minimax AI配音，实现低成本、高效率的内容矩阵运营。电商运营人员只需提供商品信息和卖点，Agent即可自动生成多个版本的视频，适配不同平台的分发需求。

• 教育课件制作： 将教学大纲或讲义内容自动转化为视频课件，支持分页编辑和实时预览。教师可以在Studio中逐页调整内容，确保教学逻辑清晰。生成的视频可直接用于在线课程平台或课堂展示，节省大量课件制作时间。

8. 常见问题FAQ

Q：html-video需要GPU吗？对硬件有什么要求？
A：不需要GPU。html-video基于HTML/CSS渲染，主要依赖CPU和内存。普通笔记本即可流畅运行，建议内存8GB以上，操作系统支持macOS、Linux和Windows（需安装Git Bash或WSL）。

Q：是否支持中文内容？AI配音支持中文吗？
A：完全支持中文。HTML模板可以处理中文文字内容，Studio编辑器支持中文输入。Minimax AI配音支持中文旁白生成，效果自然流畅。用户也可以自定义配音服务，通过修改配置文件接入其他TTS引擎。

Q：如何自定义模板？需要学习什么技术？
A：需要掌握基础的HTML/CSS知识，了解flex布局、动画属性等前端技术。项目使用hyperframes框架，提供了详细的模板开发文档。用户可以在 templates 目录下创建新的模板文件，参考内置模板的结构进行开发。

Q：导出视频的质量如何？支持4K分辨率吗？
A：默认导出1080p高清视频，质量达到商业级标准。支持自定义分辨率，用户可以在配置文件中调整输出参数。目前不支持4K分辨率导出，主要受限于HTML渲染引擎的性能上限。对于大多数社交媒体和产品宣传场景，1080p已足够使用。

Q：与剪映专业版相比，html-video的优势是什么？
A：核心优势在于本地优先、零API成本和Agent原生设计。剪映专业版需要安装客户端、依赖云端AI服务，且无法与Code Agent工作流集成。html-video让AI智能体直接操控视频制作，实现全自动化流程，且长期使用成本远低于剪映专业版。

Q：Minimax配音需要付费吗？如何配置？
A：Minimax配音服务需要API Key，有免费额度。用户需要在Minimax官网注册账号并获取API Key，然后在html-video的配置文件中填写。Token消耗低，普通视频（3分钟）的配音成本约为0.1元人民币，成本可控。

Q：如何将生成的视频用于商业用途？
A：html-video采用Apache 2.0开源协议，允许商业使用。用户生成的视频版权归用户所有，可以用于产品宣传、广告投放等商业场景。内置模板的素材版权需自行确认，建议使用原创内容或已授权的素材。

9. 项目地址

• GitHub仓库： https://github.com/nexu-io/html-video
• 项目官网： https://nexu.io/ （Open Design团队主页）
• hyperframes框架文档： 项目内包含详细文档，启动后可在 http://localhost:3000/docs 访问