把 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 的剪輯軟體裡，檔案會保留透明色版。