HyperFrames 部署教程：5.6 万 Star 开源「写 HTML 出视频」框架，Windows 从零上手（CLI 三条命令 + 7 个避坑）

redfred2026-10-07 9:46

GitHub 56k Star：HyperFrames

从零部署完整教程 · 新手照着做就能跑起来 · 效率工具指南 · 原创教程

摘要：HyperFrames 部署教程：本文在 Windows 上从零部署 HeyGen 开源的「写 HTML 出视频」框架（5.6 万 Star），涵盖 Node.js 与 FFmpeg 环境安装、CLI 三条命令完整流程（init/preview/render）、合成编写入门、变量批量出片与组件库用法，附 7 个真实踩坑的完整解决方案与一键命令速查。

想给产品、数据或活动做条视频，但不会剪辑、也不想学剪辑软件？其实还有另一条路：写网页。HeyGen 把这个思路做成了开源框架 HyperFrames------HTML/CSS 加几行动画，本地渲染出确定的 MP4 视频。本文基于一台普通 Windows 电脑（8GB 内存），从装 Node 和 FFmpeg 开始，到渲染出第一条 1080p 视频完整跑通；它还自带 AI 助手技能，可以让 Claude Code、Codex 这类工具按一句话帮你出片。

本文要点

  • 技术栈：TypeScript CLI + 无头 Chrome 逐帧捕获 + FFmpeg 编码；动画适配 GSAP / Lottie / Three.js / Anime.js / CSS 等；当前 CLI 版本 v0.8.119
  • 三条命令上手：init → preview → render，无需安装也能用 npx 跑通全流程
  • 多路径兜底：npx 免安装 / 全局安装 / AI Agent 技能路线 / 源码部署（另附云渲染简述）
  • 7 个真实踩坑：浏览器下载加速、字体声明、对比度门槛、PATH 配置等，全部给出解决方案
  • 附真实出片结果（10 秒 1080p 视频、8GB 轻薄本 40 秒渲染完成）与完整命令速查

一、项目简介

HyperFrames（heygen-com/hyperframes）是 HeyGen 开源的一款**「写 HTML 出视频」框架**：把 HTML、CSS、媒体素材和可定位（seekable）动画组合成一个网页，框架用无头 Chrome 逐帧捕获、再用 FFmpeg 编码，输出确定性的 MP4 视频------同一份输入，永远得到同一份成片。

它的口号是「Write HTML. Render video. Built for agents.」：不要求 React、没有专有剪辑工程文件，一个 index.html 就是一条视频；同时为 AI 编程助手设计了完整的技能体系（skills），让 Claude Code、Codex 这类工具可以直接「帮你写视频」。本地渲染完全免费、不按次收费，可选接入 HeyGen 云渲染 / AWS Lambda 做分布式批量出片。

二、GitHub 项目数据

项目主页：https://github.com/heygen-com/hyperframes

项目 数据
Star 56.4k（Fork 5,067，持续活跃：项目当日仍有提交）
主要语言 TypeScript（CLI / 引擎 / 播放器均为开源包）
技术栈 Node.js（≥22）+ 无头 Chrome（Puppeteer 驱动）+ FFmpeg；动画适配 GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI
许可证 Apache-2.0（本地渲染免费、可商用；云渲染等增值服务可选）
最新版本 CLI v0.8.119（npm 包名 hyperframes）
核心能力 CLI 出片、浏览器预览（Studio）、组件库、AI Agent 技能、云渲染（Lambda / Cloud Run）
输出格式 MP4 / WebM / MOV（透明）/ GIF / PNG 序列 / HLS，最高支持 4K

