如果你正在找 HTML 轉影片工具，html-video 可以在本機把 HTML 動畫實際輸出成 MP4。你可以提供影片描述，文章網址，GitHub 專案或既有 HTML，讓 coding agent 組成多個動畫畫面，再由無頭瀏覽器逐幀擷取並交給 ffmpeg 編碼。 html-video 匯出仍是模板文字？先比對預覽與渲染輸入 旁白與畫面切換不同步？用音檔時長排場景時間表
它能替你完成什麼
它把內容規劃，HTML 動畫與影片渲染接成同一條流程。官方提供多種標題，資料圖表，產品展示，動態字體與片尾模板，適合製作短篇解說，產品介紹，資料故事或程式專案摘要。
目前可實際執行的主要引擎是 Hyperframes，使用 HTML，CSS 與 GSAP 製作動畫，再透過 headless Chromium 和 ffmpeg 輸出 H.264 MP4。這個輸出步驟是它與一般「請 AI 寫影片腳本」最大的差別：最後會得到可播放的影片檔，而不只是分鏡或程式碼片段。
你需要準備什麼
- 想傳達的內容，資料，品牌素材與預期片長。
- 支援此流程的本機 coding agent。
- 能執行 Chromium 與 ffmpeg 的開發環境。
- 可合法使用的圖片，音樂，字型和 Logo。
第一次怎麼使用
先備妥 Node.js 20 以上、pnpm 9 以上、FFmpeg 與 Chromium。從官方倉庫下載或 clone 後，在倉庫根目錄依序執行：
pnpm install
pnpm -r build
node packages/cli/dist/bin.js doctor
node packages/cli/dist/bin.js studio
doctor 可查看偵測到的 agent 與渲染引擎；Studio 預設入口為 http://127.0.0.1:3071。若缺 Chromium，可執行 npx playwright install chromium。所選 agent 可能另需安裝、登入或付費。先做一段無音訊 MP4，核對尺寸、時長與動畫是否符合設定。
以上依 2026-10-10 查核的官方快照 README 整理，本站尚未實測這組啟動流程。
先從官方現有模板選一個接近需求的形式，不要一開始就建立完整自訂引擎。提供文字，畫面比例，片長與必要素材後，先在瀏覽器確認動畫節奏及文字是否超出畫面，再渲染短片段。短片段通過後才輸出完整 MP4，能降低長時間渲染後才發現錯字或破版的成本。
中文影片要額外檢查字型是否存在，換行是否自然，以及粗體字重是否正確。若加入音訊，還要確認授權，音量，時間軸和輸出檔的聲畫同步。
哪些情況不適合
它不是即時剪輯器，也不會自動理解所有文章重點。內容選擇，敘事順序與品牌判斷仍需要人決定。大量真人素材剪接，複雜 3D，精細角色動畫與需要逐格手修的作品，可能更適合專業剪輯或動態設計軟體。
官方已明確區分可用功能與 roadmap：Hyperframes 引擎已接通，Remotion，Motion Canvas，Revideo 與 Manim 等 adapter 仍屬規劃或研究。不能把未完成的引擎寫成現有能力。渲染速度與穩定度也會受到字型，瀏覽器，GPU，ffmpeg 與頁面程式碼影響。
來源與授權
本頁介紹 Open Design team 的 nexu-io/html-video，專案採 Apache License 2.0。官方目前以倉庫持續開發，使用前可先查看 GitHub Releases 是否已有可鎖定版本。模板與相依素材可能另有標示，實際再利用前應同時檢查 attribution 文件及輸入素材授權。