Adatta i video alla pubblicazione di immagini in base alla qualità della rete

Milica Mihajlija
Milica Mihajlija

In questo codelab, imparerai ad adattare i contenuti in base alla qualità della rete. Il video in background di questa pagina verrà caricato solo quando gli utenti sono collegati a una rete rapida. Sulle reti più lente verrà invece caricata un'immagine.

L'API Network Information consente di accedere alle informazioni sulla qualità della connessione dell'utente. Utilizzerai la proprietà effectiveType per decidere quando pubblicare un video e quando pubblicare un'immagine. effectiveType può essere 'slow-2g', '2g', '3g' o '4g'.

Supporto dei browser

  • Chrome: 61.
  • Edge: 79.
  • Firefox: non supportato.
  • Safari: non supportato.

Origine

Passaggio 1: controlla il tipo di connessione

Il file index.html contiene un tag <video> per visualizzare il video in background (riga 22). Il codice in script.js carica il video impostando l'attributo src del tag video. Il codice di caricamento del video è descritto più dettagliatamente nel passaggio 2.

Per caricare il video in modo condizionale, controlla innanzitutto se l'API Network Information è disponibile; in caso affermativo, controlla il tipo di connessione.

  1. In script.js, aggiungi un'istruzione if che verifichi se l'oggetto navigator.connection esiste e se ha la proprietà effectiveType.
  2. Aggiungi un'istruzione if per controllare il effectiveType della rete.
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.
  }
}

Aggrega il codice di caricamento video esistente in un'istruzione else, in modo che il video venga comunque caricato nei browser che non supportano l'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');
}

Passaggio 2: carica il video

Se effectiveType è '4g', utilizza il codice di caricamento del video dall'inizio 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
}

Ecco come funziona il codice di caricamento video: inizialmente il tag <video> non scarica né mostra nulla perché l'attributo src non è impostato. L'URL del video da caricare viene specificato utilizzando l'attributo 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>

Gli attributi dei dati ti consentono di memorizzare informazioni aggiuntive sugli elementi HTML standard. Un elemento dati può avere qualsiasi nome, purché inizi con "data-".

Per visualizzare effettivamente il video nella pagina, devi recuperare il valore da data-src e impostarlo come attributo src dell'elemento video.

Innanzitutto, recupera l'elemento DOM che contiene l'asset:

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

Quindi recupera la località della risorsa dall'attributo data-src:

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

Infine, impostalo come attributo src dell'elemento video:

video.setAttribute('src', videoSource);

L'ultima riga si occupa del posizionamento CSS:

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

Passaggio 3: carica l'immagine

Per caricare un'immagine in modo condizionale su reti più lente, utilizza la stessa strategia utilizzata per il video.

Aggiungi un elemento immagine a index.html (subito dopo l'elemento video) e utilizza l'attributo data-src anziché src.

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

In script.js, aggiungi il codice per impostare l'attributo src dell'immagine in base al valore effectiveType della rete.

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

Prova

Per testarlo autonomamente:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Rete.
  4. Fai clic sul menu a discesa Limitazione, che per impostazione predefinita è impostata su Nessuna limitazione. Seleziona 3G veloce.

Scheda Rete di DevTools con l&#39;opzione Limitazione 3G rapida evidenziata

Ora ricarica la pagina con il 3G veloce ancora abilitato. L'app carica un'immagine in background anziché il video:

Sfondo immagine simile a Matrix con overlay di testo &quot;NETWORK INFORMATION&quot;

Credito extra: rispondere ai cambiamenti

Ricordi perché questa API ha un listener di eventi onchange? Puoi utilizzarlo per molte cose: adattare dinamicamente i contenuti, ad esempio la qualità video; riavviare i trasferimenti di dati differiti quando viene rilevata una modifica a un tipo di rete ad alta larghezza di banda; o inviare notifiche agli utenti quando la qualità della rete cambia.

Ecco un semplice esempio di come utilizzare questo ascoltatore. Aggiungila a script.js. Questo codice chiamerà la funzione displayNetworkInfo ogni volta che le informazioni sulla rete cambiano.

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

Nella pagina index.html è già presente un elemento <h2> vuoto. Ora definisci la funzione displayNetworkInfo in modo che mostri le informazioni di rete nell'elemento <h2> e richiami la funzione.

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

displayNetworkInfo();

Ecco lo stato finale dell'app su Glitch.

Sfondo video simile a Matrix con overlay di testo &quot;NETWORK INFORMATION 4g&quot;

Per testarlo di nuovo:

  1. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero schermo intero.
  2. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
  3. Fai clic sulla scheda Rete.
  4. Fai clic sul menu a discesa Limitazione, che per impostazione predefinita è impostato su Nessuna limitazione. Seleziona 3G veloce.
  5. Ricarica l'app.

L'app aggiornerà le informazioni della rete a 3g:

Sfondo video simile a Matrix con overlay di testo &quot;NETWORK INFORMATION 3g&quot;