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
eraauto
. Sin embargo, a partir de Chrome 64, la configuración La configuración predeterminada esmetadata
. Aun así, en la versión de escritorio de Chrome, una parte de El video se puede precargar con el encabezadoContent-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
esnone
.
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:
- Se reproducen automáticamente cuando se cargan.
- Se repiten indefinidamente (aunque no siempre es el caso).
- 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 atributodata-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.