У меня есть проект 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
, но это вырезает / увеличивает масштаб.
Полноэкранное адаптивное видео
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>
используйте здесь object-fit
. Это решит вашу проблему.
.video {
width: 100vw;
height: 100vh;
position: fixed;
object-fit: cover;
}
Я попробовал это, и видео увеличилось, вырезая много всего, что находится внутри камеры.
нужна ссылка jsfiddle / stackblitz / любая, чтобы воспроизвести и помочь вам