解決什麼

傳統影片製作依賴 After Effects 或 Premiere 等 GUI 工具,難以批次化和自動化。html-video 讓開發者用 HTML/CSS 程式碼描述影片內容,通過編碼智慧體(如 Cursor、Claude Code)自動填充資料和動畫,最終在本地渲染成真實的 MP4 檔案。核心場景包括:資料視覺化影片(如 NYT 風格圖表動畫)、產品宣傳片、程式碼演示、社交媒體短影片等需要程式化生成的內容。

專案由 Open Design 團隊開發,定位為"影片領域的元層框架"——不繫結單一渲染引擎,而是提供統一介面適配多種後端(Hyperframes、Remotion、Motion Canvas 等),開發者無需為每個引擎學習不同 DSL。

為何火

零按次收費:Apache-2.0 許可,本地渲染無雲服務依賴,對比 Remotion(4 人以上團隊需付費)有成本優勢
智慧體原生設計:直接對接 14 種主流編碼助手,可通過自然語言或貼上文章連結/GitHub 倉庫自動生成影片指令碼
模板即生產力:內建 21 套專業動畫模板(故障風格標題、液態漸變背景、打字機特效等),覆蓋常見商業場景
可插拔架構:統一 render(input, ctx) 介面,未來可無縫切換到 Motion Canvas(適合講解類影片)或 Manim(數學動畫)

專案上線 13 天即獲 2.4k stars,反映出開發者對"影片即程式碼"工具鏈的強烈需求。

核心功能

多引擎渲染:當前預設 Hyperframes 引擎(Chromium 無頭錄製 + ffmpeg 編碼 libx264),Remotion/Motion Canvas/Manim 介面卡已規劃
智慧體整合:自動檢測本地 PATH 中的 Windsurf CLI、Cursor Agent、Aider 等工具,可從頂欄切換
模板庫:21 套分類别範本(資料圖表、電影感光效、產品展示、片尾 Logo 卡等),單檔案 HTML 即可執行
AI 配樂:可選的智慧配樂和旁白生成(需 API 金鑰)
內容源靈活:支援從提示詞、網頁文章、GitHub 倉庫直接提取內容生成影片

安裝

# 克隆倉庫
git clone https://github.com/nexu-io/html-video.git
cd html-video

# 安裝依賴(需 Node.js 和 npm)
npm install

# 確保系統已安裝 ffmpeg 和 Chromium
# macOS: brew install ffmpeg chromium
# Ubuntu: apt install ffmpeg chromium-browser

啟動後通過命令列或 Web 介面選擇模板和智慧體,輸入內容描述即可渲染。

適合誰

內容團隊:需要批次生成社交媒體影片(如每日資料播報、產品更新)
開發者:構建自動化影片管道(CI/CD 生成釋出說明影片、API 文件動畫)
獨立創作者:預算有限但需要專業動效,不想按次付費給 Lumen5 或 Pictory
AI 應用開發者:將 LLM 輸出直接轉化為影片內容(如播客摘要、新聞聚合)

不適合需要複雜 3D 渲染或即時互動的場景(建議用 Blender 或 Unity)。

社群評價

暫無足量社群公開討論,以下為基於專案本身的中立評估:

技術亮點:架構設計清晰,將渲染引擎抽象為可插拔介面卡,避免供應商鎖定。Hyperframes 引擎已完整實現(Chromium + ffmpeg 管道),證明技術路徑可行。模板質量較高,覆蓋 NYT 資料新聞、故障藝術、電影感等專業風格。

潛在風險:專案僅上線 13 天,生態尚未成熟。Remotion/Motion Canvas 等熱門引擎的介面卡仍在規劃中,當前只能用 Hyperframes。19 個未關閉 issue 顯示早期使用者已遇到邊緣問題。AI 配樂功能依賴外部 API,成本和隱私需自行評估。

對比 Remotion:Remotion 擁有更成熟的 React 生態和雲渲染服務,但閉源且商業授權昂貴;html-video 完全開源且本地優先,適合預算敏感或需要資料隱私的團隊。

選型對比

維度	html-video	Remotion	Motion Canvas
許可	Apache-2.0 完全免費	原始碼可見但 4 人以上團隊需付費	MIT 開源
技術棧	HTML/CSS + 多引擎	React 元件	TypeScript Canvas
學習曲線	低(標準 Web 技術)	中(需熟悉 React)	中(生成器函式)
渲染位置	本地(Chromium/ffmpeg)	本地或雲端	本地(Canvas 匯出)
最佳場景	資料驅動影片、批次生成	複雜互動動畫	教學講解影片

取捨建議:若團隊已深度使用 React 且需要雲渲染,選 Remotion;若做數學/程式設計教學影片,Motion Canvas 更合適;若要零成本、多引擎靈活性和 AI 智慧體整合,html-video 是當前最優解。

已知坑

依賴本地環境:必須手動安裝 ffmpeg 和 Chromium,Windows 使用者可能遇到路徑配置問題
中文字型:預設模板使用西文字型,中文渲染需修改 CSS 並確保系統有對應字型檔案
渲染效能:Hyperframes 引擎通過逐幀截圖生成影片,複雜動畫可能耗時較長(官方未給出基準資料)
智慧體相容性:雖支援 14 種工具,但實際效果取決於各智慧體的 HTML/CSS 生成能力,可能需人工調整輸出
AI 功能成本:配樂和旁白依賴第三方 API(如 ElevenLabs),需自備金鑰且按用量計費

據 README,Remotion/Motion Canvas 介面卡尚未實現,當前只能用 Hyperframes 渲染。專案活躍但年輕,生產環境使用需做好備選方案。