Communitygithub.com

kuzeyozel-1/remotion-video-pipeline

使用 Remotion 從原始手機/攝影機素材製作短影音宣傳片(垂直 9:16 Reels、16:9 網站廣告),包含代理產生、挑選片段用的聯絡表、品牌主題設定,以及節省大量時間的渲染陷阱處理。

remotion-video-pipeline 是什麼?

此技能提供一套完整的 Remotion 影片管線,專為快速產出品牌宣傳短片而設計。它能自動化處理原始素材的盤點、代理檔案產生與聯絡表建立,讓使用者無需猜測即可精準選取影片片段。透過預先配置的渲染設定與常見陷阱的解決方案(如土耳其語大寫問題、ffmpeg stdin 衝突、HEVC 輸出相容性),大幅降低開發與除錯時間。支援 Claude Code、Coder、Codex 等 AI 代理工具,適合需要批次產出品牌影片的開發者與行銷團隊。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kuzeyozel-1/vinci-skills/tree/main/skills/remotion-video-pipeline

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Remotion 影片管線

真實素材 + 程式繪製排版 = 無錯字且可重複編輯的品牌影片。

管線

  1. 盤點原始片段:scripts/inventory.sh <raw-dir> > index.tsv(id、路徑、時長、解析度)。
  2. 代理檔案:scripts/make-proxies.sh index.tsv proxy/ 建立 1080 寬、30 fps、all-intra-ish H.264(-g 15)的副本(不含音訊)。在代理檔案上編輯與渲染;4K/HEVC 原始檔會讓 Remotion 搜尋緩慢,甚至導致 Chrome 當機。
  3. 看圖選片段,而非猜測:scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpg 每秒一格,以網格方式輸出。打開聯絡表,記下每個剪輯的開始秒數。
  4. 構圖於 template/(複製它):Footage(修剪、縮放的片段)、Scrim(漸層遮罩以確保文字可讀)、Line(動畫文字)。每個輸出一個構圖(例如 Main 30 秒、Teaser 9 秒、Spot16x9 20 秒)。
  5. 渲染:npx remotion render <CompositionId> out/<name>.mp4。設定檔已設定 H.264、CRF 17、yuv420p。
  6. 驗證:提取 3 張靜態畫面(ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png)並檢視;確認時長及音訊政策(無聲或音樂)符合客戶預期。

常見陷阱(每個都浪費過時間)

  • 在根元素設定 lang="tr"(或正確的語言);否則 CSS text-transform: uppercase 會將土耳其語的 i 轉成 I(MAKINASI、TEKLIF)。建議直接在字串中輸入最終大小寫。
  • ffmpeg 在 while read 迴圈內會吞掉 stdin:務必加上 -nostdin。
  • zsh 與 bash 的分詞行為不同:set -- $p 和 $2:s 會出錯。腳本請使用 #!/usr/bin/env bash。
  • 許多 ffmpeg 編譯版本沒有 drawtext。請在 Remotion 中繪製文字,絕不在 ffmpeg 中處理。
  • 基於 HTML 的渲染器(例如 Hyperframes)可能在各場景之間留下「暗淡」的疊加圖層;請同時為場景淡入淡出加上明確的不透明度動畫。請在前景執行此類渲染(背景 nohup 執行會被取消),並使用 ffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4 轉換 HEVC 輸出。
  • 手機素材旋轉:檢查 ffprobe 旋轉標籤;直式片段在橫式構圖中需要 objectFit: cover 加上明確裁切。
  • 僅描述素材中顯示的內容。請勿在畫面文字中虛構規格、容量或價格。
  • 將客戶檔案與你發佈的儲存庫分開;素材和標誌屬於客戶。

請參閱 references/checklist.md 獲取交付檢查清單。

相關技能