渲染與輸出 - RemotionLab

三種渲染方式

做好影片後，你需要把它輸出成真正的影片檔。Remotion 提供三種渲染方式：

Remotion Studio — 在瀏覽器介面中按一下按鈕
CLI 指令 — 用命令列渲染
Node.js API — 用程式碼控制渲染流程

方式一：Remotion Studio

啟動開發伺服器後：

npm run dev

在 Remotion Studio 的預覽畫面中，點擊右上角的 Render 按鈕。你可以設定：

輸出格式（MP4、WebM、GIF）
編碼器（H.264、H.265、VP8、VP9）
解析度與 fps
輸出路徑

按下 Render 後，Studio 會在背景渲染並顯示進度。

方式二：CLI 指令

最常用的方式。一行指令搞定：

npx remotion render MyComposition out/video.mp4

常用參數

# 指定編碼器
npx remotion render MyComposition out/video.mp4 --codec=h264
 
# 指定解析度（覆蓋 Composition 的設定）
npx remotion render MyComposition out/video.mp4 --width=1080 --height=1080
 
# 渲染 GIF
npx remotion render MyComposition out/animation.gif
 
# 只渲染部分幀（用於測試）
npx remotion render MyComposition out/test.mp4 --frames=0-30
 
# 渲染靜態圖片（單幀）
npx remotion still MyComposition out/thumbnail.png --frame=45

支援的輸出格式

格式	編碼器	用途
MP4	H.264	最通用，社群媒體首選
MP4	H.265	更好的壓縮率，但相容性較低
WebM	VP8/VP9	網頁使用
GIF	—	短動畫、表情圖
PNG/JPEG	—	靜態圖片（用 `remotion still`）

方式三：Node.js API

當你需要用程式碼控制渲染流程時（例如：API 觸發渲染、批量產出），使用 @remotion/renderer：

npm install @remotion/renderer

渲染分三步：打包 → 選擇 Composition → 渲染

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";
 
async function render() {
  // 1. 打包你的 Remotion 專案
  const bundled = await bundle({
    entryPoint: path.resolve("./src/index.ts"),
  });
 
  // 2. 選擇要渲染的 Composition
  const composition = await selectComposition({
    serveUrl: bundled,
    id: "MyComposition",
  });
 
  // 3. 渲染成影片
  await renderMedia({
    composition,
    serveUrl: bundled,
    codec: "h264",
    outputLocation: "out/video.mp4",
  });
 
  console.log("渲染完成！");
}
 
render();

傳入 Props

如果你的 Composition 接受 Props，可以在 selectComposition 和 renderMedia 中傳入：

const composition = await selectComposition({
  serveUrl: bundled,
  id: "MyComposition",
  inputProps: {
    title: "今日頭條",
    subtitle: "2024 年度回顧",
  },
});
 
await renderMedia({
  composition,
  serveUrl: bundled,
  codec: "h264",
  outputLocation: "out/video.mp4",
  inputProps: {
    title: "今日頭條",
    subtitle: "2024 年度回顧",
  },
});

這讓你可以用同一個模板產出不同內容的影片——這就是程式化影片的核心價值。

渲染效能提示

並行渲染：Remotion 預設會用多個 CPU 核心同時渲染不同幀。你可以用 --concurrency 參數調整。
測試用部分渲染：開發時用 --frames=0-30 只渲染前幾幀，確認效果後再完整渲染。
選擇合適的編碼器：H.264 渲染最快、相容性最好，通常是最佳選擇。

小結

快速測試 → 用 Remotion Studio 的 Render 按鈕
正式輸出 → 用 CLI npx remotion render
程式化控制 → 用 Node.js API（@remotion/renderer）
最常用的組合：H.264 編碼的 MP4 檔案