这是最酷的设计——引擎只是适配器。你可以根据场景切换： Playwright（默认）：无头浏览器渲染，效果最逼真 Puppeteer：Chrome/Chromium渲染 Remotion：适合React生态项目 FFmpeg：纯命令行渲染，适合CI/CD流水线

连BGM都省了：它会自动生成与视频节奏匹配的背景音乐，无需额外找素材。

GitHub爆火！html-video让AI直接生成MP4，告别剪辑地狱

Q: 1. 安装与验证

安装极其简单，npm一条命令搞定：

Q: 3. 21种内置模板

不想从零写代码？内置模板直接套用：

ivye
免费干货
8小时前
19热度
0评论

说实话，做演示视频这事儿，折磨人程度真不亚于修Bug。

上周群里有个哥们吐槽：为了做个产品演示，从Figma切图到AE动画，再到PR合成，折腾一整天。另一位老哥轻描淡写：“我用Claude写段HTML+CSS，拿工具转MP4，很钟搞定。”

这听起来像天方夜谭？但html-video这个项目，真的把这事做成了。

html-video是一个为AI编程助手打造的“元层级”视频生成工具。简单说，你跟AI说需求，AI生成HTML/CSS/JS动画，html-video负责把这些代码转成真实的MP4文件。

老实讲，整个过程本地运行，不上传云端，不按分钟计费。项目由nexu.io团队开源，Apache-2.0协议，上线不到一周就冲上GitHub Trending，Star数日增900+，被开发者称为“视频生成领域的拥抱脸时刻”。

它解决了什么真痛点？

传统视频制作流程太繁琐：写脚本、找素材、拖时间轴、反复渲染、压缩导出。每一步都可能出错。

市面上的工具也各自为战：Runway擅长AI视频但做不了精确UI动画；Canva适合幻灯片但搞不定程序化逐帧动画；After Effects全能但学习曲线陡峭。

我觉得html-video的定位很聪明：它不造新轮子，而是做AI助手和渲染引擎之间的“胶水层”。

不管你用哪个AI工具，它都能把生成的HTML动画渲染成视频。这种互操作性，在AI时代比单一工具的功能更重要。

实战：如何快速上手？

1. 安装与验证

安装极其简单，npm一条命令搞定：

# 全局安装
npm install -g @nexu-io/html-video

# 验证版本
html-video --version

2. 基础用法：AI生成+本地渲染

结合Claude Code、Cursor等AI助手，你只需描述需求。比如：

“生成一个30秒产品介绍视频，包含Logo展示、三大功能卡片、CTA按钮，科技感蓝色调，缓入缓出动效”

AI生成HTML文件后，运行渲染命令：

# 渲染HTML为MP4
html-video render output.html --format mp4

# 或直接让工具生成并渲染
html-video generate "产品介绍视频，蓝色科技风" --engine playwright

3. 21种内置模板

不想从零写代码？内置模板直接套用：

# 列出所有模板
html-video list-templates

# 使用模板生成
html-video generate --template product-launch 
  --title "AI Chat 2.0" 
  --subtitle "重新定义人机交互" 
  --cta "立即体验"

4. 多引擎适配

这是最酷的设计——引擎只是适配器。你可以根据场景切换：

Playwright（默认）：无头浏览器渲染，效果最逼真
Puppeteer：Chrome/Chromium渲染
Remotion：适合React生态项目
FFmpeg：纯命令行渲染，适合CI/CD流水线

# 切换渲染引擎
html-video render demo.html --engine remotion

5. AI自动配乐

连BGM都省了：

html-video generate "产品演示视频" --soundtrack --style cinematic

它会自动生成与视频节奏匹配的背景音乐，无需额外找素材。

6. 程序化批量生成

对于需要批量生成视频的场景（如个性化欢迎视频），可以结合脚本使用：

// generate.js
import { render } from '@nexu-io/html-video';

const video = await render({
  html: `...动态生成的HTML...`,
  engine: 'playwright',
  format: 'mp4',
  fps: 30,
  duration: 15,
});

await video.save('./output/welcome-video.mp4');