Lazy Load html video con jQuery

Estoy tratando de cargar de forma diferida mi video html. Está en mi plantilla de WordPress y quiero que el video se cargue cuando el usuario llegue a su punto de vista.

Soy nuevo en JS, así que creo que algo anda mal. ¿Cómo puedo comprobar si la carga diferida funciona correctamente? ¿Quizás mi función no es válida?

<video id="myVideo" autoplay loop muted playsinline src="https://stackoverflow.com/questions/61384355/<?= VIDEO ?>/video_footer.mp4">
    <source data-src="https://stackoverflow.com/questions/61384355/<?= 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();
  });
});

Es poco probable que esté funcionando como está.

Ya ha configurado el source a video así que incluso si la función está funcionando, el archivo de video ya está allí, así que no hay carga diferida…

Esta es la configuración correcta:

<video id="myVideo" autoplay loop muted playsinline src="">
    <source data-src="https://stackoverflow.com/questions/61384355/<?= VIDEO ?>/video_footer.mp4" type="video/mp4">
</video>

Entonces puedes comprobar si tu función funciona.

Otra solución es usar intersection observer y hazlo con pure JavaScriptsimple, ligero y funciona en la mayoría de los casos

Video de carga diferida con JavaScript puro:

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

Yo he añadido console.log('video out of view'); & console.log('video in the view'); para verificar en la consola si el video está a la vista o no.

Con este script, si desea que un video se cargue de forma diferida, simplemente agregue un class lazy-video y listo 😉

Código completo:

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>

Si quieres estar seguro de que la carga diferida funciona

• Abre las herramientas para desarrolladores de Chrome y ve a Network y seleccione el
  media pestaña
• Mientras tengas las herramientas abiertas recarga la página
• Si no se ha desplazado a la sección de video, entonces no debería ver el video en su consola
• Mientras se desplaza cuando está en la vista de la sección de video, debe ver la carga del video en la pestaña de medios

Vea las capturas de pantalla a continuación:

No allí todavía:

En vista: