Adapte o vídeo à veiculação de imagens com base na qualidade da rede

Milica Mihajlija

Neste codelab, você vai aprender a adaptar seu conteúdo com base na qualidade da rede. O vídeo de plano de fundo dessa página só será carregado quando os usuários estiverem em uma rede rápida. Em redes mais lentas, uma imagem será carregada.

A API Network Information permite acessar informações sobre a qualidade da conexão do usuário. Você vai usar a propriedade effectiveType para decidir quando exibir um vídeo e quando exibir uma imagem. effectiveType pode ser 'slow-2g', '2g', '3g' ou '4g'.

Etapa 1: verificar o tipo de conexão

O arquivo index.html contém uma tag <video> para mostrar o vídeo em segundo plano (linha 22). O código em script.js carrega o vídeo definindo o atributo src da tag de vídeo. O código de carregamento do vídeo é descrito com mais detalhes na Etapa 2.

Para carregar o vídeo condicionalmente, primeiro verifique se a API Network Information está disponível. Se estiver, verifique o tipo de conexão.

1. Em script.js, adicione uma instrução if que teste se o objeto navigator.connection existe e se ele tem a propriedade effectiveType.
2. Adicione uma instrução if para verificar a effectiveType da rede.

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

Encapsule o código de carregamento de vídeo atual em uma instrução else para que o vídeo ainda seja carregado em navegadores que não oferecem suporte à API 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');
}

Etapa 2: carregar o vídeo

Se o effectiveType for '4g', use o código de carregamento de vídeo do início do 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
}

Confira como o código de carregamento de vídeo funciona: a tag <video> não faz o download nem exibe nada no início porque o atributo src não está definido. O URL do vídeo a ser carregado é especificado usando o 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>

Os atributos de dados permitem armazenar informações extras em elementos HTML padrão. Um elemento de dados pode ser nomeado como quiser, desde que comece com "data-".

Para mostrar o vídeo na página, é necessário extrair o valor de data-src e defini-lo como o atributo src do elemento de vídeo.

Primeiro, acesse o elemento DOM que contém o recurso:

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

Em seguida, receba o local do recurso do atributo data-src:

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

E, por fim, defina isso como o atributo src do elemento de vídeo:

video.setAttribute('src', videoSource);

A última linha cuida do posicionamento do CSS:

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

Etapa 3: carregar a imagem

Para carregar condicionalmente uma imagem em redes mais lentas, use a mesma estratégia do vídeo.

Adicione um elemento de imagem a index.html (logo após o elemento de vídeo) e use o atributo data-src em vez do src.

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

Em script.js, adicione o código para definir o atributo src da imagem, dependendo do effectiveType da rede.

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

Faça um teste

Para testar:

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
3. Clique na guia Rede.
4. Clique no menu suspenso Limitação, que é definido como Sem limitação por padrão. Selecione 3G rápido.

Agora recarregue a página com o 3G rápido ainda ativado. O app carrega uma imagem em segundo plano em vez do vídeo:

Crédito extra: responder a mudanças

Lembra que essa API tem um listener de eventos onchange? Ele pode ser usado para muitas coisas: adaptar dinamicamente o conteúdo, como a qualidade do vídeo; reiniciar transferências de dados adiadas quando uma mudança para um tipo de rede de alta largura de banda é detectada; ou notificar os usuários quando a qualidade da rede muda.

Confira um exemplo simples de como usar esse listener. Adicione-o a script.js. Esse código vai chamar a função displayNetworkInfo sempre que as informações da rede mudarem.

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

Já há um elemento <h2> vazio na página index.html. Agora, defina a função displayNetworkInfo para que ela mostre as informações de rede no elemento <h2> e invoque a função.

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

displayNetworkInfo();

Confira o estado final do app no Glitch.

Para testar novamente:

1. Para visualizar o site, pressione View App. Em seguida, pressione Fullscreen .
2. Pressione "Control+Shift+J" (ou "Command+Option+J" no Mac) para abrir as Ferramentas do desenvolvedor.
3. Clique na guia Rede.
4. Clique no menu suspenso Limitação, que é definido como Sem limitação por padrão. Selecione 3G rápido.
5. Recarregue o app.

O app vai atualizar as informações de rede para 3G: