Ленивая загрузка видео с автозапуском - PullRequest
Новая
       24

Ленивая загрузка видео с автозапуском

0 голосов
/ 31 марта 2020

Так вот что я пытаюсь выяснить. Я хочу, чтобы на странице было полно коротких видео, десятки из которых загружались по мере того, как человек прокручивал страницу вниз, чтобы избежать ненужной загрузки видеофайлов. Вот код, который у меня есть, кто-то может его критиковать? (В самых базовых c терминах, которые я все еще изучаю!)

Я хочу использовать класс .lazyvid вместо того, чтобы ориентироваться на все видео на странице, но я не уверен, куда поместить имя класса в javascript.

HTML (с изображениями вверху просто в качестве заполнителя) 

<body>

<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />

<video class="lazyvid" autoplay muted loop playsinline>
  <source src="IMG_0881.mp4" type="video/mp4">
</video>

</body>

CSS

img {
  background: #F1F1FA;
  width: 400px;
  height: 300px;
  display: block;
  margin: 10px auto;
  border: 0;
}

.lazyvid {
 margin-left: auto;
  margin-right: auto;
  display: block;
  width: 50%;
}

Javascript

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