lazy load videos

index.html

<div class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam enim aspernatur officiis repellat tenetur labore magni! Quia officia quisquam veniam culpa corrupti odit minus eius voluptatibus assumenda obcaecati sit quibusdam similique, doloribus molestiae aspernatur? Pariatur, non quae perferendis dolore, perspiciatis sint natus neque a nisi labore, maxime aspernatur ducimus. Fugit ipsa suscipit ducimus provident iure magnam consequatur animi totam itaque ea tempore blanditiis accusamus adipisci, commodi veniam ad aut excepturi ut eos? Cumque quia, natus obcaecati quaerat praesentium tempora temporibus vel sunt ex repellendus cupiditate iusto enim fuga facilis? Tempora reiciendis id ea maiores vel blanditiis rerum error ab ratione!
</div>  
<div class="otro">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis dignissimos molestiae dolores est molestias, pariatur corporis nam laudantium officia iusto obcaecati expedita fugit corrupti nostrum totam iste, vitae saepe quas. Voluptates labore maxime explicabo libero quas fugiat et vel praesentium recusandae similique sequi beatae excepturi voluptatum culpa, eius pariatur consequuntur qui accusamus rem eos, dolorem dolore veniam provident illo? Tenetur saepe cumque expedita dolores alias rem eos, maxime possimus! Nemo, quas. Dignissimos quae eum optio aliquam enim expedita alias libero. Eos omnis expedita enim provident accusamus numquam velit doloribus qui obcaecati nemo incidunt nam pariatur dicta blanditiis architecto, minus ab explicabo. Saepe adipisci, similique recusandae sed eaque magni iste voluptatibus ratione error accusamus quae repellat! Ea obcaecati, harum hic voluptates placeat delectus debitis rem asperiores eum distinctio sequi explicabo id assumenda. Saepe eligendi hic aut beatae voluptate nemo, consectetur, ex explicabo cupiditate vitae asperiores, animi quidem debitis possimus maiores autem amet nam odit quae deleniti esse aliquid natus atque totam. In molestias officiis eligendi alias neque nisi repudiandae, eveniet, minima ipsa voluptas amet saepe non voluptate facilis velit consequuntur modi voluptatibus! Vero, recusandae. Laborum, libero unde omnis ratione fuga porro assumenda laudantium! Eos laudantium reiciendis impedit est id quo culpa aut, voluptatem magnam commodi! Ad, provident ullam maiores a officia, quos molestiae laboriosam voluptatem corporis magni, necessitatibus cumque quas mollitia eum quo! Magnam eligendi dolorem ex minima excepturi quae animi recusandae sit aliquid quo qui harum, saepe sed, quibusdam reprehenderit laudantium unde eos nesciunt atque omnis? Exercitationem deserunt aliquid labore quibusdam, sequi illo perferendis animi inventore voluptate dignissimos asperiores repudiandae porro eveniet placeat libero veritatis delectus obcaecati iusto, in unde molestias veniam ut impedit. Soluta voluptatibus at reiciendis iste voluptates delectus ipsa, quidem, sint numquam quod laboriosam possimus. Nulla omnis rerum facilis in maiores facere molestiae, dolore eveniet minima quae corrupti atque modi! Illo incidunt eius quas quasi consectetur fuga alias atque hic, at suscipit. Vero facere eum autem alias voluptatibus? Sit autem quae eligendi eveniet perferendis nobis! Modi cupiditate nulla fuga nesciunt officia repellendus, accusamus sint nam dolore tempora quaerat laudantium iure deleniti sed suscipit quisquam dicta ratione amet numquam alias facere velit. Voluptatum officiis aliquid error et repellat veritatis molestias dolorem sint libero debitis minima delectus, commodi tempore, atque in? Ipsam impedit id eaque exercitationem minima ullam natus ducimus facere, fugiat similique earum expedita necessitatibus nihil amet inventore sequi consequuntur! Magnam numquam animi iusto quae porro! Odio.</div>
<div class="container-video">
  <p class="loading blink">loading...</p>
  <video id="video1" class="lazy" autoplay muted loop playsinline poster="https://picsum.photos/id/870/600/400?grayscale&blur=2">
    <source data-src="https://blucube.net/stuff/codepen-assets/html5vid/beepl-pink-vynil.webm" type="video/webm">
    <source data-src="https://blucube.net/stuff/codepen-assets/html5vid/beepl-pink-vynil.mp4" type="video/mp4">
  </video>  
</div>

lazy-load-videos.markdown

lazy load videos

A Pen by Jordi Ortega on CodePen.

License.

script.js

var video = document.getElementById("video1");

function lazyLoadVideos() {
  //https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/#lazy_loading_video
  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);
    });
  }
}


document.addEventListener("DOMContentLoaded", lazyLoadVideos, false );

var loadingText = (function() {
  var texto = document.querySelector(".loading");
  var intervalo = setInterval(function() {
    texto.style.opacity = texto.style.opacity == 0 ? 1 : 0;
  }, 500);
  return {intervalo: intervalo, texto: texto};
})();



/* React to Video Fully loaded.
    Solution by:
    http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/
   React to Video Fully loaded. 
*/

  var isVideoFullyLoaded = (function(intervalo,texto) {
    function clearListenersIntevals() {
       clearInterval(intervalo);
       video.removeEventListener("progress", init, false);
       document.removeEventListener("DOMContentLoaded", lazyLoadVideos, false );
    }
    function toggleOpacity (){
      texto.style.opacity = 0;
      video.style.opacity = 1;
    }
    function init(){
      // When buffer is 1 whole video is buffered
        if ( Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) === 1 ) {
          console.log("Entire video is buffered");
          clearListenersIntevals();
          toggleOpacity();  
        }  
    }
    video.addEventListener("progress", init, false);
  })(loadingText.intervalo, loadingText.texto)

style.css

video{
  opacity: 0;
  transition-property: opacity;
  transition-duration: 5000ms;
/*   transition-delay: 1000ms; */
  width: 100%;
  height: 400px;
  object-fit: cover;  
}
.container-video{
  width: 600px;
  height: 400px;
  position: relative;
}
.loading{
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}