问题描述
IM 使用 twilio 视频。我有一个功能类似于缩放调用。每个网络摄像头提要都是 div。
我一直在搞乱 css,我终于把东西留在了 div 中,但现在,只显示了网络摄像头提要的一部分。观察以下屏幕截图。第二个 div 包含网络摄像头提要。请注意,它只显示了一些实际供稿的内容,因为您应该能够看到我的脸。
另外请注意 div 的宽度和高度大小不是我想要的,只是想让它们工作。
这是我的 html 和 css
javascript 正在通过 twilio api 添加视频元素,因此为什么您在 html 中看不到它。添加视频时,img 也会被删除。当用户没有分享他们的视频时,它只是一个占位符。
<div class="row scroll-stream-dash custom-scrollbar-css ">
<div *ngFor="let p of participantsarray" [id]="p.identity" class=" vidparticipant col-6 col-lg-3 col-md-2 mb-3 px-lg-2 px-md-2 px-sm-1 px-xs-1">
<img [id]="'novideo' + p.identity" style="width: 100%; height: 100%;" [src]="blackbackground" class=" img-fluid">
<div class="content_img">
<div style="display: none" [id]="p.identity + 'da'" class="col-6 text-center">
<span><i class="fas fa-microphone" aria-hidden="true"></i><br><span style="font-size: 9px;">Mute Audio</span></span>
</div>
<div style="display: none" [id]="p.identity + 'ea'" class=" col-6 text-center ">
<span><i class="fas fa-microphone-alt-slash"></i><br><span style="font-size: 9px;">Unmute Audio</span></span>
</div>
<div style="display: none" [id]="p.identity + 'dv'" class="col-6 text-center">
<span><i class="far fa-video"></i><br><span style="font-size: 9px;">Hide Video</span></span>
</div>
<div style="display: none" [id]="p.identity + 'ev'" class=" col-6 text-center ">
<span><i class="far fa-video-slash"></i><br><span style="font-size: 9px;">Unhide Video</span></span>
</div>
</div>
<div class="bottom-left-name">{{p.identity}}</div>
</div>
</div>
.vidparticipant{
height: 300px;
max-width: 300px;
overflow: hidden;
}
video{
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
如何正确设置网络摄像头视频以显示其完整内容,同时将该视频保留在 div 中。谢谢!!!!!!!!!
解决方法
要在父容器中设置 video
内容,您可以使用 CSS 属性 object-fit
。
请参阅下面的 object-fit
示例并阅读文档以更好地理解。
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
此外,探索 CSS 属性 aspect-ratio
根据纵横比处理视频的可能性。
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.vidparticipant {
height: 300px;
max-width: 300px;
overflow: hidden;
}
video {
height: 100%;
width: 100%;
}
video.object-fit-fill {
object-fit: fill;
}
video.object-fit-cover {
object-fit: cover;
}
<h2>object-fit: fill</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div,then the object will be stretched to fit.</p>
<div class="vidparticipant">
<video controls class="object-fit-fill">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<br>
<h2>object-fit: cover</h2>
<p>If the video aspect ratio does not match the aspect ratio of its box/div,then the object will be clipped to fit.</p>
<div class="vidparticipant">
<video controls class="object-fit-cover">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>