尺寸
用于计算播放器大小的算法如下:
1 默认情况下,播放器的大小与由compositionHeight和compositionWidth属性定义的合成高度一样大。
2 如果使用style属性定义了height和width,播放器将采用您传递的尺寸。
3 如果使用style属性传递了height,播放器将采用该高度,并根据视频的宽高比计算宽度。
4 如果使用style属性传递了width,播放器将采用该宽度,并根据视频的宽高比计算高度。
note
在v3.3.43之前,如果发生
3
或4
的情况,由于元素被测量,挂载过程中会发生布局移位。使用更新版本的Remotion将解决此问题,因为它使用aspect-ratio CSS属性。全宽度
通过设置以下样式:
tsxstyle={{ width: "100%" }}
tsxstyle={{ width: "100%" }}
视频将按照父容器的全宽度进行缩放,而高度将根据视频的宽高比进行计算。
适应容器
您可以使用
tsxstyle={{ width: "100%", height: "100%" }}
tsxstyle={{ width: "100%", height: "100%" }}
使<Player />适应整个容器。请注意,如果播放器大小与视频宽高比不匹配,视频将被缩小并居中显示在播放器中。