如何使<video>元素适合可用屏幕的整个高度和宽度

Question

我有一个Angle 6项目，我正在将用户网络摄像头流式传输到html元素。

基本上，我正在尝试在用户手机上复制视频或照片。但是，当前视频的大小很小。我希望将其适合整个可用的高度/宽度，而不会使其变形或拉伸。

.component.html

<div fxFlexFill fxLayout="column" class="videoContainer">
    <video #video autoplay></video>
</div>

<button class="lv-button gradient-theme" (click)="start()" [disabled]="started">Start</button>

.component.scss

video {
    border: 1px solid black;
    height: 80vh;
}

button {
    padding: 12px 25px;
    color: white;
    font-size: 15px;
    font-weight: 300;
    width: 100%;
}

现在是黑色的，因为我盖好了相机。但我希望它显示容器的整个高度。在不进行拉伸的情况下，我尝试使用object-fit: cover，但这会缩小/放大。

Answer 1

在此处使用object-fit。它将解决您的问题。

.video {
    width: 100vw;
    height: 100vh;
    position: fixed;
    object-fit: cover;
}

Answer 2

全屏响应视频

body {
  margin: 0;
  padding: 0;
  /*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background: #333;
  background-attachment: fixed;
  background-size: cover;
}


/* The only rule that matters */

#video-background {
  /*  making the video fullscreen  */
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}


/* These just style the content */

article {
  /*  just a fancy border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 10px solid rgba(255, 255, 255, 0.5);
  margin: 10px;
}

h1 {
  position: absolute;
  top: 60%;
  width: 100%;
  font-size: 36px;
  letter-spacing: 3px;
  color: #fff;
  font-family: Oswald, sans-serif;
  text-align: center;
}

h1 span {
  font-family: sans-serif;
  letter-spacing: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
}

h1 span a {
  color: #fff;
}

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!--  Content  -->
<article>
  <h1>Responsive Video Background</h1>
</article>

<!--  Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback  -->
<video autoplay loop id="video-background" muted plays-inline>
  <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>