將 Player 轉換為 Remotion 專案

如果你有一個使用 <Player> 組件的 React 應用程式，你可以將其同時轉換為 Remotion 專案，而無需建立新的程式碼庫。這將使你能夠：

使用 Remotion Studio
在本地渲染影片
建立一個允許在雲端渲染的 Remotion Bundle

說明

步驟 1：確認尚未安裝 Studio

首先確認你尚未安裝 Studio。在以下範本中，Studio 已經安裝好，可以使用 npx remotion studio 命令啟動：

如果你已經使用上述任一範本，則不需要執行本指南的步驟。

步驟 2：安裝 Remotion CLI

npm

npm i --save-exact @remotion/cli@4.0.445

pnpm

pnpm i @remotion/cli@4.0.445

yarn

yarn --exact add @remotion/cli@4.0.445

bun

bun i @remotion/cli@4.0.445

請確保更新 remotion 和所有 @remotion/* 套件到相同版本。移除版本號前面的所有 ^ 字符，因為版本不一致可能導致衝突。

步驟 3：建立 remotion 資料夾和必要檔案

建立新的 remotion 資料夾，並在其中新增以下兩個檔案：

remotion/Root.tsx

import React from 'react';
import { Composition } from 'remotion';
import { MyComposition } from './Composition';
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyComposition"
        // 匯入你之前在 <Player> 中使用的組件，並添加相同的屬性
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

remotion/index.ts

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';
 
registerRoot(RemotionRoot);

將你之前在 <Player> 中注冊的組件也加入到 <Composition> 中。如有必要，將組件移至 remotion 目錄。

呼叫 registerRoot() 的檔案現在是你的 Remotion 入口點。

步驟 4：套用常見的 Webpack 覆寫設定

套用 React 應用程式中常見的 Webpack 覆寫：

remotion.config.ts

import { Config } from '@remotion/cli/config';
import { enableTailwind } from '@remotion/tailwind';
 
Config.overrideWebpackConfig((config) => {
  // 啟用 TailwindCSS 支援
  return enableTailwind(config);
});

啟動 Remotion Studio

設定完成後，你可以啟動 Remotion Studio 來預覽和調試你的影片：

npx remotion studio

Studio 將在瀏覽器中開啟，你可以在其中：

預覽你的 composition
調整 props 並即時查看效果
觸發本地渲染

渲染影片

使用以下命令在本地渲染影片：

npx remotion render remotion/index.ts

你也可以指定特定的 composition 和輸出格式：

# 渲染特定 composition
npx remotion render remotion/index.ts MyComposition output.mp4
 
# 渲染為 GIF
npx remotion render remotion/index.ts MyComposition output.gif
 
# 指定品質和幀率
npx remotion render remotion/index.ts MyComposition output.mp4 --quality 80 --fps 60

設定伺服器端渲染

如果你想在伺服器上渲染影片，請參閱伺服器端渲染文件。

基本的伺服器端渲染流程：

server/render.ts

import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
import path from 'path';
 
const bundleLocation = await bundle({
  entryPoint: path.resolve('./remotion/index.ts'),
  // 如果你的專案使用 Webpack 覆寫
  webpackOverride: (config) => config,
});
 
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: 'MyComposition',
  inputProps: {
    // 傳遞你的 props
  },
});
 
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: 'h264',
  outputLocation: `out/${composition.id}.mp4`,
});
 
console.log('渲染完成！');

常見問題

如何從 Remotion Player 下載影片？

影片需要先在伺服器端渲染才能下載。請參閱渲染方式和伺服器端渲染文件以了解更多資訊。客戶端無法直接渲染和下載影片。

可以同時在 Player 和 Studio 中使用相同組件嗎？

是的，這正是本指南的設計目標。將你的組件放在 remotion 資料夾中，然後在 <Player> 和 <Composition> 中都匯入它。

// 在 Player（應用程式）中使用
import { MyComposition } from './remotion/MyComposition';
 
// 在 Composition（Studio）中使用
import { MyComposition } from './Composition';

說明