HTML 轉 MP4，需要先把網頁在不同時間的畫面擷取成影格，再編碼成影片。第一次先用固定尺寸、可指定時間的短動畫驗證整條流程，不要一開始就錄製含登入、互動與外部素材的完整網站。
網頁在瀏覽器裡會動，不代表輸出影片就會正確。字型晚載入、動畫時間不一致或畫面比例改變，都可能讓成片與你看到的頁面不同。我建議先做一個六秒鐘的小範例，把問題拆成畫面、時間與編碼。
先決定要錄操作，還是輸出固定動畫
| 你要的結果 | 適合的起點 |
|---|---|
| 保留滑鼠、捲動與現場操作。 | 螢幕錄影；重點是操作順序與播放環境。 |
| 每次輸出相同的動畫，控制尺寸與時間。 | 可指定時間的瀏覽器渲染，再組合影格。 |
| 從文章或想法生成完整動畫影片。 | 另加腳本與動畫製作階段，不能把它和轉檔視為同一件事。 |
本篇只處理第二種：將自製 HTML 動畫輸出成沒有音軌的 MP4。示例採 Playwright 擷取畫面、FFmpeg 編碼；它不是通用網站錄製器，也不是 nexu-io/html-video 的安裝教學。
把第一個範例限制在六秒與一個移動物件
教材包含 demo.html 和 render.cjs。HTML 使用本機字型與一個簡單方塊，沒有外部圖片、音訊或登入資料。渲染器固定為 960 × 540、每秒 24 格、總長六秒，因此預期產生 144 張 PNG。
執行環境需要 Node.js、Playwright 對應的 Chromium 與 FFmpeg。先以 node --version、ffmpeg -version 確認既有環境，不重複安裝。以下安裝指令只用於新的練習資料夾；下載相依套件及瀏覽器需要網路與磁碟空間。
npm init -y npm install playwright npx playwright install chromium node render.cjs
Node.js 與 FFmpeg 的安裝方式依作業系統而異；請從官方來源取得，不直接執行來歷不明的整合安裝腳本。若系統找不到 FFmpeg，先修正安裝或 PATH，再重跑輸出。
每一格都指定時間，不靠等待猜進度
第零格對應零秒，第一格對應 1/24 秒。教材把 Web Animations API 動畫暫停，再逐格指定 currentTime 後擷取畫面，最後依連續編號交給 FFmpeg。
這個方法只控制教材中的動畫。若自己的網頁使用 JavaScript 計時器、Canvas、影片播放或網路即時資料，必須另外提供可重現的時間控制；不能期待同一段擷取程式自動管理所有內容。
也不要為了截圖清楚而讓所有動畫直接跳到結尾。你需要的是時間序列中的每一格，不是 144 張相同的完成畫面。
把影格編成影片，再查實際輸出
教材用連號 PNG 作為輸入，FFmpeg 以 H.264 編碼成 MP4，採 yuv420p 像素格式，並將播放需要的容器資訊前移。這是相容性選擇，不保證每個播放器都支援；本示例沒有加入音軌。
ffmpeg -n -framerate 24 -i frames/%04d.png -c:v libx264 -pix_fmt yuv420p -movflags +faststart demo.mp4 ffprobe -v error -show_entries stream=codec_name,width,height,r_frame_rate,nb_frames -show_entries format=duration -of json demo.mp4
-n 讓已存在的輸出檔案造成停止，避免直接覆寫。教材渲染器也要求使用新的輸出資料夾；第二次測試時改用新的名稱，比在不確定內容時刪除整包檔案更容易追溯。
檔案能開，不代表動畫已經正確
- 確認實際寬高為 960 × 540、時長六秒、影格率 24 fps，預期影格數 144。
- 檢查開頭、中間與結尾，確認方塊位置隨時間改變，沒有全部停在第一格。
- 完整播放一次，查看是否閃爍、裁切或文字缺字；縮到手機尺寸時也應辨識得出主要內容。
- 要加音軌時，另外核對音訊長度與對齊，不把無聲示例當成完整影音交付。
如果尺寸與時長正確，畫面卻不動，先查動畫是否真的被時間控制；文字異常則先查字型和資源載入。只有當這個小例子能穩定輸出，才把自己的版面放進來，一次增加一種複雜度。
教材與驗證範圍
下載本頁附帶的自製教材，依相同條件測試。技術依據為 Playwright 截圖文件與 FFmpeg 官方文件，於 2026-09-14 核對。相關工具定位另見 HTML Video 工具介紹。教材的本機執行結果另附驗證紀錄，不代表任意網頁或第三方工具都已通過測試。