Carga diferida de videos

Jeremy Wagner
Rachel Andrew

Al igual que con los elementos de imagen, también puedes subir videos de carga diferida. Por lo general, los videos se cargan con el elemento <video> (aunque una método alternativo con <img> tiene surgieron con una implementación limitada). Cómo realizar una carga diferida de <video> depende del para tu caso de uso. Analicemos un par de situaciones que requieren un una solución diferente.

Para videos sin reproducción automática

En el caso de los videos en los que el usuario inicia la reproducción (es decir, aquellos que no la reproducción automática), especificando preload en el elemento <video> puede ser conveniente:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

En el ejemplo anterior, se usa un atributo preload con un valor de none para evitar que los navegadores de la precarga de cualquier dato de video. El poster le da al elemento <video> un marcador de posición que ocupará el espacio mientras se carga el video. Esto se debe a que que los comportamientos predeterminados para cargar videos pueden variar de un navegador a otro:

  • En Chrome, la configuración predeterminada para preload era auto. Sin embargo, a partir de Chrome 64, la configuración La configuración predeterminada es metadata. Aun así, en la versión de escritorio de Chrome, una parte de El video se puede precargar con el encabezado Content-Range. Otros navegadores basados en Chromium y Firefox se comportan de manera similar.
  • Al igual que con Chrome para computadoras de escritorio, las versiones 11.0 para computadoras de escritorio de Safari precargarán un rango del video. A partir de la versión 11.2, solo se precargan los metadatos del video. En Safari para iOS, los videos no se precargado.
  • Cuando el modo de Ahorro de datos está habilitado, el valor predeterminado de preload es none.

Como los comportamientos predeterminados del navegador con respecto a preload no son inamovibles, ser explícito es probablemente la mejor opción. En estos casos, cuando el usuario inicia reproducción, usar preload="none" es la forma más fácil de diferir la carga de un video en en todas las plataformas. El atributo preload no es la única forma de diferir la carga de contenido de video. Reproducción rápida con video La precarga puede darte algunas ideas y observaciones para trabajar con la reproducción de videos en JavaScript.

Lamentablemente, no es útil si quieres usar video en lugar de o GIF animados, que veremos a continuación.

Para videos que sirvan como reemplazo de GIF animado

Si bien los GIF animados se utilizan ampliamente, son deficientes como sus equivalentes de video en un de varias maneras, especialmente en lo que respecta al tamaño de los archivos. Los GIF animados pueden tener el rango de varios megabytes de datos. Los videos con una calidad visual similar tienden a serán mucho más pequeños.

Utilizar el elemento <video> como reemplazo de un GIF animado no es lo siguiente: sencillo como el elemento <img>. Los GIF animados tienen tres características:

  1. Se reproducen automáticamente cuando se cargan.
  2. Se repiten indefinidamente (aunque no siempre es el caso).
  3. No tienen una pista de audio.

Lograr esto con el elemento <video> se ve de la siguiente manera:

<video autoplay muted loop playsinline>
  <source src="one-does-not-simply.webm" type="video/webm">
  <source src="one-does-not-simply.mp4" type="video/mp4">
</video>

Los atributos autoplay, muted y loop se explican a sí mismos. Para que ocurra la reproducción automática, se necesita playsinline iOS. Ahora cuentas con un reemplazo útil de video como GIF que funcione en todas las plataformas. Pero cómo hacerlo sobre la carga diferida? Para comenzar, modifica el lenguaje de marcado de <video> según corresponda:

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

Notarás que se agregó el elemento poster atributo, que te permite especificar un marcador de posición para que ocupe el espacio del elemento <video> hasta que el video se cargue de forma diferida. Al igual que con los ejemplos de carga diferida de <img>, almacena la URL del video en el atributo data-src de cada <source> . Desde allí, usa código JavaScript similar al Ejemplos de carga diferida de imágenes basadas en Intersection Observer:

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

Cuando realizas una carga diferida de un elemento <video>, debes iterar a través de todos los elementos secundarios Elementos <source> y cambia sus atributos data-src por los atributos src. Una vez Esto significa que, para activar la carga del video, debes llamar al método load del elemento, tras el cual el contenido multimedia comenzará a reproducirse automáticamente según el atributo autoplay.

Con este método, tienes una solución de video que emula el comportamiento de los GIF animados, pero no genera el mismo uso de datos intensivo que los GIF animados y puedes hacer una carga diferida de ese contenido.

Carga diferida de bibliotecas

Las siguientes bibliotecas pueden ayudarte a realizar cargas diferidas de video:

  • vanilla-lazyload y lozad.js son opciones súper ligeras que usan Intersection Observer únicamente. Por eso, tienen un alto rendimiento, deberá tener polyfill para poder utilizarlas en navegadores anteriores.
  • yall.js es una biblioteca que utiliza Intersection Observer y recurrir a los controladores de eventos También puede cargar de forma diferida imágenes poster de video mediante un atributo data-poster.
  • Si necesitas una biblioteca de carga diferida específica para React, puedes considerar react-lazyload) Si bien no usa Intersection Observer; sí proporciona un método familiar de inactividad cargando imágenes para quienes están acostumbrados a desarrollar aplicaciones con React.

Cada una de estas bibliotecas de carga diferida está bien documentada, con mucho lenguaje de marcado. para las diversas tareas de carga diferida.