告别剪映！输入一条链接自动生成分镜视频，这款开源 AI 视频神器直接把 HTML 渲染成 MP4！

你是否也厌倦了每天泡在剪辑软件里，为了转场、对音频、调动画熬黑眼圈？

在这个“用嘴剪视频”的时代，传统的视频生成（Sora、Runway）好是好，但高昂的算力费、不可控的画面变形、充值才能解锁的 4K 导出，让不少内容创作者和独立开发者望而却步。

如果你有一篇写好的公众号文章、一个 GitHub 仓库，或者仅仅是一句话，能不能直接一键把它变成结构清晰、带有动画、甚至配好背景音乐和旁白的精美短视频？

答案是：能，而且完全免费、全程本地运行！

今天给大家深度拆解一个刚刚在开源社区爆火的硬核项目：。它的核心逻辑非常性感——让 HTML 变成视频。你不需要懂复杂的视频编码，只要你会写网页（或者让 AI 帮你写），本地的 Chromium 浏览器和 ffmpeg 就能帮你把它们一帧一帧切成真正的 MP4 视频！

目前市面上的视频生成工具，主要分为两大派系：

AI 像素派（Sora / Gen-3）：纯黑盒生成，画面精美但控制度极低。想在视频里精确改一行字或加个不走样的图表？几乎不可能。

代码渲染派（Remotion / Motion Canvas）：控制力极强，但学习成本极高。你得去学一套全新的 DSL（领域专用语言）或复杂的 React 组件。

另辟蹊径，它直接选择坐在全人类最成熟的生态——Web（HTML/CSS/JS）的肩膀上。

真正的零渲染费用：不借用任何云端算力，完全压榨你自己的笔记本电脑。买电脑的钱就是你唯一的成本，渲染一万个视频也是 0 元！

绝对的控制力：视频里的文字、数据、排版，只要修改一下 HTML/CSS 就能精确定位到像素级，彻底告别 AI 视频的“断指”和“乱码”现象。

Agent 自动编排分镜：它内置了多款主流 AI 编码助手（如 Cursor、Windsurf、Trae、Claude Code 等）的对接接口。你贴个链接，AI 自动帮你拆分镜头、填充文案、选择模板。

很多同学一听到“HTML 渲染视频”，可能会觉得这不就是截屏吗？其实它的底层链路非常精妙：

输入（提示词/文章链接/Repo）        │       ▼① 源码抓取与展平 (Markdown)       │       ▼② AI Agent 自动拆解分镜 (Storyboard)       │       ▼③ 生成内容图谱与多帧 HTML 页面       │       ▼④ 无头浏览器 (Headless Chromium) 逐帧播放并录制       │       ▼⑤ ffmpeg 视频音轨合流 ───> 最终的 MP4 视频

内容解构：当你输入一个微信公众号链接或 GitHub 地址，系统会先在后台把它抓取并展平成干净的 Markdown 文本。

分镜编排（Content-Graph）：你的本地 AI Agent（比如 Claude 或 Gemini）会读懂这段文本，自动判断需要几个画面，并将它们拓扑排序为连续的分镜节点。

动态网页渲染：每个分镜会被填充进一套预设的 HTML/CSS/GSAP 动画模板中。

逐帧捕获：本地调用无头 Chromium 浏览器打开这些网页，配合动画库自动延伸录制时间，导出高质量序列帧或 WebM 视频。

音视频合成：ffmpeg登场，将录制好的画面进行合并，并可选接入 MiniMax 接口生成的 AI 旁白（TTS）与背景音乐，最终吐出标准的 H.264 编码 MP4。

废话不多说，我们直接上干货，看看在本地怎么把它跑起来。

1. 环境准备

在开始之前，确保你的电脑上安装了以下基础工具。打开你的终端（Terminal），依次检查：

node --version    # 需要 20+ 版本pnpm --version    # 需要 9+ 版本ffmpeg -version   # 确保配置了全局环境变量

如果上述工具都 OK，我们还需要安装一个核心依赖——Playwright 浏览器内核（用于后台渲染网页）：

npx playwright install chromium

2. 克隆与初始化项目

进入你的工作目录，执行以下命令将源码拉取到本地并编译：

# 克隆仓库git clone https://github.com/nexu-io/html-video.git
# 进入项目目录cd html-video
# 安装依赖pnpm install
# 编译所有子模块（核心层、运行时、CLI等）pnpm -r build

3. 启动本地可视化工作室

项目编译完成后，你不需要一直面对枯燥的黑窗口。它贴心地提供了一个可视化的 Studio（浏览器工作室）。

执行以下命令启动：

node packages/cli/dist/bin.js studio

