我想在我正在处理的网页上实现这种分屏视频效果。 Here is a picture of the result I have so far
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NextDoor Pub&Grill</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<div class="header__menu full-width">
</div>
</header>
<nav>
<div class="nav flex full-width">
<div class="nav__video flex full-width">
<div id="left">
<div class="nav__video--left" onclick="expandRight()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoLeft/loop.webm">
<source src="assets/videoLeft/loop.mp4">
<source src="assets/videoLeft/loop.mov">
</video>
</div>
</div>
<div id="right">
<div class="nav__video--right" onclick="expandLeft()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoRight/loop.webm">
<source src="assets/videoRight/loop.mp4">
<source src="assets/videoRight/loop.mov">
</video>
</div>
</div>
</div>
</div>
</nav>
<script src="js/scripts.js"></script>
</body>
</html>
CSS:
.skin{
}
.full-width{
width: 100%;
}
.flex{
display: -webkit-flex;
display: flex;
}
.nav{
position: absolute;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}
.header__menu{
height: 100px;
background-color: rgba(0,0,255,0.5);
}
.nav__video{
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
}
#left{
width: 50%;
height: inherit;
object-fit: cover;
}
#right{
width: 50%;
height: inherit;
object-fit: cover;
}
.nav__video--left{
}
.nav__video--right{
}
video{
height: 100%;
width: 100%;
object-fit: contain;
}
}
因此，如上面的代码所示，视频所在的 div 的大小已调整为占据顶部菜单栏下方的整个高度。但是，视频仅显示在各自 div 的上部。如何确保视频在保持相同宽高比的同时占据整个空白区域？ (每个视频都会被截掉一部分)
最佳答案
经过一段时间的摸索，this似乎是正确的 CSS 组合，在考虑横幅的同时提供封面效果和全高。
height: calc(100vh - 100px); 给出全高减去标题高度。其余部分主要是通过整个元素树携带 height 和 width，以便 video 具有正确的尺寸来调整大小。
请记住，IE 不支持 object-size，没有它，这种效果只能借助 javascript 来实现。
.full-width{
width: 100%;
}
.flex{
display: -webkit-flex;
display: flex;
}
.nav{
position: absolute;
-webkit-flex-direction: column;
flex-direction: column;
height: calc(100vh - 100px);
}
.header__menu{
height: 100px;
background-color: rgba(0,0,255,0.5);
}
.nav__video{
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height:100%;
}
#left, #right {
width: 50%;
height: 100%;
}
#left{
background-color: green;
}
#right{
background-color: yellow;
}
.nav__video--left, .nav__video--right{
width: 100%;
height: 100%;
overflow:hidden;
}
.nav__video--left{
background-color: blue;
}
.nav__video--right{
background-color: red;
}
video{
width: 100%;
height: 100%;
object-fit: cover;
}
关于html - 如何制作全高分屏视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40813609/