Remotion LabRemotion Lab
›常見問題›自動計算影片長度

自動計算影片長度

關於如何根據內容自動決定 Remotion Composition 時長的常見問題，包含 calculateMetadata 的使用方式。

自動計算影片長度

可以根據內容動態決定影片長度嗎？

可以。Remotion 提供 calculateMetadata 回呼函式，讓你能根據輸入資料動態計算影片的時長、尺寸和幀率，而不必在 <Composition> 上寫死固定值。

為什麼需要動態計算時長？

在許多實際應用場景中，影片長度取決於內容：

  • 文字朗讀影片：長度取決於音訊檔案的時間
  • 幻燈片影片：長度取決於投影片數量
  • 資料視覺化：長度取決於資料筆數
  • 字幕影片：長度取決於逐字稿的總時間

如何使用 calculateMetadata？

在 <Composition> 元件上傳入 calculateMetadata 屬性：

import { Composition } from "remotion";
 
export const RemotionRoot = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideoComponent}
      width={1920}
      height={1080}
      fps={30}
      durationInFrames={150} // 預設值，會被覆寫
      calculateMetadata={async ({ props }) => {
        const audioDuration = await getAudioDuration(props.audioSrc);
        return {
          durationInFrames: Math.ceil(audioDuration * 30),
        };
      }}
    />
  );
};

calculateMetadata 可以回傳哪些欄位？

calculateMetadata 可以回傳以下任意組合：

欄位類型說明
durationInFramesnumber影片總幀數
fpsnumber幀率
widthnumber影片寬度（像素）
heightnumber影片高度（像素）
propsobject覆寫或補充傳入的 Props

只需回傳你想要覆寫的欄位，其餘欄位會使用 <Composition> 上的預設值。

如何根據音訊長度計算時長？

可以使用 @remotion/media-utils 套件的 getAudioDurationInSeconds() 函式：

import { getAudioDurationInSeconds } from "@remotion/media-utils";
import { staticFile } from "remotion";
 
const calculateMetadata = async ({ props }) => {
  const duration = await getAudioDurationInSeconds(
    staticFile(props.audioFileName)
  );
  return {
    durationInFrames: Math.ceil(duration * 30),
  };
};

如何根據文字長度計算時長？

你可以直接在 calculateMetadata 中撰寫計算邏輯：

const WORDS_PER_MINUTE = 150;
const FPS = 30;
 
const calculateMetadata = async ({ props }) => {
  const wordCount = props.text.split(" ").length;
  const durationInSeconds = (wordCount / WORDS_PER_MINUTE) * 60;
  return {
    durationInFrames: Math.ceil(durationInSeconds * FPS),
  };
};

calculateMetadata 可以執行非同步操作嗎？

可以，calculateMetadata 支援非同步函式（async/await）。你可以在其中：

  • 呼叫 API 取得資料
  • 讀取媒體檔案的中繼資料
  • 進行任何需要等待的非同步計算

請注意，這個函式在每次 Remotion Studio 刷新和渲染開始前都會執行，因此建議加入適當的快取機制以避免重複請求。

calculateMetadata 在渲染時也會執行嗎？

是的。在使用 CLI 或 Node.js API 渲染時，calculateMetadata 同樣會在渲染開始前執行，以決定最終的影片規格。這確保渲染結果與 Remotion Studio 中預覽的一致。

可以同時動態決定時長和 Props 嗎？

可以。calculateMetadata 中回傳的 props 欄位會合併到原始的 Props 中，讓你能在計算時長的同時補充或修改 Props：

const calculateMetadata = async ({ props }) => {
  const data = await fetchData(props.dataId);
  return {
    durationInFrames: data.items.length * 90,
    props: {
      ...props,
      items: data.items, // 將取得的資料附加到 Props
    },
  };
};

相關資源