此时，终端会输出一个本地地址：[http://127.0.0.1:3071](http://127.0.0.1:3071)。在浏览器中打开它，你就能看到一个非常现代化的视频编辑后台。

为了让它展现出真正的“全自动”实力，建议配置好以下两类生态：

1. 绑定你的 AI 编码特工（Agent）

在 Studio 顶栏的 Agent 切换器中，它会自动检测你系统环境变量中安装的 AI 工具。它支持多达 14 种后端：

如果你习惯本地客户端，它可以直接调用你的Windsurf CLI、Trae CLI或Cursor Agent。

如果你有 Anthropic 的 API Key，可以直接在环境变量中注入ANTHROPIC_API_KEY，这样系统就能直接通过 Messages API 来驱动分镜生成。

2. 配置 AI 配乐与配音（Soundtrack）

想让视频自带高级感？进入Settings -> Audio，配置MiniMax的 API Key。

在项目的 Soundtrack 面板中：

BGM 生成：输入描述词（例如：calm cinematic ambient, slow build极其舒缓的电影氛围），AI 会自动为你生成一段纯音乐。

旁白文案：直接输入台词，MiniMax 会将其转化为极具 human-like 质感的真人配音，并在导出时利用 ffmpeg 自动实现智能压音（BGM 在说话时自动降低音量）。

官方自带了 21 套免版税的精美模板（包含纽约时报风格的动态折线图、黑客帝国风的 Glitch 片头、极简瑞士排版卡片等）。

但作为高阶玩家，我们往往需要定制自己专属的视频样式。下面教大家如何手写一个简单的“大厂风产品发布文字卡片”模板。

1. 编写配置文件

在templates/目录下新建一个名为my-brand-card的文件夹，并在里面创建template.html-video.yaml。这个文件是让 AI Agent 读懂你模板的“说明书”：

name: my-brand-cardcategory: herotags:  - minimal  - brandbest_for:  - "产品核心卖点展示"  - "大字报金句强调"outputs:  resolutions:    - 1920x1080    - 1080x1920  fps: 60inputs:  type: object  properties:    title:      type: string      description: "主标题，控制在15字以内"    subtitle:      type: string      description: "副标题或核心数据"    accentColor:      type: string      description: "高亮文字的十六进制颜色代码"  required:    - title

2. 编写 HTML 动画骨架

在同级目录下创建index.html。这里我们使用标准的 Web 技术，并借助简单的 CSS Animation 实现出场动画。

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <style>    :root {      --bg-color: #0d0e15;      --text-color: #ffffff;      --accent-color: #00ffcc;    }    body {      margin: 0;      width: 100vw;      height: 100vh;      background-color: var(--bg-color);      display: flex;      flex-direction: column;      justify-content: center;      align-items: center;      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;      overflow: hidden;    }    .container {      text-align: center;      padding: 40px;    }    h1 {      color: var(--text-color);      font-size: 4rem;      margin-bottom: 20px;      opacity: 0;      transform: translateY(30px);      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;    }    p {      color: var(--accent-color);      font-size: 2rem;      margin: 0;      opacity: 0;      transform: translateY(20px);      animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;    }    @keyframes fadeInUp {      to {        opacity: 1;        transform: translateY(0);      }    }  </style></head><body>  <div class="container">    <!-- html-video 在运行时会自动把下面的变量替换为 AI 填充的真实内容 -->    <h1 id="title">默认主标题</h1>    <p id="subtitle">默认副标题</p>  </div>
  <script>    // 动态接收本地注入的上下文数据    window.addEventListener('DOMContentLoaded', () => {      // 真实运行环境下，html-video 会将数据挂载在 window.__INPUT_DATA__      if (window.__INPUT_DATA__) {        const data = window.__INPUT_DATA__;        if (data.title) document.getElementById('title').innerText = data.title;        if (data.subtitle) document.getElementById('subtitle').innerText = data.subtitle;        if (data.accentColor) document.documentElement.style.setProperty('--accent-color', data.accentColor);      }    });  </script></body></html>

当你重启本地 Studio 时，AI 就会自动识别这个新模板。当你对它说：“帮我把公司的三季度财报做个短视频，用我刚写的大厂风卡片模板”，AI 就会自动计算出分镜，把数字和标题塞进你刚刚写好的脚本里，完美渲染！

在实际使用过程中，为了让渲染更流畅，有几个小细节需要注意：

长文本卡顿问题：如果你的一页分镜里塞了上千字，Chromium 渲染复杂的文字重排可能会导致掉帧。建议通过 Prompt 限制 AI Agent：“请将每个分镜的字数压缩在 50 字以内”。

动态动画时长匹配：默认渲染引擎（Hyperframes）非常聪明，它会等待你的 JS 动画执行完毕。如果你的网页动画是无限循环的（比如一个一直旋转的地球），记得在 CSS 中给动画设置明确的animation-iteration-count或者通过 JS 在动画结束时触发特定事件，否则录制可能会停不下来。

国内文章抓取：该项目对微信公众号等服务端渲染（SSR）的页面支持极好，可以直接贴链接。但如果是某些高度依赖复杂反爬或前端加密的 SPA 网站，建议先手动将网页内容复制存为.md文件，再用本地 CLI 加载。

的出现，真正把视频制作的权利交还给了开发者和普通创作者。

它向我们展示了未来内容创作的一种全新可能：视频不再需要一帧一帧地去“剪”，而是像流水线一样，由内容驱动，通过代码和 Agent 自动编排组装。

无论你是想批量制作视频的自媒体矩阵号主，还是想为自己的开源项目做一段酷炫 Baseline 介绍的开发者，这个项目都非常值得你今晚就打开终端，输入pnpm install去亲自感受一下。

项目官方 GitHub 传送门：

官方主页：https://github.com/nexu-io/html-video

赶紧把你的第一个 HTML 视频跑起来吧！