html-video：Open Design團隊開源的HTML版剪映，讓Agent用HTML生成專業級影片
更新時間:2026-10-16 05:31:29 釋出時間:133天前 閱讀:96 views次html-video 是 Open Design 團隊開源的 HTML 版剪映，基於 hyperframes 框架構建。工具讓 Agent 透過編寫 HTML 即可生成世界級水準的產品宣傳、知識解說等影片，內建 20 餘套頂級模板，支援分頁編輯、多尺寸匯出與 AI 配音配樂，無需 API Key 即可本地執行，將影片創作的門檻從專業軟體操作降低為程式碼編寫。
html-video是什麼：Agent原生的HTML影片生成引擎
html-video 是 Open Design 團隊開源的 HTML 版剪映，基於 hyperframes 框架構建。工具讓 Agent 透過寫 HTML 可生成世界級水準的產品宣傳、知識解說等影片，內建 20 餘套頂級模板，支援分頁編輯、多尺寸匯出與 AI 配音配樂，無需 API Key 可本地執行。
html-video的主要功能
- 模板化影片生成：內建 20 多套頂級 HTML 影片風格模板，覆蓋產品宣傳、知識解說、資料視覺化等場景，Agent 可直接呼叫生成動態 MP4。
- 分頁編輯與預覽：Studio 編輯器支援分頁預覽、分頁編輯和幀級文字修改，無需反覆匯出檢視效果，修改效率大幅提升。
- 多尺寸適配：一鍵切換橫屏、豎屏、方形、小紅書等主流影片規格，適配全平臺分發需求。
- Agent 無縫接入：自動識別本地多種 Code Agent CLI，包括 Codex、Claude Code、Hermes、Cursor Agent 等，頂部欄一鍵切換，零配置即用。
- AI 配音配樂：已接入語音合成服務，支援根據影片內容自動生成旁白配音與背景音樂，Token 消耗低，成本可控。
如何使用html-video
- 克隆倉庫：從 GitHub 拉取 html-video 開源專案到本地。
- 安裝依賴：執行安裝命令，配置本地環境，無需申請任何 API Key。
- 啟動 Studio：開啟本地視覺化編輯器，瀏覽 20 餘套內建模板並選擇適合的風格。
- 輸入內容：將網站連結、檔案或文章等內容交給 Agent，自動生成 HTML 影片指令碼。
- 分頁精修：在 Studio 中逐頁預覽、編輯文字與畫面，實時調整細節。
- 匯出 MP4：確認無誤後一鍵匯出高畫質影片，或直接生成配音配樂後下載。
html-video的核心優勢
- 本地優先，零 API 成本：完全本地執行，不依賴雲端 API Key，資料隱私有保障，長期使用成本極低。
- Agent 原生設計：專為 Code Agent 工作流打造，支援主流 CLI 工具一鍵切換，讓 AI 自動完成從內容到影片的全鏈路。
- HTML 驅動，極低成本：用 HTML 和 CSS 替代傳統影片工程，數萬行程式碼即可實現專業級體驗，技術門檻與維護成本遠低於專業影片軟體。
- 實時迭代，所見即所得：分頁編輯模式支援逐幀修改與實時預覽，避免傳統影片工具反覆渲染的低效迴圈。
html-video的技術原理
- hyperframes 渲染引擎：基於 hyperframes 框架構建，將 HTML 和 CSS 頁面渲染為影片幀序列，實現從網頁到影片的無縫轉換。
- 分頁編輯架構：Studio 編輯器將影片按頁組織，每頁對應獨立的 HTML 片段，支援幀級文字修改和獨立預覽，編輯操作即時響應。
- Agent 識別與適配層：自動掃描本地環境中的 Code Agent CLI 工具，透過統一的介面抽象層實現與多種 Agent 工具的相容適配。
- 多尺寸渲染管線：透過 CSS 媒體查詢和視口適配技術，一鍵切換不同寬高比的渲染輸出，適配多平臺分發需求。
html-video的同類競品對比
我們將 html-video 與 FireRed-OpenStoryline 進行對比，其在 Agent 原生設計和零成本本地執行上具有顯著優勢：
| 維度 | html-video | FireRed-OpenStoryline |
|---|---|---|
| 核心定位 | HTML 版剪映，Agent 原生影片生成 | 具備導演思維的對話式 AI 影片剪輯 Agent |
| 技術架構 | hyperframes 加 HTML/CSS 渲染引擎 | MoviePy 加 FFmpeg 加 LangChain 加 MCP 協議 |
| 互動方式 | Studio 視覺化編輯器加 Agent CLI 程式碼驅動 | 自然語言對話加 Web 介面實時互動 |
| 素材來源 | 使用者輸入加 20 餘套內建模板 | 自動線上搜尋加使用者上傳素材 |
| 編輯粒度 | 分頁預覽加幀級文字編輯 | 對話式精修，包括剪短、替換、重組、調色 |
| AI 能力 | 模板化生成、語音合成配音配樂 | 智慧指令碼生成、語音識別粗剪、AI 轉場、風格仿寫 |
| Agent 整合 | 原生支援多種 CLI，包括 Codex、Claude Code、Cursor 等 | 透過 Skills 接入多種 Agent |
| 本地與雲端 | 本地優先，核心功能零 API Key | 本地部署，需配置 LLM API Key |
| 硬體要求 | 普通筆記本即可執行 | 無需 GPU，CPU 即可跑通核心邏輯 |
| 模板與技能 | 20 餘套內建 HTML 影片模板 | 剪輯 Skill 沉澱，節奏、色調、轉場風格複用 |
| 輸出格式 | MP4 多尺寸，包括橫屏、豎屏、方形 | 自定義解析度影片 |
| 開源協議 | Apache 2.0 | Apache 2.0 |
html-video 的獨特價值在於其 Agent 原生設計和本地零成本執行能力，讓開發者可以直接用 HTML 程式碼驅動影片生成，更適合批次內容生產和自動化工作流場景。
html-video的應用場景
- 知識博主內容量產：將文章、技術文件自動轉為帶配音的知識解說影片，適配小紅書、B站等多平臺規格。
- 產品宣傳影片：輸入產品官網連結，Agent 自動提取賣點並生成動態產品展示影片，適合初創團隊快速製作營銷物料。
- 資料視覺化報告：將結構化資料轉化為動態圖表影片，用於彙報演示、社交媒體傳播，避免靜態圖表的枯燥感。
- 電商內容創作：批次生成商品介紹、使用教程等短影片，配合 AI 配音，實現低成本、高效率的內容矩陣運營。
html-video總結
html-video 作為 Open Design 團隊開源的專案，透過將影片生成簡化為 HTML 編寫，並深度融合 Agent 工作流，開創了一種全新的影片創作正規化。其本地優先、零 API 成本的架構設計，加上 20 餘套內建模板和分頁編輯能力，使得批次影片內容生產變得高效且經濟。在 AI 影片生成日益普及的今天，html-video 為開發者和內容創作者提供了一個兼具靈活性、可控性和成本優勢的開源選擇，尤其適合需要規模化內容產出的團隊和個人。
