如何使每个视频元素以相同的大小显示?

Question

我已经使用Twilio API和ReactJs构建了一个视频通话平台。问题是当两个人以一个来自桌面和一个从移动设备进入房间时，移动设备上的那个显示为放大，因为在我的视频元素上我width设置为100%。我希望我的布局始终像 whereby.com 或谷歌会议一样。

这是我用于呈现参与者的代码

<div className="room">
<div className="local-participant">
{room ? (
<Participant
key={room.localParticipant.sid}
participant={room.localParticipant}
handleAudioToggle={handleAudioToggle}
handleVideoToggle={handleVideoToggle}
handleCallDisconnect={handleCallDisconnect}
toggleAudio={toggleAudio}
toggleVideo={toggleVideo}
isLocal={true}
isSharingScreen={toggleScreenShare}
/>
) : (
""
)}
</div>
<div className="remote-participants">{remoteParticipants}</div>
<Controls
handleCallDisconnect={handleCallDisconnect}
handleAudioToggle={handleAudioToggle}
handleVideoToggle={handleVideoToggle}
handleScreenToggle={handleScreenToggle}
audio={toggleAudio}
video={toggleVideo}
screen={toggleScreenShare}
/>
</div>

这是我用于创建视频元素的代码

<div>
<div className="futura-20-900 margin-top-8 margin-left-8" style={{ color: "white" }}>{participant.identity}</div>
<video ref={screenRef} autoPlay={true} style={{ display: `${isSharingScreen ? 'block' : 'none'}`}}/>
{ webcamEnabled ? <video ref={videoRef} autoPlay={true} /> : <div><img src={NoCam} /></div> }
<audio ref={audioRef} autoPlay={true} />
</div>

Answer 1

在video-container上设置所需的宽度。高度将自动设置为 16：9 的比例。

<div class="video-container">
<video ref={...} autoPlay={true} />
</div>

使用此 CSS

.video-container {
position: relative;
display: block;
width: 80vw; /* set your width here in vw */
padding: 0;
overflow: hidden;
}
.video-container::before {
display: block;
content: "";
}
.video-container::before {
padding-top: 56.25%; /* video W:H 16:9 */
}
.video-container video,
.video-container iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}