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

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

AI技术研习社

2026-06-08

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

传统视频剪辑耗时费力，而现有 AI 视频生成工具存在算力成本高、画面不可控等问题。近期开源社区涌现出一个硬核项目，核心逻辑是将 HTML 转化为视频。用户无需掌握复杂视频编码，仅需编写网页或利用 AI 辅助，即可通过本地 Chromium 浏览器和 ffmpeg 生成 MP4 视频。

该项目支持将公众号文章、GitHub 仓库或简短提示词一键转换为结构清晰、带动画及配乐的短视频，且完全免费、全程本地运行。

一、为什么说它是打破行业规则的“降维打击”？

目前市面上的视频生成工具主要分为两大派系：AI 像素派（Sora / Gen-3）纯黑盒生成，画面精美但控制度极低；代码渲染派（Remotion / Motion Canvas）控制力强但学习成本极高。该项目选择基于成熟的 Web 生态（HTML/CSS/JS），具备以下优势：

真正的零渲染费用：不借用任何云端算力，完全利用本地设备，渲染成本为零。

绝对的控制力：视频内的文字、数据、排版可通过修改 HTML/CSS 精确定位，避免 AI 视频的变形问题。

Agent 自动编排分镜：内置多款主流 AI 编码助手对接接口，支持自动拆分镜头、填充文案及选择模板。

二、核心架构：一句话如何变成 MP4？

该项目的底层链路精妙，具体流程如下：

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

内容解构：输入微信公众号链接或 GitHub 地址，系统后台将其抓取并展平为 Markdown 文本。

分镜编排：本地 AI Agent 读懂文本，自动判断画面数量并拓扑排序为连续分镜节点。

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

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

音视频合成：ffmpeg 合并画面，可选接入 AI 旁白与背景音乐，最终输出 H.264 编码 MP4。

三、实战演练：从零搭建你的本地视频工作室

1. 环境准备

确保电脑已安装以下基础工具，并在终端检查版本：

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

安装核心依赖 Playwright 浏览器内核：

npx playwright install chromium

2. 克隆与初始化项目

进入工作目录，执行以下命令拉取源码并编译：

# 克隆仓库
git clone https://github.com/nexu-io/html-video.git

# 进入项目目录
cd html-video

# 安装依赖
pnpm install

# 编译所有子模块
pnpm -r build

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

项目编译完成后，执行以下命令启动可视化 Studio：

node packages/cli/dist/bin.js studio

终端输出本地地址 http://127.0.0.1:3071，在浏览器打开即可进入视频编辑后台。

四、进阶配置：接入 AI 代理与声音动效

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

在 Studio 顶栏 Agent 切换器中，系统会自动检测环境变量中安装的 AI 工具，支持多达 14 种后端。若习惯本地客户端，可直接调用 Windsurf CLI、Trae CLI 或 Cursor Agent；若有 Anthropic API Key，注入环境变量后即可通过 Messages API 驱动分镜生成。

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

进入 Settings -> Audio，配置 MiniMax 的 API Key。在 Soundtrack 面板中，输入描述词可自动生成 BGM；输入台词可转化为真人配音，导出时利用 ffmpeg 自动实现智能压音。

五、自定义实战：打造一个你自己的数据可视化模板

官方自带 21 套免版税模板，高阶玩家可定制专属视频样式。以下是创建“大厂风产品发布文字卡片”模板的步骤：

1. 编写配置文件

在 templates/ 目录下新建文件夹，创建 template.html-video.yaml 文件，作为 AI Agent 识别模板的说明书：

name: my-brand-card
category: hero
tags:
  - minimal
  - brand
best_for:
  - "产品核心卖点展示"
  - "大字报金句强调"
outputs:
  resolutions:
    - 1920x1080
    - 1080x1920
  fps: 60
inputs:
  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 将自动识别新模板，并根据指令自动计算分镜并渲染。

六、避坑指南与实用技巧

长文本卡顿问题：若分镜文字过多，Chromium 渲染可能导致掉帧。建议限制每个分镜字数在 50 字以内。

动态动画时长匹配：默认渲染引擎会等待 JS 动画执行完毕。若网页动画无限循环，需在 CSS 中设置明确的 animation-iteration-count 或通过 JS 触发结束事件。

国内文章抓取：项目对微信公众号等 SSR 页面支持良好。若遇高度依赖反爬或前端加密的 SPA 网站，建议手动复制内容存为.md 文件后加载。

七、总结

该项目的出现将视频制作权利交还给了开发者和普通创作者，展示了内容驱动、代码与 Agent 自动编排组装的全新创作可能。无论是自媒体矩阵号主还是开源项目开发者，均可通过本地部署体验高效视频生成。

项目官方 GitHub 地址：https://github.com/nexu-io/html-video

【声明】内容源于网络

AI技术研习社

1234

内容 240

粉丝 0

AI技术研习社 1234

总阅读16.2k

粉丝0

内容240