Remotion LabRemotion Lab
›核心概念›<Composition> 元件

<Composition> 元件

使用 <Composition> 元件來註冊影片，讓它能被渲染並出現在 Remotion Studio 的側邊欄中。

什麼是 <Composition>？

<Composition> 是你用來註冊影片的元件，讓它能被渲染，並出現在 Remotion 開發介面的側邊欄中。

一個 Composition 代表你想建立的影片，由一系列依序播放的片段（例如多個 <Sequence>）組合而成。

基本範例

// src/Root.tsx
import { Composition } from "remotion";
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        component={Component}
        durationInFrames={300}
        width={1080}
        height={1080}
        fps={30}
        id="test-render"
        defaultProps={{}}
      />
      {/* 可以加入更多 Composition */}
    </>
  );
};

<Composition> 應放在根元件的 Fragment 內部（根元件透過 registerRoot() 來註冊）。

Props 說明

id

Composition 的唯一識別碼，會顯示在側邊欄中。當你想渲染特定 Composition 時，需要指定此 ID。ID 只能包含英文字母、數字和 -。

fps

Composition 的渲染幀率（每秒幀數）。

durationInFrames

Composition 的總幀數。

height

Composition 的高度（像素）。

width

Composition 的寬度（像素）。

component 或 lazyComponent

直接傳入元件，或傳入一個回傳動態 import 的函式。兩者都不傳或同時傳入都是錯誤的。

注意：若使用 lazyComponent，Remotion 會使用 React Suspense 來載入元件。元件將由 Webpack 按需編譯，這可以減少 Remotion 的啟動時間。使用 lazyComponent 時，你的元件必須使用 default export，這是 React Suspense 的限制。

defaultProps?

為你的元件提供預設 props。預設 props 可以透過 Props 編輯器和輸入 Props 來覆蓋。

Props 必須是一個只包含純 JSON 可序列化值的物件。 函式、類別和其他不可序列化的值在渲染時會遺失。（此限制不適用於 <Player>，在 Player 中你可以傳入函式作為 props。）

你還可以在 defaultProps 中使用 Date、Map、Set 和 staticFile()，Remotion 會確保它們被正確序列化。

型別提示：使用 React.FC<{}> 型別來定義你的元件，defaultProps prop 就會有型別檢查。

效能提示：傳入過大的物件到 defaultProps 可能會很慢，請學習如何避免。

型別注意事項：請使用 type，而非 interface 來為你的 defaultProps 定義型別。

calculateMetadata

請參閱：calculateMetadata()

schema

傳入一個 Zod schema，你的預設 props 必須符合此 schema。這樣可以啟用視覺編輯功能。

請參閱：定義 Schema

使用 component 的範例

import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
  return (
    <>
      <Composition
        id="my-comp"
        component={MyComp}
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={3 * 30}
      />
    </>
  );
};

使用 lazyComponent 的範例

export const MyVideo = () => {
  return (
    <>
      <Composition
        id="my-comp"
        lazyComponent={() => import("./LazyComponent")}
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={3 * 30}
      />
    </>
  );
};

使用 lazyComponent 時，對應的檔案必須有 default export：

// LazyComponent.tsx
const LazyComponent: React.FC = () => {
  return <div>這是延遲載入的元件</div>;
};
 
export default LazyComponent;

使用資料夾組織 Composition

你可以使用 <Folder /> 元件在側邊欄中組織你的 Composition：

import { Composition, Folder } from "remotion";
 
export const Video = () => {
  return (
    <>
      <Folder name="Visuals">
        <Composition
          id="CompInFolder"
          durationInFrames={100}
          fps={30}
          width={1080}
          height={1080}
          component={Component}
        />
      </Folder>
      <Composition
        id="CompOutsideFolder"
        durationInFrames={100}
        fps={30}
        width={1080}
        height={1080}
        component={Component}
      />
    </>
  );
};

資料夾內的 Composition 會在 Studio 側邊欄中以群組方式顯示。

常見的 Composition 設定

用途widthheightfps說明
YouTube / 橫向 16:91920108030標準高清影片
Instagram / 方形 1:11080108030社群媒體貼文
TikTok / 直向 9:161080192030短影音
電影風格1920108024電影幀率
高流暢遊戲影片1920108060高幀率錄影

多個 Composition 的實際應用

一個 Remotion 專案可以包含多個 Composition，適合在同一個專案中管理不同版本或不同格式的影片：

// src/Root.tsx
import { Composition, Folder } from "remotion";
import { IntroScene } from "./IntroScene";
import { MainScene } from "./MainScene";
import { OutroScene } from "./OutroScene";
import { InstagramVersion } from "./InstagramVersion";
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Folder name="YouTube 版本">
        <Composition
          id="intro"
          component={IntroScene}
          durationInFrames={90}
          fps={30}
          width={1920}
          height={1080}
        />
        <Composition
          id="main"
          component={MainScene}
          durationInFrames={300}
          fps={30}
          width={1920}
          height={1080}
        />
        <Composition
          id="outro"
          component={OutroScene}
          durationInFrames={60}
          fps={30}
          width={1920}
          height={1080}
        />
      </Folder>
 
      <Folder name="Instagram 版本">
        <Composition
          id="instagram-square"
          component={InstagramVersion}
          durationInFrames={150}
          fps={30}
          width={1080}
          height={1080}
        />
      </Folder>
    </>
  );
};

相容性

環境支援
Chrome是
Firefox是
Safari是
客戶端渲染是
伺服器端渲染是
Player是
Studio是

相關資源