Remotion LabRemotion Lab
›影片›嵌入透明影片

嵌入透明影片

學習如何在 Remotion 中嵌入含有 Alpha 通道的透明影片，以及如何用 mixBlendMode 處理純黑背景影片的透明效果

嵌入透明影片

Remotion 支援嵌入透明影片，讓你能在影片層疊合成中實現各種視覺效果。本文介紹三種常見的透明影片處理情境。

方法一：含 Alpha 通道的影片

若你的影片本身就帶有 Alpha 通道（例如 WebM 格式的透明影片），只需在 <OffthreadVideo> 元件上加上 transparent prop 即可：

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('transparent.webm')} transparent />;
};

支援的格式

含有 Alpha 通道的影片格式主要有：

格式說明
WebM（VP8/VP9）最廣泛支援的透明影片格式，推薦使用
MOV（ProRes 4444）Apple 生態系常用，支援高品質透明通道
PNG 序列逐幀 PNG，檔案較大但品質最佳

注意事項

  • transparent prop 只在 <OffthreadVideo> 上有效，不適用於 <Video> 元件
  • 確保影片確實含有 Alpha 通道，否則開啟 transparent prop 可能導致非預期結果

方法二：純黑背景影片（無 Alpha 通道）

若你的影片沒有 Alpha 通道，但背景是純黑色（例如粒子特效、光暈效果等），可以在 style prop 中加入 mixBlendMode: 'screen' 來「消除」黑色背景：

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('nottransparent.mp4')}
      style={{
        mixBlendMode: 'screen',
      }}
    />
  );
};

mixBlendMode: 'screen' 的原理

screen 混合模式會讓影片中愈暗的像素愈透明，純黑（#000000）會完全透明，純白（#ffffff）會完全不透明。這對於黑底白字、黑底光效等素材特別有效。

其他常用混合模式

混合模式適用情境
screen黑底特效（粒子、光芒、煙火）
multiply消除白底，保留深色內容
overlay同時增強明暗對比
lighten保留較亮的像素

方法三：綠幕去背效果

若影片背景是特定顏色（例如綠幕），可以透過 Canvas API 逐像素處理，將特定顏色的像素替換為透明。

詳見 影片操作與 Canvas 中的綠幕範例。

簡要說明：

// 使用 onVideoFrame 取得每一幀的像素資料
// 遍歷每個像素，將綠色像素的 alpha 值設為 0
// 將處理後的像素資料繪製回 Canvas

輸出透明影片

若你想輸出帶有透明通道的影片（而不只是嵌入），請在渲染時指定支援透明的編碼格式。

相關設定請參考官方文件：Transparent videos（輸出透明影片）

各方法比較

情境建議方法
影片本身有 Alpha 通道transparent prop
黑底特效影片mixBlendMode: 'screen'
白底素材mixBlendMode: 'multiply'
綠幕影片Canvas 逐像素去背

完整層疊範例

以下示範如何將一段透明影片疊加在背景上：

import React from 'react';
import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
 
export const LayeredVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 背景影片 */}
      <AbsoluteFill>
        <OffthreadVideo src={staticFile('background.mp4')} />
      </AbsoluteFill>
 
      {/* 前景透明特效影片 */}
      <AbsoluteFill>
        <OffthreadVideo
          src={staticFile('overlay-effect.webm')}
          transparent
        />
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

延伸閱讀