嗨咿，我是illumi，昨天講到用AE輸出lottie，但帶有影片和圖片的Comp無法輸出怎麼辦，可以先輸出透明影片再轉成Webm！

1 . AE 後製處理

a. 去背 (Keying)

• 選擇一個方式去背
  1. 有綠/藍幕 → Keylight (1.2)（最穩）
  2. 沒綠幕、雜訊多 → Roto Brush 2 + Refine Edge（AI 自動邊緣）
  3. 黑/白底或高反差 → Luma Key
  4. 有乾淨底圖（clean plate）→ Difference Matte
• 之後補充AE 腳本自動化（如何用腳本批次處理去背或輸出，節省時間）

b. 輸出透明背景影片

WebM（VP9）可帶 Alpha，但 AE 原生沒有直出 WebM。常見做法是先輸出帶 Alpha 的中繼檔，再轉 WebM。

在 AE / Media Encoder：

• Composition > Add to Adobe Media Encoder Queue…
• 格式選帶有透明通道的，例如 QuickTime + ProRes 4444 或 GoPro CineForm（Channels: RGB + Alpha）。

可能想問為什麼不是 GIF？

• GIF 色彩少、檔案大 → 會有「超多雜點」
• 顏色豐富又大的影片實際輸出效果很可怕

2. 轉換成 WebM

• 用線上工具 / ffmpeg 把 MP4 → WebM

  • https://cloudconvert.com/mov-to-webm
    

• 什麼是WebM？

  • Google 開發、專為網路設計的開放原始碼媒體檔案格式
  • HTML5 影片的替代方案
  • 被Chrome、Firefox、Opera 等現代瀏覽器廣泛支援
  • 姐妹為WebP ：圖片的開放格式

  ⚠️不包括 Safari！！！ （也不包括Apple 手機、平板的各種瀏覽器），可說受害範圍非常廣

  假設 1 分鐘 1080p 影片

  • MOV (ProRes) → 約 1 GB
  • MP4 (H.264) → 約 300 MB
  • WebM (VP9/AV1) → 約 150 ~ 200 MB

  常見影片格式大小比較

3. 放到網頁

<video loop muted playsInline>
    <source
      src="/animation/sideVaporwave.mp4"
      type='video/mp4; codecs="hvc1"'
    />
    {/*  建議使用 webm */}
    <source
      src="/animation/sideVaporwave.webm"
      type="video/webm"
    />
</video>

下面：給Chrome / Firefox / Edge

上面：給Safari用（webm不相容，就算去背也會顯示沒去背的樣子），像是下圖(哭了）

那還有沒有其他方法可以讓透明影片用更小的方式呈現在Safari上呢？且聽下回分曉。