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（透明），並且不要替頁面設定背景色。在支援含 Alpha 色版 WebM 的剪輯軟體裡，檔案會保留 Alpha 色版。