參數化影片 - RemotionLab

什麼是參數化影片？

「參數化影片」就是用 Props 來控制影片內容。就像 React 元件接受 Props 一樣，Remotion 的 Composition 也可以接受 Props：

interface MyVideoProps {
  title: string;
  backgroundColor: string;
  showLogo: boolean;
}
 
export const MyVideo: React.FC<MyVideoProps> = ({
  title,
  backgroundColor,
  showLogo,
}) => {
  return (
    <AbsoluteFill style={{ backgroundColor }}>
      <h1 style={{ color: "white", fontSize: 72 }}>{title}</h1>
      {showLogo && <img src={staticFile("logo.png")} />}
    </AbsoluteFill>
  );
};

改一下 Props，就能產出完全不同的影片。這就是程式化影片最強大的地方。

定義 Default Props

在 Composition 中用 defaultProps 設定預設值：

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        title: "預設標題",
        backgroundColor: "#0f0f1a",
        showLogo: true,
      }}
    />
  );
};

在 Remotion Studio 中，你可以在右側面板直接修改這些 Props 來即時預覽不同內容。

Schema 驗證

用 Zod 為 Props 定義 Schema，Remotion Studio 會自動產生對應的 UI 控制項：

import { z } from "zod";
 
export const myVideoSchema = z.object({
  title: z.string(),
  backgroundColor: z.string(),
  showLogo: z.boolean(),
});
 
type MyVideoProps = z.infer<typeof myVideoSchema>;

在 Composition 中指定 schema：

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={90}
  fps={30}
  width={1920}
  height={1080}
  schema={myVideoSchema}
  defaultProps={{
    title: "預設標題",
    backgroundColor: "#0f0f1a",
    showLogo: true,
  }}
/>

這樣在 Studio 中，title 會顯示為文字輸入框，showLogo 會顯示為開關，讓非工程師也能輕鬆調整影片內容。

用 CLI 傳入 Props

渲染時可以用 --props 傳入 JSON：

npx remotion render MyVideo out/video.mp4 --props='{"title": "自訂標題", "backgroundColor": "#1a1a2e", "showLogo": false}'

或從檔案讀取：

npx remotion render MyVideo out/video.mp4 --props=./props.json

calculateMetadata：動態計算

有時候影片的長度、解析度需要根據 Props 動態決定。calculateMetadata 讓你在渲染前計算這些值：

import { CalculateMetadataFunction } from "remotion";
 
interface SlideShowProps {
  slides: string[];
  secondsPerSlide: number;
}
 
export const calculateMetadata: CalculateMetadataFunction<
  SlideShowProps
> = ({ props }) => {
  const totalFrames = props.slides.length * props.secondsPerSlide * 30;
 
  return {
    durationInFrames: totalFrames,
    fps: 30,
    width: 1920,
    height: 1080,
  };
};

在 Composition 中使用：

<Composition
  id="SlideShow"
  component={SlideShow}
  calculateMetadata={calculateMetadata}
  defaultProps={{
    slides: ["投影片 1", "投影片 2", "投影片 3"],
    secondsPerSlide: 3,
  }}
/>

現在影片長度會根據投影片數量自動調整——3 張投影片各 3 秒 = 9 秒 = 270 幀。

實用案例

參數化影片最常見的應用：

社群媒體模板 — 同一個設計，換文字和圖片就能產出不同貼文影片
數據報告 — 接入 API 資料，自動產出每週/每月報告影片
個人化影片 — 為每個用戶產出客製化的歡迎影片或回顧影片
多語言版本 — 同一個模板，傳入不同語言的文字

小結

defaultProps 定義預設值，Studio 中可即時調整
Zod schema 產生 Studio UI 控制項，降低使用門檻
CLI --props 在渲染時傳入自訂內容
calculateMetadata 根據 Props 動態計算影片規格
參數化是從「做一支影片」到「做一個影片系統」的關鍵