Question

我的页面顶部有一个视频元素，我想知道在加载其余DOM之后是否有任何方法加载它？我希望视频最后加载。

Answer 1

这似乎做你想要的。在我的示例中，我只包含了一个mp4源代码，但您可以根据您支持的浏览器为WebM和Ogg添加其他内容。您可以简单地填充所有三个属性，或使用canPlayType测试来确定用户浏览器的最佳属性。

视频元素默认为自动播放（但您可以从<video...>标记中删除该属性并直接从脚本控制它。它还默认为preload="auto"让浏览器控制预加载多少，如果它不适合您的场景（并且不同的浏览器具有非常不同的行为），您可能想要关闭它

您可能还想隐藏视频元素，直到您准备加载内容为止（尽管这会使页面微微抖动并且对用户来说可能看起来很奇怪）

<!DOCTYPE html>
<html>
<head>
<title>Initialize video when doc is ready</title>

<script>
document.onreadystatechange = function () {
  console.log("readyState = " + document.readyState);
  if (document.readyState == "interactive") { // can also wait for "complete" here
    init();
  }
}
function init() {
    console.log("load the source for the video element")
    vid = document.getElementById("video")
    // can use the vid.canPlayType test to only load supported video
    // or have tags for MP4, WebM and Ogg to cover your bases
    vidMP4 = document.getElementById("videoMP4")
    vidMP4.setAttribute("src","video.mp4")
//  vid.play();
}
</script>

</head>
<body>

<p>Something before the video</p>
<video id="video" controls autoplay preload="auto" width=480 height=320>
<source id="videoMP4"></source></video>
<p>Something after the video</p>

</body>
</html>

Answer 2

Google对此here有一些很好的指导。

总而言之，将src属性更改为data-src属性，并添加一个lazy类用于定位，例如：

<video class="lazy" autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
  <source data-src="one-does-not-simply.webm" type="video/webm">
  <source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>

然后使用以下JavaScript将data-src属性翻转为src属性并触发视频的加载：

document.addEventListener("DOMContentLoaded", function() {
  var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));

  if ("IntersectionObserver" in window) {
    var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(video) {
        if (video.isIntersecting) {
          for (var source in video.target.children) {
            var videoSource = video.target.children[source];
            if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
              videoSource.src = videoSource.dataset.src;
            }
          }

          video.target.load();
          video.target.classList.remove("lazy");
          lazyVideoObserver.unobserve(video.target);
        }
      });
    });

    lazyVideos.forEach(function(lazyVideo) {
      lazyVideoObserver.observe(lazyVideo);
    });
  }
});

最后加载视频元素

2 个答案: