如何製作全高分屏視頻？

我想在我正在處理的網頁上實現此分屏視頻效果。 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

感謝這裏的幫助，謝謝！ –

如何製作全高分屏視頻？

回答

相關問題