Ленивая загрузка html видео с jQuery

Question

Я пытаюсь лениво загрузить мое html видео. Это в моем шаблоне WordPress, и я хочу, чтобы видео загружалось, когда пользователь добирается до его точки зрения.

Я новичок в JS, поэтому я думаю, что что-то не так. Как я могу проверить, правильно ли работает отложенная загрузка? Может быть, моя функция недействительна?

<video id="myVideo" autoplay loop muted playsinline src="<?= VIDEO ?>/video_footer.mp4">
    <source data-src="<?= VIDEO ?>/video_footer.mp4" type="video/mp4">
</video>

js:

$(function() {
$("video.myVideo source").each(function() {
    var sourceFile = $(this).attr('data-src');
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    video.load();
    video.play();
  });
});

Answer 1

Маловероятно, что он работает как есть.

Вы уже установили source на video, поэтому, даже если функция работает, видеофайл уже существует, поэтому нет ленивой загрузки. ..

Это правильная настройка:

<video id="myVideo" autoplay loop muted playsinline src="">
    <source data-src="<?= VIDEO ?>/video_footer.mp4" type="video/mp4">
</video>

Затем вы можете проверить, работает ли ваша функция

---

Другой Решение состоит в том, чтобы использовать intersection observer и делать это с pure JavaScript, простым, легким и работающим в большинстве случаев

Ленивые загрузки видео с чистым JavaScript:

<script type="text/javascript">
const lazyvideo = document.querySelectorAll('.lazy-video');
observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('video in the view');
         if (entry.target.querySelector('source').getAttribute('data-src') !== null) {
          const source = entry.target.querySelector('source').getAttribute('data-src')
          entry.target.setAttribute('src', source);
        }
      observer.unobserve(entry.target);
    } else {
      console.log('video out of view');
    }
  });
});

lazyvideo.forEach(video => {
  observer.observe(video);
});
</script>

Я добавил console.log('video out of view'); & console.log('video in the view');, чтобы проверить консоль, просматривается ли видео.

С помощью этого сценария, если вы хотите, чтобы видео загружалось лениво, просто добавьте class lazy-video к нему, и все готово;)

Полный код:

const lazyvideo = document.querySelectorAll('.lazy-video');
observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('video in the view');
         if (entry.target.querySelector('source').getAttribute('data-src') !== null) {
          const source = entry.target.querySelector('source').getAttribute('data-src')
          entry.target.setAttribute('src', source);
        }
      observer.unobserve(entry.target);
    } else {
      console.log('video out of view');
    }
  });
});

lazyvideo.forEach(video => {
  observer.observe(video);
});

#myVideo {
  max-width:400px;
  width:100%;
}

<video id="myVideo" class="lazy-video" autoplay loop muted playsinline src="">
    <source data-src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

Если вы хотите быть уверены, что ленивая нагрузка работает

• Откройте вам Chrome Инструменты разработчика и go на Network и выберите вкладку media
• Пока инструменты открыты, перезагрузите страницу
• Если вы не прокрутите раздел видео, вы не должны видеть видео в консоли
• При прокрутке, когда вы просматриваете раздел видео, вы должны увидеть загрузку видео на вкладке мультимедиа

См. скриншоты ниже:

Еще нет:

В поле зрения: