MP4
发社交平台、放进幻灯片或剪辑软件都合适。H.264 编码，720p、1080p 或 4K，每秒 24、30 或 60 帧，绝大多数平台和软件都能直接使用。
三步完成
- 1
粘贴
粘贴 HTML，或者拖入 .html、.zip 文件，预览马上开始。
- 2
检查
按要发布的平台选画幅。时长会自动从动画里读出来，也可以自己改。
- 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 场景在较慢的电脑上可能会失败。
选哪种格式
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？
复制 AI 写的 HTML，粘贴到本页顶部的输入框，确认预览没问题后点击导出。渲染完成后 MP4 会自动下载。10 秒的动画一般不到一分钟就好。
我的文件会上传到哪里吗？
不会。渲染和视频编码都在你自己的设备上完成，你的 HTML 和生成的文件都不会经过我们的服务器。
真的免费吗？有没有水印或时长限制？
免费，没有水印，也不用注册账号。单段最长 120 秒，GIF 最长 30 秒。
和录屏比有什么好处？
录屏在电脑忙的时候会掉帧，会把鼠标指针录进去，画面大小也受窗口限制。这里每一帧都是单独画出来的，尺寸和帧率和你选的完全一致。
为什么在 Safari 或 iPhone 上用不了？
Safari 还不支持逐帧捕获网页画面所需的浏览器功能，所以没法导出。请在电脑上用 Chrome、Edge 或 Firefox 打开同一个链接。
视频里少了一张图片或一种字体，是什么原因？
这个文件所在的服务器不允许其他网站读取。可以把图片用 data URL 嵌进 HTML，或者换一个允许读取的字体服务，比如 Google Fonts。
渲染要多久？
取决于你的电脑和页面本身。一段 10 秒、1080p、每秒 60 帧的片段，一般要 20 到 40 秒。4K 和较重的 WebGL 会更久。
能导出透明背景的视频吗？
可以。选择 WebM（透明），并且不要给页面设背景色。在支持透明通道 WebM 的剪辑软件里，透明效果会保留下来。