Skip to content Skip to sidebar Skip to footer
Home / Html / Video

Load The Video Element Last

Post a Comment
I've got a video element at the top of my page, I was wondering if theres any way to load it after the rest of the DOM has been loaded? I want the video to load last.

Solution 1:

This seems to do what you want. In my sample I have only included an mp4 source, but you could add others for WebM and Ogg depending on what browsers you are supporting. You can simply populate all three attributes, or use the canPlayType test to determine the best for the users browser.

The video element defaults to autoplay (but you can remove that attribute from the <video...> tag and control it directly from the script. It also defaults to preload="auto" to let the browser control how much to preload, again you might want to turn that off if it's not optimal for your scenario (and different browsers have very different behaviors)

You might also want to hide the video element until you are ready to load content (though that will jiggle the page around a bit and might look weird for the user)

<!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>

Solution 2:

Google has some good guidance on this here.

In summary, change the src attributes to data-src attributes, and add a lazy class for targeting, e.g.:

<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>

Then use the following JavaScript to flip the data-src attributes to src attributes and trigger loading of the video:

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);
    });
  }
});

Post a Comment for "Load The Video Element Last"