Remotion LabRemotion Lab
›渲染›建立覆疊層與浮水印

建立覆疊層與浮水印

將 Remotion 影片匯出為透明 Apple ProRes 檔案，用於影片編輯軟體中的覆疊或轉場效果，支援 Final Cut Pro、Adobe Premiere 和 DaVinci Resolve。

建立覆疊層與浮水印

如果你想將 Remotion 影片匯出後用於傳統影片編輯軟體中的覆疊層或轉場效果，可以將其匯出為透明的 Apple ProRes 檔案。

支援的軟體

透明 ProRes 檔案支援以下主流影片編輯軟體：

  • Final Cut Pro
  • Adobe Premiere Pro
  • DaVinci Resolve

步驟一：確保合成沒有背景色

在 Remotion 專案中，確認你的合成沒有設定背景顏色。在編輯器中開啟透明選項後，應該能看到棋盤格背景，這表示合成是透明的。

import { AbsoluteFill } from "remotion";
 
// 正確：沒有背景色
export const MyOverlay = () => {
  return (
    <AbsoluteFill>
      {/* 你的覆疊內容，例如文字、圖形等 */}
      <div
        style={{
          fontSize: 80,
          color: "white",
          fontWeight: "bold",
          textShadow: "2px 2px 4px rgba(0,0,0,0.8)",
          position: "absolute",
          bottom: 60,
          left: 60,
        }}
      >
        下方字幕文字
      </div>
    </AbsoluteFill>
  );
};

步驟二：設定 ProRes 匯出設定

使用設定檔（推薦）

在 remotion.config.ts 中進行以下設定：

import { Config } from "@remotion/cli/config";
 
Config.setVideoImageFormat("png");      // 使用 PNG 格式保留透明度
Config.setPixelFormat("yuva444p10le");  // 支援透明度的像素格式
Config.setCodec("prores");              // 使用 ProRes 編碼
Config.setProResProfile("4444");        // ProRes 4444 支援透明通道

設定完成後，執行渲染：

npx remotion render

直接在命令列設定

也可以直接在命令列傳入所有選項：

npx remotion render MyComp \
  --image-format=png \
  --pixel-format=yuva444p10le \
  --codec=prores \
  --prores-profile=4444 \
  out/overlay.mov

使用 renderMedia() API

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyOverlay",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "prores",
  imageFormat: "png",
  pixelFormat: "yuva444p10le",
  proResProfile: "4444",
  outputLocation: "out/overlay.mov",
});

關於 ProRes 4444

ProRes 4444 是 Apple ProRes 格式家族中支援透明 Alpha 通道的版本。選擇此格式的原因：

  • 支援 Alpha 通道：允許完整的透明度資訊
  • 高品質：幾乎無損的畫質
  • 廣泛相容：被主流影片編輯軟體支援
  • 高效能：編輯時不需重新壓縮

像素格式說明

yuva444p10le 像素格式的含義：

  • yuv：YUV 色彩空間
  • a：包含 Alpha（透明）通道
  • 444：色度不取樣（最高色彩品質）
  • p：平面格式
  • 10：每通道 10 位元色深
  • le：小端位元組序

使用範本

Remotion 提供了一個現成的覆疊範本，你可以直接使用：

npx create-video --overlay

或複製 GitHub 上的範本倉庫。

在影片編輯軟體中使用

渲染完成後，影片檔案會儲存在 Remotion 專案的 out 資料夾中。

在 Final Cut Pro 中使用

  1. 將 .mov 檔案匯入媒體庫
  2. 將其拖曳至時間軸，放置在主要影片軌道上方
  3. Final Cut Pro 會自動識別透明通道

在 Adobe Premiere Pro 中使用

  1. 將 .mov 檔案匯入專案面板
  2. 拖曳至時間軸上方的軌道
  3. 在「效果控制」面板中確認「透明度」設定

在 DaVinci Resolve 中使用

  1. 將 .mov 檔案匯入媒體資料庫
  2. 在時間軸中放置於主要影片上方
  3. DaVinci Resolve 會自動處理透明通道

常見使用場景

動態字幕

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
 
export const AnimatedSubtitle = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 15], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  return (
    <AbsoluteFill>
      <div
        style={{
          opacity,
          position: "absolute",
          bottom: 80,
          left: "50%",
          transform: "translateX(-50%)",
          backgroundColor: "rgba(0,0,0,0.7)",
          color: "white",
          padding: "12px 24px",
          borderRadius: 8,
          fontSize: 32,
          whiteSpace: "nowrap",
        }}
      >
        動態字幕文字
      </div>
    </AbsoluteFill>
  );
};

品牌浮水印

import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const Watermark = () => {
  return (
    <AbsoluteFill>
      <Img
        src={staticFile("logo.png")}
        style={{
          position: "absolute",
          top: 20,
          right: 20,
          width: 120,
          opacity: 0.8,
        }}
      />
    </AbsoluteFill>
  );
};

參見