如何制作全高分屏视频？

我想在我正在处理的网页上实现此分屏视频效果。 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&amp;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的上半部分。如何确保视频占用全部空白区域，同时保持相同的高宽比？（每个视频的一部分将被切断）

来源

2016-11-25 S. Miller

在经过一段时间后，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; 
}

来源

2016-11-26 00:57:53 Ouroborus

尝试

video { 
    width: auto; 
    min-width: 100%; 
    height: auto; 
    min-height: 100%; 
}

或

video { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    right: 0; 
    width: 100%; 
    height: 100vh; 
}

来源

2016-11-26 00:22:28

Here是工作提琴我希望比赛是你所期待的。

.nav__video--left{ 
    background-color: blue; 
    background-size: cover; 
} 

.nav__video--right{ 
background-color: red; 
} 

video{ 
    object-fit: cover; 
    min-height: 100vh; 
    min-width: 100%; 
    overflow: hidden; 
}

我已经然后设置object-fit: cover让视频充满充满整个股利和overflow:hidden;隐藏视频的扩展股利之外的部分。

来源

2016-11-26 00:28:48 A1raa

IE确实支持它，至少最新的版本和以前的任何东西都被使用了1％。你将会遇到困难，牺牲一段时间让100％的浏览器覆盖率达到最佳状态。我相信有一种方法可以解决FF问题。如果我有时间，我会为你寻找。 – A1raa

感谢这里的帮助，谢谢！ –

如何制作全高分屏视频？

回答

相关问题