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？

回答

相关问题