Fullscreen HTML5 video to big？

我正在主頁上構建一個帶有全屏HTML5視頻的網站。Fullscreen HTML5 video to big？

我的HTML：

<div class="fullscreen-bg"> 
    <div class="overlay-video"></div> 
    <video loop muted autoplay poster="assets/images/background.jpg" class="fullscreen-bg__video"> 
     <source src="assets/video/background.webm" type="video/webm"> 
     <source src="assets/video/background.ogg" type="video/ogg"> 
     <source src="assets/video/background.mp4" type="video/mp4"> 
    </video> 
</div>

和我的CSS：

.fullscreen-bg { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    z-index: -100; 
} 
.fullscreen-bg__video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: auto; 
    height: auto; 
    min-width: 100%; 
    min-height: 100%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

我.webm文件4,7mb，該.OGG文件4,4mb和.mp4文件是37， 1MB。

我的問題是，我的網站仍然很慢。我的視頻文件很大嗎？或者，我的標籤和加載視頻的方式有問題嗎？

我在互聯網上找不到任何解決方案，所以我希望有人知道解決方案。

謝謝！

來源

2016-08-22 Wilco Van Meppelen Scheppink

有你在不同的瀏覽器 –

是的，IE11，邊緣和Safari它實在是太慢了，但瀏覽器的其餘部分是不是真的快以及 –

你爲什麼不使用'寬度檢查：100％' ？ – Lee

刪除下面提到的行和視頻然後測試它。如果加載速度很快，那麼它的視頻尺寸爲.mp4。

<source src="assets/video/background.mp4" type="video/mp4">

來源

2016-08-22 13:46:56

太好了，我認爲這確實是問題所在。現在它在Firefox等快速工作，但邊緣和Internet Explorer目前沒有視頻。 –

是的，因爲這些瀏覽器將只支持'.mp4'。嘗試減小文件大小並將其包含在代碼中@WilcoVanMeppelenScheppink –

查看此處的鏈接[Browser_Support]（http://www.w3schools.com/html/html5_video.asp） –

Fullscreen HTML5 video to big？

回答

相關問題