全屏HTML5視頻要大嗎？

Question

我正在建立一個網站，主頁上有全屏HTML5視頻。

我的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。

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

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

謝謝！

Answer 1

刪除下面提到的行和視頻，然后對其進行測試。 如果加載速度很快，則說明.mp4視頻的大小有問題。

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