Remotion LabRemotion Lab
›渲染›透明影片

透明影片

渲染含有 alpha 通道（透明背景）的影片。

什麼時候需要透明影片？

透明影片適用於需要疊加在其他內容上的場景：

  • 動態 Logo 浮水印
  • 動畫貼圖
  • 特效覆蓋層
  • 後製合成素材

確保背景透明

你的 Composition 不能設定 backgroundColor：

// ✅ 透明背景
export const Overlay: React.FC = () => {
  return (
    <AbsoluteFill>
      <h1 style={{ color: "white", fontSize: 72 }}>浮水印</h1>
    </AbsoluteFill>
  );
};
 
// ❌ 有背景色就不透明
export const NotTransparent: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#000" }}>
      <h1 style={{ color: "white", fontSize: 72 }}>浮水印</h1>
    </AbsoluteFill>
  );
};

渲染方式

ProRes 4444（推薦用於 macOS / 後製）

npx remotion render MyComp out/overlay.mov --codec=prores --prores-profile=4444

VP9 WebM（推薦用於網頁）

npx remotion render MyComp out/overlay.webm --codec=vp9

比較

格式優點缺點
ProRes 4444 (MOV)品質極高、後製軟體相容檔案非常大
VP9 (WebM)檔案小、網頁可用部分軟體不支援

注意：H.264 (MP4) 不支援透明背景。

Node.js API

await renderMedia({
  composition,
  serveUrl: bundled,
  codec: "prores",
  proResProfile: "4444",
  outputLocation: "out/overlay.mov",
});

在網頁中使用透明 WebM

<video
  src="overlay.webm"
  autoplay
  loop
  muted
  style="position: absolute; top: 0; left: 0;"
></video>

WebM 透明影片可以在 Chrome 和 Firefox 中直接播放並顯示透明效果。

小結

  • 不要設定背景色才能得到透明影片
  • ProRes 4444 品質最好，VP9 WebM 檔案最小
  • H.264 MP4 不支援透明
  • 透明 WebM 可以在網頁中直接疊加使用