跳过主要内容

HTML TO VIDEO

HTML 转视频：把 HTML 和网页渲染成 MP4

「HTML 转视频」其实是两件事：你手里有一段 HTML 或 CSS 动画，想导出成 MP4；或者你有一个网页、一篇博客，想做成讲解视频。Claude Motion 在开源 HTML 渲染器 HyperFrames 上把两件事都做了，在 Claude Code 或 Codex 里就能用。

渲染第一个视频看渲染样片

在你自己的电脑上渲染 · Claude Motion 独立运营，与 Anthropic、HeyGen 均无关

使用 Claude Motion 必须订阅付费的 Creator 或 Studio 套餐，不提供 Free 免费版。

INDEX.HTML → HYPERFRAMES → RENDER.MP4

文字

标题重点提示

图表

自然搜索柱状图渠道筛选

交互

小测验拖拽配对

音频

配乐 · 旁白

HTML、CSS、JS 进 · MP4 出 · 默认 1920×1080、30 FPS · 由 HYPERFRAMES 渲染

为什么录屏不够用

录制浏览器标签页，录到的是页面实时画出来的东西。电脑一卡就掉帧；定时器和 CSS 动画会和音乐对不上；想重做一个场景，只能整段重录。逐帧渲染反过来做：把页面定位到每个精确时间点，截下这一帧，再用 FFmpeg 把所有帧合成 MP4。

  • 每次结果一致

    每一帧都在确定的时间点绘制，两次渲染完全相同。

  • 不掉帧

    机器慢只是渲染得慢，成片依然流畅。

  • 声画同步

    旁白和音乐与画面在同一条时间线上。

开始使用
录屏逐帧渲染
计时方式真实时钟逐帧定位
掉帧可能不会
重做一个场景整段重录改完重新渲染
声画同步手动对齐同一条时间线
输出屏幕上碰巧画出的内容MP4，1920×1080，30 fps

把 HTML 动画导出成 MP4

HyperFrames 把普通 HTML 页面当作视频：每个片段带开始时间和时长，动画跟着时间线走，而不是跟着时钟走。你的 agent 会写出这样的页面，或改造你现有的页面，然后在你自己的电脑上用无头 Chrome 和 FFmpeg 渲染。

  • 用你熟悉的 Web 技术

    HTML、CSS、SVG、图表，以及 GSAP 这类可定位播放的 JS 动画。

  • 在时间线上编辑

    渲染前在 HyperFrames Studio 里移动、裁剪片段。

  • 按可定位播放来写

    靠 setTimeout 或循环 CSS 驱动的动画需要改成跟随时间线，agent 会替你改。

带实时特效、自动播放视频或实时数据的现成页面，不能原样渲染，agent 会把这些部分改造成带时间的片段。

看样片

渲染前检查

  1. 01每个场景都是带开始时间和时长的片段。
  2. 02动画由时间线驱动，不依赖定时器。
  3. 03字体和图片是本地文件，或在第一帧前加载完。
  4. 04已装 Node.js、Chrome 和 FFmpeg（setup 会补齐缺的）。

把网页做成讲解视频

如果你手里是一篇博客或文章，而不是一段动画，把链接或另存的 .html 文件交给 agent。Claude Motion 只保留正文，去掉导航、页脚和分享按钮，下载图片，再按一种动效风格把标题、要点和数字排成场景。需要的话加上旁白和音乐，然后渲染 MP4。

  • 链接或另存文件

    公开的 https:// 网页和另存的 .html 都行。

  • 数字变成图表

    表格和数字保留原文出处，并做成动画。

  • MP4 加网页版

    渲染视频，或用链接分享可交互的网页版。

需要登录、付费墙后面的页面，或重度依赖前端渲染的应用，可能读不到；可以另存为 .html 或直接粘贴正文。创建、渲染、配音和分享需要 Creator（$19.9/月）或 Studio 计划。

转换网页

文字

标题重点提示

图表

自然搜索柱状图渠道筛选

交互

小测验拖拽配对

音频

配乐 · 旁白

由 HTML 渲染成的视频

每张卡片都是 agent 按简报写出的 HTML 作品，再用 HyperFrames 渲染成 MP4。

打开样片库

在普通 HTML 渲染之上多了什么

  • 动效风格

    选一种风格，或让 agent 自由设计。

  • 动态图表

    内置 ECharts，配色跟随风格。

  • 网页导入

    支持链接和另存的 .html，只取正文。

  • HyperFrames 时间线

    编辑片段、时间和积木。

  • 旁白

    按场景配好的配音。

  • 音乐

    现在生成，或以后再加。

  • 分享链接

    分享可交互的 HTML，公开或加密码。

  • MP4 渲染

    本地渲染，结果确定。

用 Claude Motion 三步把 HTML 渲染成视频

  1. 1把安装指南里的一行安装命令粘贴到 Claude Code 或 Codex。
  2. 2把你的 HTML、网页链接或一段简报交给 agent，选一种动效风格。
  3. 3在 HyperFrames 时间线上检查，然后渲染 MP4 或分享链接。
安装 Claude Motion：运行 npx -y claudemotion@latest setup，并按输出提示完成。

第一次运行会打开浏览器登录，点一下就好，不用碰终端。

常见问题

怎么把 HTML 转成 MP4？

用能逐帧定位页面的渲染器，比如 HyperFrames，而不是录屏。页面需要由带时间的片段组成，动画跟随时间线。用 Claude Motion 时，agent 会写好或改造页面，并替你执行渲染。

CSS 动画能导出成视频吗？

能，前提是动画跟随时间线。循环的 CSS keyframes 和 setTimeout 按真实时钟运行，渲染前 agent 会把它们改成带时间的片段，或 GSAP 这类可定位播放的动画。

任何网站都能做成视频吗？

大多数公开文章和博客的内容都能做成讲解视频。完整的交互式 Web 应用、需要登录的页面或实时数据不能原样渲染；可以另存页面、粘贴正文，或直接描述要展示什么。

HyperFrames 免费吗？

免费。HyperFrames 以 Apache-2.0 开源，在你自己的电脑上渲染，不用 Claude Motion 也能单独使用；Claude Motion 在它之上加了动效风格、网页导入、旁白、图表和分享链接。

输出的分辨率和帧率是多少？

Claude Motion 的作品默认 1920×1080、30 fps。渲染质量分 draft、standard、high 三档，在速度和画质之间取舍。

继续了解

把你的 HTML 或网页渲染成 MP4

立即获取 Claude Motion