Remotion Player - RemotionLab

什麼是 Remotion Player？

Remotion Player 讓你在任何 React 應用程式中嵌入 Remotion 影片。影片在瀏覽器中即時渲染並播放，不需要預先渲染成 MP4。

這適合：

影片預覽介面
互動式影片編輯器
使用者可自訂內容的影片模板

安裝

npm install @remotion/player

基本用法

import { Player } from "@remotion/player";
import { MyVideo } from "./MyVideo";
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={90}
      fps={30}
      compositionWidth={1920}
      compositionHeight={1080}
      style={{ width: 800 }}
      controls
    />
  );
};

controls 屬性會顯示內建的播放控制列（播放/暫停、時間軸、全螢幕）。

傳入 Props

<Player
  component={MyVideo}
  durationInFrames={90}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  inputProps={{
    title: "動態標題",
    backgroundColor: "#1a1a2e",
  }}
  style={{ width: 800 }}
  controls
/>

修改 inputProps 會即時更新影片內容。

尺寸縮放

Player 會自動等比縮放影片。用 style 控制容器大小：

// 固定寬度，高度自動計算
<Player ... style={{ width: 640 }} />
 
// 填滿父容器
<Player ... style={{ width: "100%" }} />

自動播放

<Player
  ...
  autoPlay
  loop
/>

注意：大多數瀏覽器會阻擋有聲音的自動播放。如果影片有音訊，可以加上 muted：

<Player ... autoPlay loop muted />

程式化控制

用 ref 取得 Player 實例，透過 API 控制播放：

import { useRef } from "react";
import { Player, PlayerRef } from "@remotion/player";
 
export const App: React.FC = () => {
  const playerRef = useRef<PlayerRef>(null);
 
  return (
    <div>
      <Player ref={playerRef} ... />
      <button onClick={() => playerRef.current?.play()}>播放</button>
      <button onClick={() => playerRef.current?.pause()}>暫停</button>
      <button onClick={() => playerRef.current?.seekTo(0)}>回到開頭</button>
    </div>
  );
};

常用 API

方法	說明
`play()`	開始播放
`pause()`	暫停
`seekTo(frame)`	跳到指定幀
`getCurrentFrame()`	取得目前幀數
`isPlaying()`	是否正在播放

監聽事件

<Player
  ...
  onPlay={() => console.log("開始播放")}
  onPause={() => console.log("暫停")}
  onEnded={() => console.log("播放完畢")}
  onFrameUpdate={(frame) => console.log(`目前幀: ${frame}`)}
/>

Player vs 渲染

	Player	渲染（CLI/API）
輸出	瀏覽器即時播放	MP4/WebM 檔案
用途	預覽、互動、嵌入網頁	最終產出
品質	受瀏覽器效能影響	每幀完美渲染
音訊	即時播放	完美同步

小結

@remotion/player 讓你在 React 應用中嵌入影片
用 inputProps 傳入動態內容
支援自動播放、循環、程式化控制
適合預覽和互動場景，正式輸出請用渲染