三、它能解决什么问题

  • 不会剪辑，也不想学剪辑？ 不用打开任何剪辑软件------会写 HTML/CSS 就能出片，动画用几行 GSAP 时间轴搞定；
  • 数据视频每次手动做，太累？ 把数据做成变量、写一次模板，批量渲染多份成片（内置变量与批量模式）；
  • 产品宣传片外包贵、周期长？ 官方工作流可以「抓取网站生成宣传片」，改文案重渲染即可迭代；
  • 想让视频「每次都一模一样」？ 确定性渲染：同输入同输出，适合做回归测试、CI 流水线、自动发版视频；
  • 想让 AI 帮你做视频？ 官方 skills 教 Claude Code / Codex 等助手完整的出片流程，一句话生成初版再迭代。

四、环境安装配置（从零开始）

✅ 先说结论 ：整套环境只需要两个东西------**Node.js（≥22）**和 FFmpeg。渲染用的浏览器由 CLI 自动下载管理，不需要你手动安装。

4.1 硬件与系统要求（动手前先看一眼）

项目 要求
系统 Windows 10/11（macOS / Linux 同样支持）
Node.js ≥ 22（本文使用 v24）
FFmpeg 需加入 PATH（编码视频用）
内存 / 显卡 8GB 内存即可出片（低内存自动优化）；无需独立显卡，核显即可
磁盘 建议预留 5GB 以上（浏览器与缓存约 300MB，渲染中间文件可用参数迁移）

4.2 安装 Node.js（从零）

第 1 步：下载安装。 到 Node.js 官网（nodejs.org/zh-cn）下载 LTS 版本 的 .msi 安装包，双击安装，一路下一步------记得保持「Add to PATH」处于勾选状态（默认已勾选）。喜欢命令行的也可以一条命令装好：

bash 复制代码 
winget install OpenJS.NodeJS.LTS

第 2 步：验证与国内加速。 安装完成后重新打开一个终端，输入以下命令，能看到版本号即成功：

bash 复制代码 
node -v
npm -v

# 国内网络建议顺手配置 npm 镜像（后边装 CLI 会快很多）
npm config set registry https://registry.npmmirror.com

4.3 安装 FFmpeg（从零）

FFmpeg 负责把捕获的帧编码成视频。两种方式任选：

方式 A（推荐，一条命令）：

bash 复制代码 
winget install Gyan.FFmpeg

方式 B（手动） ：到 gyan.dev/ffmpeg/builds 下载 release-essentials 版压缩包 → 解压到任意目录（如 C:\ffmpeg）→ 打开「设置 → 系统 → 系统信息 → 高级系统设置 → 环境变量」，在「用户变量」的 Path 里新增一行 C:\ffmpeg\bin → 一路确定。

验证（改完 PATH 记得重开终端）：

bash 复制代码 
ffmpeg -version
ffprobe -version

两条命令都能输出版本信息即成功。

4.4 渲染浏览器：不用手动装

HyperFrames 渲染时使用专用的 chrome-headless-shell，首次运行会自动下载到用户目录（约 119MB）。环境体检命令（下节会用到）会检查它是否就绪；下载慢的加速方案见「坑 1」。也可以随时手动管理：

bash 复制代码 
npx hyperframes browser ensure   # 下载/检查渲染浏览器
npx hyperframes browser path     # 查看浏览器路径

五、部署步骤（三条命令上手）

5.1 路径一：npx 免安装（推荐，零安装）

第 1 步：环境体检------一条命令看清缺什么

bash 复制代码 
npx hyperframes doctor

首次运行会先下载 CLI 本体（配置了 npm 镜像后很快）。体检结果逐项标注：Node、FFmpeg、浏览器、磁盘、内存都会显示状态与建议。下面是一台 8GB 轻薄本的体检输出------必需的项全部通过，可选项（语音、转写）未装不影响出片：

第 2 步：初始化项目------生成视频工作区

bash 复制代码 
npx hyperframes init my-video
cd my-video

会生成一个可编辑的视频项目：index.html（视频本体）、hyperframes.json（项目配置）、package.json（快捷脚本）、以及给 AI 助手看的项目说明文件。默认是一个带注释示例的空白合成，下一步我们把它填成真正的视频。

