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

【问题标题】：How to make a <video> element fit the entire height and width of the available screen如何使 <video> 元素适合可用屏幕的整个高度和宽度
【发布时间】：2018-09-10 09:37:15
【问题描述】：

我有一个 Angular 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，但这会缩小/放大。

【问题讨论】：

需要一个 jsfiddle/stackblitz/whatever 链接来重现和帮助您

标签： html css angular video getusermedia

【解决方案1】：

在这里使用object-fit。它会解决你的问题。

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

【讨论】：

我试过了，视频放大后会切掉相机内的很多东西。

【解决方案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>

【讨论】：