尺寸

以下算法用于计算播放器的尺寸：

🌐 The following algorithm is used for calculating the size of the Player:

1

默认情况下，播放器的大小与合成高度相同，由compositionHeight和compositionWidth属性定义。

2

如果使用style属性定义了height和width，播放器将采用你传入的尺寸。

3

如果通过style属性传入height，播放器将采用该高度，并根据视频的宽高比计算宽度。

4

如果通过style属性传入width，播放器将采用该宽度，并根据视频的宽高比计算高度。

note

在 v3.3.43 之前，如果发生 case

3

or

4

，在挂载期间会发生布局偏移，因为元素被测量了。使用较新版本的 Remotion 可以解决此问题，因为它使用了 aspect-ratio CSS 属性。

全宽

🌐 Full width

通过设置以下样式：

🌐 By setting the following style:

style={{ width: "100%" }}

视频将缩放到父容器的全宽度，而高度将根据视频的纵横比计算。

🌐 The video will scale to the full width of the parent container, while the height will be calculated based on the aspect ratio of the video.

适合容器

🌐 Fitting to a container

这就是你如何让播放器填充容器但保持视频纵横比的方法：

🌐 This is how you can make the Player fill out a container but keep the aspect ratio of the video:

Canvas.tsx
import {Player} 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',
        // Any container with "position: relative" will work
        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>
  );
};