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