html-video：把 HTML，文章或資料做成 MP4 影片

如果你正在找 HTML 轉影片工具，html-video 可以在本機把 HTML 動畫實際輸出成 MP4。你可以提供影片描述，文章網址，GitHub 專案或既有 HTML，讓 coding agent 組成多個動畫畫面，再由無頭瀏覽器逐幀擷取並交給 ffmpeg 編碼。

它能替你完成什麼

它把內容規劃，HTML 動畫與影片渲染接成同一條流程。官方提供多種標題，資料圖表，產品展示，動態字體與片尾模板，適合製作短篇解說，產品介紹，資料故事或程式專案摘要。

目前可實際執行的主要引擎是 Hyperframes，使用 HTML，CSS 與 GSAP 製作動畫，再透過 headless Chromium 和 ffmpeg 輸出 H.264 MP4。這個輸出步驟是它與一般「請 AI 寫影片腳本」最大的差別：最後會得到可播放的影片檔，而不只是分鏡或程式碼片段。

你需要準備什麼

• 想傳達的內容，資料，品牌素材與預期片長。
• 支援此流程的本機 coding agent。
• 能執行 Chromium 與 ffmpeg 的開發環境。
• 可合法使用的圖片，音樂，字型和 Logo。

第一次怎麼使用

先從官方現有模板選一個接近需求的形式，不要一開始就建立完整自訂引擎。提供文字，畫面比例，片長與必要素材後，先在瀏覽器確認動畫節奏及文字是否超出畫面，再渲染短片段。短片段通過後才輸出完整 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 文件及輸入素材授權。