Question

我建立了一个拥有背景视频的网站，希望改善用户体验。目前，所有文本元素在背景视频之前加载。我想要的是视频在文本出现之前首先加载，我该如何实现？下面是我正在使用的css和html代码段。您还可以使用此测试网址查看网站http://www.convenantkingsandqueens.academy

video.fullscreen {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

<header id="page-top" class="header">
  <div class="container">
    <div class="text-vertical-center">
    <img src="images/tmw_logo.png" class="img-responsive logo_img" alt="Timeline Media Workx Logo" style="height: 200px; width: 450px;">
    <video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop autoplay></video>
    </div>
  </div>
</header>

Answer 1

preload属性指定作者是否以及如何在页面加载时认为应该加载视频。

preload属性允许作者向浏览器提供关于他/她认为将带来最佳用户体验的提示。在某些情况下可以忽略此属性。

<video class="fullscreen" src="videos/bkg/sample.mp4" autobuffer autoloop loop preload="metadata"></video>

注意：如果存在自动播放，则会忽略preload属性。它在IE浏览器中不起作用

如何在其他html元素之前加载视频？

1 个答案: