視覺化編輯

什麼是視覺化編輯？

視覺化編輯讓你在 Remotion Studio 中直接用圖形介面修改影片的 Props，不需要改程式碼。修改會即時反映在預覽畫面上。

前置條件

要啟用視覺化編輯，你需要：

1. 為 Composition 定義 Zod Schema
2. 設定 defaultProps

import { z } from "zod";
import { Composition } from "remotion";
 
const schema = z.object({
  title: z.string().describe("標題"),
  color: z.string().describe("文字顏色"),
  duration: z.number().min(1).max(10).describe("持續秒數"),
});
 
<Composition
  id="MyVideo"
  component={MyVideo}
  schema={schema}
  defaultProps={{
    title: "Hello",
    color: "#ffffff",
    duration: 3,
  }}
  // ...
/>

在 Studio 中使用

啟動 Studio 後，右側面板會自動顯示 Props 編輯器：

1. 選擇一個 Composition
2. 在右側面板修改 Props
3. 預覽畫面即時更新
4. 滿意後可以直接渲染

匯出 Props

在 Studio 中調整好 Props 後，你可以：

• 複製為 JSON — 貼到 --props 參數中用於 CLI 渲染
• 存為檔案 — 儲存為 .json 檔案供批量渲染使用

這讓非工程師（設計師、行銷）也能調整影片內容，再由工程師或自動化流程完成渲染。

動態長度

搭配 calculateMetadata，Props 的變化可以連帶影響影片長度：

const calculateMetadata: CalculateMetadataFunction<Props> = ({
  props,
}) => {
  return {
    durationInFrames: props.duration * 30,
  };
};

在 Studio 中拖動「持續秒數」滑桿，影片長度會跟著變化。

小結

• Zod Schema + defaultProps 啟用 Studio 的視覺化編輯
• 非工程師也能用圖形介面調整影片內容
• 調整好的 Props 可以匯出為 JSON 用於渲染
• 搭配 calculateMetadata 可以動態調整影片規格