把 HTML 动画转成视频

粘贴代码或拖入文件，在浏览器里逐帧渲染，不上传任何内容。不用账号，没有水印，单段最长 2 分钟。

或者从示例开始：

代码要找 AI 写？

预览

粘贴代码后，动画会立即在这里播放。

渲染期间请让此标签页保持在前台。

下载
格式
画幅
秒

在你的设备上运行，文件不会被上传。

让 AI 直接写出可导出的版本

把这段话附在你的需求后面，或连同已有的代码一起发给 AI。这样得到的结果一次就能正常渲染。

三个步骤
  1. 1
    粘贴
    粘贴 HTML，或拖入 .html、.zip 文件。预览会立即开始。
  2. 2
    检查
    按发布的地方选择画幅。时长会从动画中读取，也可以自行修改。
  3. 3
    导出
    选择 MP4、GIF、透明 WebM 或 PNG 单帧，然后下载文件。
让 AI 直接写出可导出的版本
把这段话附在你的需求后面，或连同已有的代码一起发给 AI。这样得到的结果一次就能正常渲染。
请把这个动画改写成一个自包含的 HTML 文件，我要用 htmlto.video 把它导出成视频：
- 按 16:9 的画幅设计。画面必须正好铺满浏览器窗口（100vw × 100vh，不出现滚动）。所有尺寸都用 vw 和 vh，以便适配任意分辨率。
- 页面加载后自动开始播放，不需要鼠标、键盘或滚动操作。
- 时长固定。在第一行用注释写明时长，例如 <!-- duration: 8s -->。
- 动画用 CSS 动画、Web Animations API、GSAP，或使用时间戳参数的 requestAnimationFrame 来实现。不要使用 video、audio 或 iframe。
- 所有 CSS 和 JavaScript 都内嵌在 HTML 文件中。图片用内联 SVG 或 data URL 嵌入。字体和库只能来自允许跨域加载的 CDN，例如 Google Fonts、cdnjs 或 jsDelivr。
- 在一个代码块里回复完整的 HTML。
能渲染什么
  • CSS 动画和过渡
  • GSAP、anime.js、Motion 等 JavaScript 库
  • Canvas 2D
  • 用 CSS 或 JavaScript 驱动的 SVG 动画
  • WebGL 和 Three.js
  • Web Animations API 和 requestAnimationFrame
目前还做不到的
  • Safari、iPhone 和 iPad 无法导出，但可以预览。
  • 页面里的视频、音频和 iframe 不会包含在导出结果中。
  • 所在服务器禁止跨域读取的图片和字体会缺失。
  • 需要点击、悬停或滚动才会触发的动画不会推进。
  • 用 <animate> 等 SMIL 标签制作的 SVG 动画无法捕获。
  • 非常重的 WebGL 场景在较慢的电脑上可能失败。
该选哪种格式
MP4
用于社交平台、幻灯片和剪辑软件。H.264 编码，720p、1080p 或 4K，每秒 24、30 或 60 帧。哪里都能播放。
GIF
用于 README、文档、聊天和邮件。自动循环，不需要播放器。最好时长短、尺寸小。
透明 WebM
用于在剪辑软件里做叠加层：标题、下方字幕条、贴纸。页面背景保持透明。
PNG 单帧
你指定的那一刻的静态画面。用于缩略图和封面。
简要说明
htmlto.video 是一个免费的在线工具，可以把 HTML 动画转换成视频文件。它接受粘贴的 HTML、.html 文件和 .zip 压缩包，可导出 MP4（H.264，最高 4K、60 fps）、GIF、背景透明的 WebM，或单张 PNG 帧。渲染逐帧进行，并且在访问者的浏览器里完成：文件不会被上传，无论电脑快慢，帧率都是精确的。不用注册，没有水印，不收费。单个片段最长 120 秒（GIF 为 30 秒）。支持桌面端的 Chrome、Edge 和 Firefox，以及 Android 上的 Chrome。不支持 Safari，也不支持 iPhone 和 iPad；内嵌的视频、iframe，以及所在服务器禁止跨域访问的图片和字体都无法捕获。
常见问题
怎么把 ChatGPT 或 Claude 写的 HTML 动画转成 MP4？
复制助手写的 HTML，粘贴到本页顶部的输入框，检查预览，然后点击导出。渲染结束后 MP4 会自动下载。10 秒的动画通常不到一分钟就能完成。
我的文件会被上传到什么地方吗？
不会。页面在你自己的设备上渲染并编码视频。你的 HTML 和生成的文件都不会到达我们的服务器。
真的免费吗？有没有水印或时长限制？
免费，没有水印，也不用账号。单个片段最长 120 秒，GIF 最长 30 秒。
和录屏相比好在哪里？
录屏在电脑繁忙时会掉帧，会录进鼠标指针，画面大小也取决于窗口。这里的每一帧都是单独绘制的，尺寸和帧率与你选择的完全一致。
为什么在 Safari 或 iPhone 上用不了？
Safari 不允许网页把 HTML 内容读回成图像，而这种方法正依赖这一点。请在电脑上用 Chrome、Edge 或 Firefox 打开同一个链接。
视频里少了一张图片或一种字体，为什么？
该文件所在的服务器不允许其他网站读取。请把图片以 data URL 的形式嵌入 HTML，或改用允许读取的字体服务，例如 Google Fonts。
渲染需要多久？
取决于你的电脑和页面本身。一段 10 秒、1080p、每秒 60 帧的片段通常需要 20 到 40 秒。4K 和较重的 WebGL 会更久。
可以导出背景透明的视频吗？
可以。选择 WebM（透明），并且不要给页面设置背景。在支持带 alpha 通道的 WebM 的剪辑软件里，文件会保留透明通道。