Por lo general, los videos se cargan usando la etiqueta de video (aunque ha aparecido un método alternativo que usa img , sin embargo, sus capacidades son limitadas). La forma de implementar la carga diferida de video depende de su caso de uso. Analicemos varios escenarios, cada uno de los cuales requiere una solución diferente.
Para videos sin reproducción automática
Para los videos iniciados por el usuario (es decir, videos que no se reproducen automáticamente), debe especificar el atributo apropiado en la etiqueta de video :
<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 el atributo preload con un valor de none , lo que prohíbe a los navegadores descargar datos de video. El atributo poster establece una imagen de vista previa para el video, que ocupará el lugar del video en la página hasta que se cargue. La necesidad de una vista previa se debe al hecho de que la carga de videos difiere en diferentes navegadores:
- En Chrome, el valor predeterminado para el atributo de precarga era automático , pero desde la versión 64, el valor predeterminado es metadatos . Aun así, en el escritorio Chrome, una parte del video se puede precargar usando el encabezado Content-Range. Firefox, Edge e Internet Explorer 11 se comportan de manera similar.
- Chrome, Safari 11.0 . 11.2, , Safari iOS .
- , preload none.
Dado que el comportamiento predeterminado difiere entre los navegadores con respecto a la carga automática, probablemente sea mejor establecer este comportamiento explícitamente. En los casos en que el usuario inicia la reproducción por su cuenta, usar preload = "none" es la forma más fácil de retrasar la carga de video en todas las plataformas. El atributo de precarga no es la única forma de retrasar la carga de contenido de video. La reproducción rápida con precarga de video puede brindarle algunas ideas y conocimientos sobre cómo trabajar con la reproducción de video en JavaScript.
Desafortunadamente, esto es inútil si desea usar videos en lugar de GIF, hablaremos de eso a continuación.
Para un video que sirve como reemplazo de GIF animado
Aunque los GIF animados se utilizan ampliamente, no alcanzan los equivalentes de vídeo en muchos aspectos, especialmente en el tamaño del archivo. Los GIF animados pueden ocupar varios megabytes de datos. Los videos con una calidad visual similar suelen ser mucho más pequeños.
Usar el elemento de video como reemplazo de un GIF animado no es fácil. Los GIF animados tienen tres características:
- Se reproducen automáticamente después de la descarga.
- Se repiten continuamente ( aunque no siempre es así ).
- No tienen pista de audio.
Lograr esto con una etiqueta de video se parece a esto:
<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 de reproducción automática , silenciado y de bucle se explican por sí mismos. Se requiere playsinline para la reproducción automática en iOS . Ahora tiene un reemplazo de animación de video utilizable. Pero, ¿cómo se agrega la carga diferida a los videos? Chrome no tiene ningún problema con la carga de video de carga diferida , pero no puede contar con todos los navegadores para proporcionar este comportamiento optimizado. Dependiendo de su audiencia y los requisitos de la aplicación, es posible que deba tomar el asunto en sus propias manos. Primero, cambiemos la conexión de video:
<video 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>
Es posible que observe la adición del atributo poster , que le permite especificar una imagen de vista previa ubicada en la página en lugar de la etiqueta de video hasta que el video se carga de forma diferida. La URL del video se coloca en el atributo data-src de cada elemento de origen .
Usamos JavaScript para organizar la carga "perezosa" usando IntersectionObserver.
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);
});
}
});
Recorrimos todos los elementos secundarios de la fuente y convertimos sus atributos data-src en atributos src . Una vez que haga esto, debe comenzar a cargar el video llamando al método de carga , después de lo cual los medios comenzarán a reproducirse automáticamente de acuerdo con el atributo de reproducción automática .
Al usar este método, obtiene una solución de video lista para usar que imita el comportamiento de un GIF animado, pero no requiere el mismo uso intensivo de datos, y puede cargar este contenido de manera perezosa.
Bibliotecas de carga diferida
Las siguientes bibliotecas pueden ayudarlo con la carga diferida de videos:
- lozad.js es una versión ultraligera que utiliza únicamente Intersection Observer. Por lo tanto, es muy eficiente, pero será necesario complementarlo con polyfills antes de poder usarlo en navegadores más antiguos.
- yall.js es una biblioteca que usa Intersection Observer y accede a los controladores de eventos. Es compatible con IE11 y los principales navegadores.
- Si necesita una biblioteca de carga diferida para React, podría considerar react-lazyload . Esta biblioteca no usa Intersection Observer, pero proporciona una forma de cargar imágenes de forma diferida con la que los desarrolladores de React estarán familiarizados.
Cada una de estas bibliotecas está documentada y contiene muchas plantillas de marcado para varias tareas de carga diferida.