Remotion LabRemotion Lab
›Player›Player 尺寸縮放

Player 尺寸縮放

了解 Remotion Player 的尺寸計算算法，以及如何控制播放器大小以適應不同的容器和螢幕尺寸。

Player 尺寸縮放

以下算法用於計算 Player 的尺寸：

  1. 預設情況：Player 的大小與合成的高度相同，由 compositionHeight 和 compositionWidth props 定義。
  2. 指定寬高：如果使用 style 屬性定義了 height 和 width，Player 將採用你傳入的尺寸。
  3. 僅指定高度：如果只透過 style 屬性傳入 height，Player 將採用該高度，並根據影片的長寬比計算寬度。
  4. 僅指定寬度：如果只透過 style 屬性傳入 width，Player 將採用該寬度，並根據影片的長寬比計算高度。

注意：在 v3.3.43 之前，如果發生第 3 或第 4 種情況，在掛載期間會出現版面位移，因為元素需要被測量。使用較新版本的 Remotion 可解決此問題，因為它使用了 aspect-ratio CSS 屬性。

全寬顯示

透過設定以下樣式，影片將縮放至父容器的全寬，高度則根據影片的長寬比自動計算：

import { Player } from '@remotion/player';
import { AbsoluteFill } from 'remotion';
 
const MyComp = () => {
  return <AbsoluteFill style={{ backgroundColor: 'black' }} />;
};
 
export const FullWidthPlayer = () => {
  return (
    <Player
      component={MyComp}
      compositionWidth={1920}
      compositionHeight={1080}
      durationInFrames={120}
      fps={30}
      style={{
        width: "100%",
      }}
    />
  );
};

影片將縮放至父容器的全寬，而高度將根據影片的長寬比自動計算。

適應容器

以下是讓 Player 填滿容器同時保持影片長寬比的方法：

// Canvas.tsx
import { Player, PlayerProps } from '@remotion/player';
import React from 'react';
import { AbsoluteFill } from 'remotion';
 
const MyComp: React.FC = () => {
  return <AbsoluteFill style={{ backgroundColor: 'black' }} />;
};
 
export const FullscreenPlayer = () => {
  const compositionWidth = 300;
  const compositionHeight = 200;
 
  return (
    <div
      style={{
        width: '100vw',
        height: '100vh',
        backgroundColor: 'gray',
        // 任何含有 "position: relative" 的容器都有效
        position: 'relative',
      }}
    >
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          margin: 'auto',
          aspectRatio: `${compositionWidth} / ${compositionHeight}`,
          maxHeight: '100%',
          maxWidth: '100%',
        }}
      >
        <Player
          controls
          component={MyComp}
          compositionWidth={compositionWidth}
          compositionHeight={compositionHeight}
          durationInFrames={200}
          fps={30}
          style={{
            width: '100%',
          }}
        />
      </div>
    </div>
  );
};

原理說明

此方法的核心思路是：

  1. 外層容器使用 position: relative，作為定位基準
  2. 內層容器使用絕對定位並設定四個方向均為 0，再配合 margin: auto 實現自動置中
  3. 設定 aspectRatio 確保保持正確的長寬比
  4. maxHeight: '100%' 和 maxWidth: '100%' 確保不超出外層容器
  5. Player 的 style={{ width: '100%' }} 讓它填滿內層容器

這種方式可以讓 Player 在任何大小的容器中自動縮放，同時保持影片的原始長寬比，避免畫面變形。

自訂像素尺寸

你也可以直接指定像素尺寸：

import { Player } from '@remotion/player';
import { MyVideo } from './remotion/MyVideo';
 
export const App: React.FC = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      controls
      style={{
        width: 1280,
        height: 720,
      }}
    />
  );
};

響應式縮放提示

  • 使用 width: "100%" 可讓 Player 自動適應父容器寬度
  • 搭配 CSS aspect-ratio 屬性可維持正確比例
  • 避免同時硬編碼寬度和高度，這可能導致影片變形
  • 在行動裝置上，建議使用百分比寬度而非固定像素值

相關資源