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

Milica Mihajlija

En este codelab, aprenderás a adaptar tu contenido en función de la calidad de la red. El video de fondo de esta página solo se cargará cuando los usuarios utilicen una red rápida. En las 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 entregar un video y cuándo entregar una imagen. effectiveType puede ser 'slow-2g', '2g', '3g' o '4g'.

Navegadores compatibles

  • 61
  • 79
  • x
  • x

Origen

Paso 1: Verifica el tipo de conexión

El archivo index.html contiene una etiqueta <video> para mostrar el video en segundo plano (línea 22). El código de script.js carga el video estableciendo 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 lo está, comprueba el tipo de conexión.

  1. En script.js, agrega una sentencia if que pruebe si el objeto navigator.connection existe 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, de modo que el video se siga cargando en navegadores que no sean compatibles con 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 desde el 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
}

El código de carga de video funciona de la siguiente manera: la etiqueta <video> no descarga ni muestra nada al principio porque no se definió el atributo src. La URL del video que se cargará se especifica con el atributo data-src.

<video id="coverVideo" 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 sobre elementos HTML estándar. Un elemento de datos puede tener cualquier nombre, siempre que empiece con "data-".

Para mostrar el video en la página, debes obtener el valor de data-src y establecerlo 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 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 configurar 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ús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  3. Haga clic en la pestaña Red.
  4. Haz clic en el menú desplegable Regulación, que está configurado en Sin limitación de forma predeterminada. Selecciona 3G rápida.

Pestaña Network de Herramientas para desarrolladores con la opción Limitación rápida de 3G destacada

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

Fondo de imagen similar a una matriz con el texto “INFORMACIÓN DE RED” superpuesto

Crédito adicional: Responder a los cambios

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

Este es un ejemplo simple de cómo usar este objeto de escucha. Agrégala 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 red en el elemento <h2> y, luego, invoque la función.

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 una matriz con superposición de texto “INFORMACIÓN DE RED 4g”

Para volver a probarlo, sigue estos pasos:

  1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa.
  2. Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
  3. Haga clic en la pestaña Red.
  4. Haz clic en el menú desplegable Regulación, que está configurado 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 una matriz con superposición de texto “INFORMACIÓN DE RED 3 g”