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

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浏览器不支持