第 3 步：本地预览------改一行、看一行

bash 复制代码 
npx hyperframes preview

会在浏览器打开 Studio 预览界面（默认 http://127.0.0.1:3002）：左侧是合成/素材/代码面板，中间是实时画面，右侧是检查器与时间轴。改 HTML 保存后画面自动刷新，适合边写边调。用完按 Ctrl+C 停止。

第 4 步：渲染出片------拿到 MP4

bash 复制代码 
npx hyperframes render

渲染完成后终端会给出产物路径与摘要。以本文演示的 10 秒 1080p 片头为例：444.4KB、耗时 40 秒 （8GB 内存轻薄本，自动低内存模式 + 静态帧去重）。文件默认落在项目的 renders/ 目录：

还有一个彩蛋：同一条片子可以一键输出 GIF 动图（做教程动图、社交预览图特别好用）：

bash 复制代码 
npx hyperframes render --format gif --fps 15

5.2 路径二：全局安装（常用命令行可选项）

如果你打算经常使用，可以全局安装，之后直接用 hyperframes 命令：

bash 复制代码 
npm i -g hyperframes
hyperframes --version

⚠️ 安装后提示「找不到 hyperframes」是 Windows 的经典问题：npm 全局目录（%APPDATA%\npm）不在 PATH 里。把该目录加入用户 PATH 后重开终端即可（详细步骤见坑 2）；不想折腾的话继续用 npx 就行。

5.3 路径三：AI Agent 技能路线（让助手帮你出片）

HyperFrames 配了一套 21 个技能的体系，教 AI 编程助手「出片的正确姿势」。以 Claude Code 为例安装插件：

bash 复制代码 
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

其他助手（Codex、Cursor、Gemini CLI 等）可用通用技能安装命令：

bash 复制代码 
npx skills add heygen-com/hyperframes    # 交互式，选择 Core Skills
npx hyperframes skills update            # 非交互式（适合脚本/直接更新核心技能）

装好后在对话里说一声「用 /hyperframes 做一个 10 秒产品介绍」，助手就会走完「策划 → 写 HTML → 配动画 → 检查 → 渲染」的完整流程。注意：技能清单托管在 GitHub，国内网络可能需要代理（见坑 6）。

5.4 进阶路径：源码与云渲染（简述）

需要参与项目开发或深度定制，可克隆源码仓库（Bun 单体仓库；注意仓库含约 240MB 的 Git LFS 测试基线，只取源码可加 GIT_LFS_SKIP_SMUDGE=1）：

bash 复制代码 
git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes
bun install

另外，需要批量/服务器场景时，框架提供 Docker 渲染（render --docker）、AWS Lambda 分布式渲染（lambda deploy / render）与 HeyGen 云渲染（免本地 Chrome/FFmpeg）。普通创作者用不到，写给有自动化需求的读者。

六、使用详解：从零写出你的第一条视频

部署完成只是开始，HyperFrames 的真正门槛（也是乐趣）在「写合成」。好消息是：一条视频就是一个 HTML 文件，下面这份 10 秒中英双语片头，从空白到出片我们完整走了一遍，你可以直接拿去改。

6.1 先看懂「合成」的三个约定

约定一：用 data- 属性描述时间轴。 * 合成容器声明画布尺寸与总时长，每个可见元素加 class="clip" 和「什么时候出现、持续多久、在哪一层」：

html 复制代码 
<div id="root" data-composition-id="main" data-start="0" data-duration="10"
     data-width="1920" data-height="1080">
  <h1 id="title" class="clip" data-start="0" data-duration="10" data-track-index="0">HyperFrames</h1>
  <p id="subtitle" class="clip" data-start="0" data-duration="10" data-track-index="1">写 HTML，出视频</p>
</div>

约定二：动画必须是「可定位的」。 用 GSAP 创建一个暂停的时间轴 （paused: true），注册到 window.__timelines 上------渲染器会按帧去「seek」（定位）每一刻的画面，所以不要用随页面自动播放的动画：

html 复制代码 
<script>
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
tl.fromTo("#title",    { opacity: 0, y: 70 }, { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" }, 0.4);
tl.fromTo("#subtitle", { opacity: 0, y: 36 }, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 1.3);
window.__timelines["main"] = tl;
tl.seek(0);
</script>

时间轴按秒定位。下面的画面是标题进场后的状态（第 1.2 秒）------标题上浮渐入、副标题随后出现，全部由上面的时间轴控制：

约定三：字体必须声明。 凡是用到的字体（包括微软雅黑这样的系统字体）都要写一行 @font-face，渲染器才能保证画面字体稳定：

css 复制代码 
@font-face { font-family: "Microsoft YaHei"; src: local("Microsoft YaHei"); }

6.2 场景一：做一个中英双语片头（本文演示稿）

目标：10 秒、1920x1080，标题 + 副标题 + 渐变装饰线 + 页脚，依次进场。把下面这份完整合成另存为项目的 index.html（示例基于 GSAP，加载官方 CDN 脚本即可）：

html 复制代码 
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
  <style>
    html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; }
    @font-face { font-family: "Microsoft YaHei"; src: local("Microsoft YaHei"); }
    #root { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            font-family: Inter, "Microsoft YaHei", sans-serif;
            background: radial-gradient(1200px 700px at 50% 38%, #1b1b22 0%, #0a0a0a 62%); }
    #title { color: #f4f4f5; font-size: 120px; font-weight: 700; letter-spacing: -0.03em; }
    #subtitle { color: #a1a1aa; font-size: 40px; margin-top: 22px; }
    #rule { width: 420px; height: 6px; margin: 44px auto 0; border-radius: 3px;
            background: linear-gradient(90deg, #34d399, #60a5fa); }
    #footer { color: #5d5d65; font-size: 26px; margin-top: 120px; text-align: center; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="main" data-start="0" data-duration="10" data-width="1920" data-height="1080">
    <div style="text-align: center">
      <h1 id="title" class="clip" data-start="0" data-duration="10" data-track-index="0">HyperFrames</h1>
      <p id="subtitle" class="clip" data-start="0" data-duration="10" data-track-index="1">写 HTML，出视频 · 本地 CLI 一键渲染</p>
      <div id="rule" class="clip" data-start="0" data-duration="10" data-track-index="2"></div>
      <p id="footer" class="clip" data-start="0" data-duration="10" data-track-index="3">github.com/heygen-com/hyperframes</p>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    const tl = gsap.timeline({ paused: true });
    tl.fromTo("#title",    { opacity: 0, y: 70 }, { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" }, 0.4);
    tl.fromTo("#subtitle", { opacity: 0, y: 36 }, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 1.3);
    tl.fromTo("#rule",     { scaleX: 0 },         { scaleX: 1, duration: 1.1, ease: "power2.inOut" }, 1.9);
    tl.fromTo("#footer",   { opacity: 0 },        { opacity: 1, duration: 0.9, ease: "power2.out" }, 2.6);
    window.__timelines["main"] = tl;
    tl.seek(0);
  </script>
</body>
</html>

写完后依次跑：npx hyperframes lint（静态检查）→ npx hyperframes check（运行时 + 布局 + 对比度综合检查）→ npx hyperframes render。渲染过程中的完整画面（第 2.5 秒，装饰线展开、全部元素就位）：

成片最终状态（第 5 秒，含底部项目地址）：

6.3 场景二：数据视频 / 批量出片（一次写好，多次渲染）

把标题、数字这类会变的内容做成变量，渲染时传入不同数值，就能批量出片------每次「月度报告视频」「数据周报」都能自动生成：

bash 复制代码 
# 单次：用变量渲染
npx hyperframes render --variables '{"title":"六月数据报告","value":"58.2%"}'

# 批量：多行数据各渲染一份成片
npx hyperframes render --batch rows.json

6.4 场景三：给网站做一条宣传片

官方提供了「从网站捕获素材 → 生成宣传片」的工作流（配合 AI 助手使用最顺）：先捕获目标页面素材，再用 product-launch 工作流生成初版。手动路线则是：npx hyperframes capture <网址> 把页面截图/素材拉进项目，再按 6.2 的写法组织画面。

6.5 场景四：从组件库「拼装」效果

官方目录里有一批现成组件（转场、数据图表、社交贴片、字幕等），一条命令装进项目直接用：

bash 复制代码 
npx hyperframes add flash-through-white   # 闪白转场
npx hyperframes add data-chart            # 动态数据图表
npx hyperframes add instagram-follow      # 社交关注贴片

6.6 出片参数速览（常用就这几个）

参数 作用
--fps 30 帧率（默认取合成设置，否则 30）
`--quality draft looks
`--format mp4 webm
`--resolution landscape portrait
--workers 2 并行渲染线程（低配机保持自动即可）
--variables / --batch 变量与批量渲染（场景二）

七、踩坑与解决方案（7 个，按遇到顺序整理）

坑 1：首次自动下载渲染浏览器（chrome-headless-shell）特别慢

现象：运行体检或首次渲染时，浏览器下载长时间没进展（约 119MB）。

原因：默认从 Google 的 chrome-for-testing CDN 下载，国内直连速度差。

解决 ：① 让命令多跑一会儿，或中断后重跑------已下载的部分会被复用，第二次直接提示「Browser found」；② 速度太差时用 npmmirror 镜像手动下载同版本压缩包（地址：https://cdn.npmmirror.com/binaries/chrome-for-testing/152.0.7977.30/win64/chrome-headless-shell-win64.zip），解压到 %USERPROFILE%\.cache\hyperframes\chrome\chrome-headless-shell\win64-152.0.7977.30\ 目录即可；③ 或设置 HYPERFRAMES_BROWSER_PATH 指向自备 Chrome。

坑 2：全局安装后命令提示「找不到 hyperframes」

现象：npm i -g 显示安装成功，但 hyperframes 命令无法直接使用。

原因 ：Windows 上 npm 全局目录 %APPDATA%\npm 默认不在 PATH。

解决 ：Win 搜索「环境变量」→ 编辑用户变量 Path → 新增 %APPDATA%\npm → 重开终端；或者干脆继续用 npx。

坑 3：默认模板直接检查，报「时间轴未推进」

现象：刚 init 出来的空项目跑检查，报布局校验失败（Timeline did not advance under seek）。

原因：默认模板里的动画示例是注释状态，时间轴没有任何内容。

解决：按第 6 节的写法填入真实动画（暂停时间轴 + 逐帧可定位），检查全部通过。

坑 4：使用中文字体（或任何字体）被检查拦下

现象：检查报错「font_family_without_font_face: ... microsoft yahei」。

原因：渲染器要求字体确定性------合成里用到的每个字体家族（含系统字体）都必须有 @font-face 声明。

解决 ：补一行声明即可（系统字体无需字体文件）：@font-face { font-family: "Microsoft YaHei"; src: local("Microsoft YaHei"); }

坑 5：浅色小字对比度不够，检查不通过

现象：深色背景上的浅灰页脚被对比度检查拦下（2.56:1，低于 3:1 门槛）。

原因：工具链内置 WCAG AA 对比度标准（保证成片文字可读）。

解决：按提示把颜色调深即可（例如 #52525b → #5d5d65），再跑检查全绿。

坑 6：AI Agent 技能安装/更新失败（网络受限）

现象 ：执行 npx hyperframes skills update 报「can't check skills freshness (GitHub manifest unreachable)」。

原因：技能清单托管在 GitHub，国内网络不稳定。

解决：配置代理后重试；或改用 Claude Code 插件市场路线（由它的更新器管理）。CLI 宁可报错也不假装成功，属正常设计。

坑 7：低配电脑的内存与 C 盘空间

现象：8GB 内存机器体检提示「Low memory --- renders may fail」；渲染中间文件默认落在系统盘临时目录。

原因：逐帧渲染对内存有一定要求；帧缓存默认位置在系统 Temp。

解决 ：工具会自动对 ≤8GB 机器启用低内存模式（单线程 + 截图捕获），单条 10 秒 1080p 渲染 40 秒完成、无需干预；C 盘紧张时用环境变量 HYPERFRAMES_EXTRACT_CACHE_DIR 把缓存迁到大分区，或渲染时加 --frames-cache-dir off。

八、功能验证与真实运行结果

以下是在一台 Windows 轻薄本（i5 处理器 / 8GB 内存 / 核显）上完整部署后的实际运行情况：

  • 环境体检 ：doctor 逐项通过------Node v24、FFmpeg/FFprobe、渲染浏览器（自动管理）、磁盘 349GB 可用；
  • 综合校验 ：lint 0 错误 0 警告；check 布局 9 个时间点采样无问题、运动零错误、对比度 13/13 通过；
  • 视频渲染：10 秒 1920x1080 片头，输出 h264 MP4、30fps、444KB，总耗时 40 秒（含静态帧去重优化）；
  • 参数核验：ffprobe 显示时长 10.0s、分辨率与帧率与合成设置一致；抽帧检查各时间点画面与时间轴设计吻合；
  • GIF 输出：同一合成输出 GIF（15fps），720 宽优化版仅 166KB，适合做文章动图；
  • 定点截图 ：snapshot --at 0.2,5.0 输出指定时刻的帧画面与接触表，用于视觉核对；
  • 预览服务 ：preview 启动 Studio，本地服务响应正常，界面各功能区（画面预览、检查器、时间轴、导出）完整加载。

成片收尾状态（第 9 秒，标题保持、页脚项目地址常驻）：

九、常见问答（FAQ）

Q1：它完全免费吗？

本地使用完全免费：框架是 Apache-2.0 开源许可，CLI 与渲染不按次收费、可商用。可选的 HeyGen 云渲染、AWS Lambda 分布式渲染属于增值场景，个人创作与本地自动化无需付费。

Q2：需要会编程吗？

会一点 HTML/CSS 就能上手------视频就是一个网页。完全不会写代码也没关系：装好官方技能后，可以让 Claude Code、Codex 这类 AI 助手按你的描述代写合成，你负责提要求和验收。

Q3：支持中文和中文字体吗？

支持。合成里可以直接写中文文案；使用中文字体时按「坑 4」补一行 @font-face 声明即可，界面、字幕、双语排版都没有问题。

Q4：和剪映、Remotion 有什么区别？

剪映是手动剪辑（拖时间轴、加特效），适合一次性成片；HyperFrames 是代码化出片，适合「模板化、批量、可自动化」的场景，且同一输入永远渲染出同一结果。和同为代码化的 Remotion 相比，HyperFrames 写的是纯 HTML（无构建步骤），对人和 AI 助手都更轻。

Q5：渲染一条视频要多久？

与分辨率、时长、机器有关。本文的 10 秒 1080p 在 8GB 内存轻薄本上渲染 40 秒；一般短片 1-3 分钟。4K、长视频或复杂特效建议 16GB 以上内存。

十、总结

HyperFrames 把「做视频」这件事从「学剪辑软件」变成了「写一个网页」：三条命令完成初始化、预览、出片，环境只需要 Node + FFmpeg，渲染免费、结果确定。对内容创作者，它是「不剪辑也能出片」的新路径；对开发者，它是把数据、报告、发布流程自动化成视频的引擎；对 AI 工作流用户，它是一套现成的「出片技能包」。

部署本身几乎没有门槛（唯一要花时间的是浏览器下载与字体/对比度检查这两个「规矩」），真正值得投入的是它的创作面：组件库、变量批量、官网捕获与 AI 协作。如果部署中遇到别的问题，欢迎在评论区交流，卡在哪里都可以直接问我；后续我还会整理「用变量批量出数据周报视频」「把网站一键变成宣传片」的进阶玩法。还想看哪些「自动化出片 / 创意工具」的部署教程，留言告诉我，点赞高的优先安排。

完整命令速查

bash 复制代码 
# ① 环境验证（需先装好 Node ≥22 与 FFmpeg）
node -v
npm -v
ffmpeg -version

# ② 国内加速（可选，强烈建议）
npm config set registry https://registry.npmmirror.com

# ③ 环境体检（首次会下载 CLI 与渲染浏览器）
npx hyperframes doctor

# ④ 初始化视频项目
npx hyperframes init my-video
cd my-video

# ⑤ 编写合成后：静态检查 + 综合校验
npx hyperframes lint
npx hyperframes check

# ⑥ 本地预览（Studio 界面，默认 http://127.0.0.1:3002）
npx hyperframes preview

# ⑦ 渲染出片（默认 MP4；加 --format gif 出动图）
npx hyperframes render
npx hyperframes render --format gif --fps 15

# ⑧ 定点截图 / 帧核对（可选）
npx hyperframes snapshot --at 0.2,5.0
ffmpeg -y -ss 5 -i renders/xxx.mp4 -frames:v 1 frame_5s.png

# ⑨ 全局安装（可选，注意 %APPDATA%\npm 需在 PATH）
npm i -g hyperframes
hyperframes --version

# ⑩ 渲染浏览器管理（下载慢时看坑 1 的镜像方案）
npx hyperframes browser ensure
npx hyperframes browser path

本文涉及的命令均在 Windows 11 环境部署验证通过；CLI 版本 v0.8.119，其他版本命令基本一致。

项目地址：HyperFrames (https://github.com/heygen-com/hyperframes)

标签：HyperFrames | HTML转视频 | AI视频 | FFmpeg | Node.js | 开源工具 | 视频自动化 | Windows教程

相关推荐
JEECG低代码平台1 小时前
不买服务器也能异地组网：开源 P2WLAN 把两地电脑“插“进同一台路由器
运维·服务器·开源·开源软件
奈落241 小时前
DeepSeek Harness 开源贡献手记：从 Issue 认领到 PR 合入的完整实践
大数据·人工智能·安全·搜索引擎·开源
martindelophy1 小时前
用自然语言剪视频：我们在 Timeline Studio 中实现了 ChatCut 对话剪辑
android·音视频
特视界说2 小时前
没有完整 3D 模型，能做产品三维动画吗？
3d·微信·音视频·新浪微博
feasibility.2 小时前
一台 2500 美元的开源双足人形平台 LeRobot Humanoid，正在让“教机器人走路”变成可复现的事
机器人·开源
江湖有缘2 小时前
3开源Sqlite数据库管理工具整理合集，可Docker一键部署！
数据库·sqlite·开源
特视界说2 小时前
产品宣传动画和企业宣传片有什么区别，应该先做哪个？
微信·音视频·新浪微博·新人首发
bluebonnet272 小时前
【docker】容器内映射外部音频驱动
docker·容器·音视频
乌暮2 小时前
拆解网页的底层逻辑：用费曼学习法讲透 HTML 与 CSS
前端·css·学习·html
热门推荐
01历年考研数学一、数学二、数学三真题试卷及答案PDF02如何新建文件夹？ 电脑新建文件夹的4种方法03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）04Telegram APK 下载安装完整指南 — 2026年最新05GitHub 镜像站点06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新092026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享10给AI一张“业务概念地图“：本体如何从哲学走向企业智能