时间戳

首页 > 解决方案 > 将网络摄像头提要保留在 div 中，但也会在 div 中显示整个网络摄像头提要

html - 将网络摄像头提要保留在 div 中，但也会在 div 中显示整个网络摄像头提要

问题描述

在此处输入图像描述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 中。谢谢！！！！！！！

标签： htmlcssvideotwiliowebcam

解决方案

要设置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>

推荐阅读