问题描述
我已经构建了一个与Chime SDK和一些REST API接口的react.js客户端应用程序。它创建一个会议,一个与会者,连接本地硬件并启动音频和视频。
我的问题是视频是固定大小的。
它位于React Bootsrap响应式布局内,如下所示:
<Container fluid style={containerStyle}>
<Row>
<Col sm="10">
<audio id="my-audio-element"></audio>
<video id="my-video-element"></video>
</Col>
<Col sm="2">
...
</Col>
</Row>
</Container>
SDK文档建议<audio id="my-audio-element"></audio>
和<video id="my-video-element"></video>
元素。父级<Col sm="10">
响应迅速。
无论我在页面上做什么,Chime视频都保持固定大小?
更新
设置class="h-100 w-100"
可以调整视频的大小,但是它仍然具有固定的宽高比吗?
解决方法
我在SDK演示/浏览器应用程序中找到了答案:
.video-tile-video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}