短影音自動產製：從 HTML 模板到 FFmpeg 的完整技術流程
目錄
短影音的暴力效率
15 秒的影片，能傳達的資訊量遠超一段 200 字的文字。在 Instagram Reels、YouTube Shorts、TikTok 上，短影音的觸及率和互動率都是最高的內容格式。
問題是：製作一支短影音太耗時了。
用 Premiere Pro 或 CapCut 手動剪一支 15 秒的影片，從構思到完成至少要 30-60 分鐘。如果一天要發 3-5 支呢？
我們的解法：用程式自動產製。
系統架構總覽
Ultra Lab 的短影音自動產製系統分為三個階段：
HTML 動畫模板 → Playwright 擷取 → FFmpeg 合成
階段一：HTML 動畫模板
用網頁技術（HTML + CSS + JavaScript）製作影片的每一幀動畫。
為什麼用 HTML 而不是 After Effects？
- 可程式化：文字、數字、顏色都可以用變數控制
- 模板化：一個模板可以套用上百種不同的內容
- 不需要 Adobe 授權：開源技術，零成本
- 版本控制：模板就是程式碼，可以用 Git 管理
一個典型的模板結構：
<div class="video-container" style="width:1080px; height:1920px;">
<div class="background-animation">...</div>
<div class="text-layer">
<h1 class="hook-text">你知道嗎？</h1>
<p class="main-content">90% 的人不知道這件事...</p>
</div>
<div class="cta-layer">
<span>追蹤 @ultralab.tw</span>
</div>
</div>
CSS 動畫處理所有的進場、強調、轉場效果：
.hook-text {
animation: slideUp 0.6s ease-out 0.5s both;
}
.main-content {
animation: fadeIn 0.8s ease-out 1.5s both;
}
階段二：Playwright 擷取
Playwright 是一個無頭瀏覽器自動化工具。我們用它來：
- 開啟 HTML 模板頁面
- 等待動畫播放完成
- 逐幀擷取螢幕截圖（30 FPS = 每秒 30 張圖）
- 輸出為圖片序列
為什麼是 Playwright 而不是 Puppeteer？
- 支援更多瀏覽器引擎
- 對 CSS 動畫的渲染更精準
- 內建等待機制，不容易漏幀
每一幀是一張 1080×1920 的 PNG 圖片，一支 15 秒的影片大約產生 450 張圖。
階段三：FFmpeg 合成
FFmpeg 是影音處理的瑞士刀。我們用它把圖片序列合成為最終影片：
ffmpeg -framerate 30 -i frame_%04d.png \
-i background_music.mp3 \
-c:v libx264 -pix_fmt yuv420p \
-shortest output.mp4
在這個階段，我們同時加入：
- 背景音樂：從預設的音樂庫中自動選取
- 音效：文字出現時的提示音
- 字幕軌：自動生成的 SRT 字幕
三種心理觸發模板
我們設計了三類經過驗證的短影音模板，每類都對應不同的心理觸發機制：
恐懼型（Fear）
開場用令人擔憂的數據或事實，引發「我是不是也有這個問題？」的焦慮。
例如：
- 「90% 的人退休金不夠用」
- 「你的密碼可能已經被洩漏了」
效率型（Efficiency）
展示一個快速解決問題的方法，讓觀眾覺得「原來這麼簡單」。
例如：
- 「3 步驟自動化你的 IG 發文」
- 「這個工具讓我每天省 2 小時」
貪婪型（Greed）
展示潛在的收益或機會，引發「我也想要」的渴望。
例如：
- 「這個副業月入 5 萬」
- 「一個 SaaS 工具年營收 100 萬」
每類模板有 3-5 種視覺變化，總共 10-15 個模板可以輪替使用，避免觀眾看膩。
批量產製的工作流程
實際運作的完整流程：
- 每週一次：設定本週的主題和內容方向
- AI 自動生成：根據模板類型，用 Gemini 生成文案
- 自動套入模板：程式把文案塞進 HTML 模板（為什麼不讓 Gemini 直接寫 HTML？UltraSite 改版時比較過兩種做法）
- 批量擷取：Playwright 對每個模板逐一擷取
- 批量合成：FFmpeg 批次合成所有影片
- 排程發布：影片自動進入發布佇列
一次批量處理 20 支影片，大約需要 15-20 分鐘（取決於電腦效能）。影片進佇列之後，發布時段怎麼選、自動發到 IG 要注意哪些帳號安全事項，見IG Reels 從文案到自動發布的五個階段。
成本結構
| 項目 | 成本 |
|---|---|
| HTML 模板開發 | 一次性建置成本 |
| Playwright + FFmpeg | 開源免費 |
| AI 文案生成 | NT$300-500/月 |
| 伺服器 / 本機運算 | 現有設備即可 |
| 背景音樂授權 | 免費素材庫 |
| 月總成本 | NT$300-500 |
相比找外部團隊做一支短影音（NT$1,000-3,000/支），自動產製系統的成本是手動的 1/100。
適合誰？
- 品牌主：需要持續產出短影音但沒有剪輯團隊
- 自媒體經營者：一個人要管多個平台的短影音
- 行銷代理商：幫客戶批量製作短影音
- 電商賣家：產品展示、促銷倒數、開箱短影音
結語
短影音自動產製不需要你會 After Effects，也不需要昂貴的軟體授權。用 HTML + Playwright + FFmpeg 這套開源組合，就能建立一條高效率的短影音產線。
這條產線的每個環節都是開源工具，照上面的步驟就能自己搭起來。
常見問題
怎麼用程式自動產製短影音？
拆成三個階段：先用 HTML、CSS、JavaScript 做出影片每一幀的動畫模板，再用 Playwright 開啟模板、逐幀擷取截圖輸出成圖片序列，最後用 FFmpeg 把圖片序列合成為影片，同時加入背景音樂、音效與自動生成的 SRT 字幕軌。
做短影音動畫為什麼用 HTML，而不用 After Effects？
HTML 模板可程式化，文字、數字、顏色都能用變數控制；一個模板可以套用上百種不同的內容；用的是開源技術，不需要 Adobe 授權；模板本身就是程式碼，可以用 Git 做版本控制。
逐幀擷取影片為什麼選 Playwright 而不是 Puppeteer？
Playwright 支援更多瀏覽器引擎、對 CSS 動畫的渲染更精準，而且內建等待機制，不容易漏幀。以 30 FPS 擷取時，每一幀是一張 1080×1920 的 PNG，一支 15 秒的影片大約產生 450 張圖。
自動產製短影音一個月要花多少錢？
月總成本約 NT$300-500，主要是 AI 文案生成的費用。Playwright 與 FFmpeg 開源免費，背景音樂用免費素材庫，運算用現有設備即可。相比找外部團隊做一支短影音要 NT$1,000-3,000，成本約是手動的 1/100。
批量產製 20 支短影音要多久？
一次批量處理 20 支影片大約需要 15-20 分鐘，取決於電腦效能。流程是每週設定一次主題，用 Gemini 依模板類型生成文案，程式把文案套入 HTML 模板，再由 Playwright 批量擷取、FFmpeg 批次合成，最後自動進入發布佇列。