Adapta el video a la publicación de imágenes en función de la calidad de la red

En este codelab, aprenderás a adaptar tu contenido según la calidad de la red. El video de fondo de esta página se cargará solo cuando los usuarios tengan una red rápida. En redes más lentas, se cargará una imagen.

La API de Network Information te permite acceder a información sobre la calidad de la conexión del usuario. Usarás su propiedad effectiveType para decidir cuándo publicar un video y cuándo una imagen. effectiveType puede ser 'slow-2g', '2g', '3g' o '4g'.

Navegadores compatibles

  • Chrome: 61.
  • Edge: 79.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

Paso 1: Comprueba el tipo de conexión

El archivo index.html contiene una etiqueta <video> para mostrar el video de fondo (línea 22). El código en script.js carga el video configurando el atributo src de la etiqueta de video. (El código de carga de video se describe con más detalle en el Paso 2).

Para cargar el video de forma condicional, primero verifica si la API de Network Information está disponible. Si es así, verifica el tipo de conexión.

  1. En script.js, agrega una sentencia if que pruebe si existe el objeto navigator.connection y si tiene la propiedad effectiveType.
  2. Agrega una sentencia if para verificar el effectiveType de la red.
if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // Only load video on the fastest connections.
  } else {
    // In any other case load the image.
  }
}

Une el código de carga de video existente en una sentencia else para que el video se cargue en navegadores que no admiten la API de Network Information.

if (navigator.connection && !!navigator.connection.effectiveType) {
  if (navigator.connection.effectiveType === '4g') {
    // video loading code
  } else {
    // image loading code
  }
} else {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

Paso 2: Carga el video

Si effectiveType es '4g', usa el código de carga de video del comienzo del codelab.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);
  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  // image loading code
}

Así es como funciona el código de carga de video: la etiqueta <video> no descarga ni muestra nada al principio porque no se configuró su atributo src. La URL del video que se carga se especifica con el atributo data-src.

<video id="coverVideo" playsinline autoplay loop muted data-src="https://cdn.glitch.com/b6491350-b058-4eb6-aa6c-55c93122073e%2FMatrix%2C%20Console%2C%20Hacking%2C%20Code.mp4?1551464245607"></video>

Los atributos de datos te permiten almacenar información adicional en elementos HTML estándar. Se puede asignar cualquier nombre a un elemento de datos, siempre y cuando comience con “data-”.

Para mostrar el video en la página, debes obtener el valor de data-src y configurarlo como el atributo src del elemento de video.

Primero, obtén el elemento DOM que contiene el recurso:

const video = document.getElementById('coverVideo');

Luego, obtén la ubicación del recurso del atributo data-src:

const videoSource = video.getAttribute('data-src');

Por último, configúralo como el atributo src del elemento de video:

video.setAttribute('src', videoSource);

La última línea se encarga del posicionamiento del CSS:

video.setAttribute('style', 'height: 100%; width: 100%; display:inline');

Paso 3: Carga la imagen

Para cargar condicionalmente una imagen en redes más lentas, usa la misma estrategia que para el video.

Agrega un elemento de imagen a index.html (justo después del elemento de video) y usa el atributo data-src en lugar del atributo src.

<img id="coverImage" data-src="https://cdn.glitch.com/36529535-5976-40f8-979b-40c898b86bd0%2F36529535-5976-40f8-979b-40c898b86bd0_1_Sn80dgiwpMjBVrqjfiDbnA.jpg?1553003835358" />

En script.js, agrega código para establecer el atributo src de la imagen según el effectiveType de la red.

if (navigator.connection.effectiveType === '4g') {
  const video = document.getElementById('coverVideo');
  const videoSource = video.getAttribute('data-src');
  video.setAttribute('src', videoSource);

  video.setAttribute('style', 'height: 100%; width: 100%; display:inline');
} else {
  const image = document.getElementById('coverImage');
  const imageSource = image.getAttribute('data-src');
  image.setAttribute('src', imageSource);

  image.setAttribute('style', 'height: 100%; width: 100%; display:inline');
}

Probar

Para probarlo, haz lo siguiente:

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  2. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  3. Haga clic en la pestaña Red.
  4. Haz clic en el menú desplegable Limitación, que se establece en Sin limitación de forma predeterminada. Selecciona 3G rápida.

Pestaña Red de DevTools con la opción de limitación rápida de 3G destacada

Ahora, vuelve a cargar la página con la limitación rápida de 3G habilitada. La app carga una imagen en segundo plano en lugar del video:

Fondo de imagen similar a una matriz con superposición de texto &quot;NETWORK INFORMATION&quot;

Crédito adicional: Responde a los cambios

¿Recuerdas que esta API tiene un objeto de escucha de eventos onchange? Puedes usarlo para muchas cosas: adaptar contenido de forma dinámica, como la calidad de video; reiniciar transferencias de datos diferidas cuando se detecta un cambio a un tipo de red de gran ancho de banda; o notificar a los usuarios cuando cambia la calidad de la red.

Este es un ejemplo sencillo de cómo usar este objeto de escucha. Agrega la función a script.js. Este código llamará a la función displayNetworkInfo cada vez que cambie la información de la red.

navigator.connection.addEventListener('change', displayNetworkInfo);

Ya hay un elemento <h2> vacío en la página index.html. Ahora, define la función displayNetworkInfo para que muestre la información de la red en el elemento <h2> y la invoque.

function displayNetworkInfo() {
  document.getElementById('connection').innerHTML = navigator.connection.effectiveType;
}

displayNetworkInfo();

Este es el estado final de la app en Glitch.

Fondo de video similar a Matrix con una superposición de texto &quot;NETWORK INFORMATION 4g&quot;

Para volver a probarlo, haz lo siguiente:

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  2. Presiona "Control + Mayúsculas + J" (o "Comando + Opción + J" en Mac) para abrir DevTools.
  3. Haga clic en la pestaña Red.
  4. Haz clic en el menú desplegable Limitación, que se establece en Sin limitación de forma predeterminada. Selecciona 3G rápida.
  5. Vuelve a cargar la app.

La app actualizará la información de la red a 3g:

Fondo de video similar a Matrix con superposición de texto &quot;NETWORK INFORMATION 3g&quot;