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

Milica Mihajlija

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Nota: questo codelab utilizza Chrome DevTools. Scarica Chrome, se non l'hai ancora fatto.

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

L'API Network Information consente di accedere a informazioni sulla qualità della connessione dell'utente. Userai 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

• 61
• 79
• x
• x

Fonte

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, verifica innanzitutto se l'API Network Information è disponibile; in tal caso, 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 valore 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.
  }
}

Racchiudi il codice di caricamento video esistente in un'istruzione else, in modo che il video continui a essere 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 video dell'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 del video: inizialmente il tag <video> non scarica né mostra nulla perché l'attributo src non è impostato. L'URL del video da caricare è specificato mediante l'attributo 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>

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

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

Per prima cosa, 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 del CSS:

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

Passaggio 3: carica l'immagine

Per caricare un'immagine 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é l'attributo 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 a 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 eseguire personalmente la verifica:

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi 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 Minore, che è impostato su Nessuna limitazione per impostazione predefinita. Seleziona 3G veloce.

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

Credito aggiuntivo: rispondere alle modifiche

Ricordi come questa API dispone di un listener di eventi onchange? Puoi utilizzarlo per molti scopi: adattare dinamicamente contenuti come la qualità video, riavviare i trasferimenti di dati differiti quando viene rilevata una modifica a un tipo di rete a larghezza di banda elevata o inviare notifiche agli utenti quando la qualità della rete cambia.

Di seguito è riportato un semplice esempio di come utilizzare questo listener. Aggiungilo a script.js. Questo codice chiamerà la funzione displayNetworkInfo ogni volta che le informazioni di rete cambiano.

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

Esiste già un elemento <h2> vuoto nella pagina index.html. Ora definisci la funzione displayNetworkInfo in modo che visualizzi le informazioni di rete nell'elemento <h2> e richiama la funzione.

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

displayNetworkInfo();

Ecco lo stato finale dell'app su Glitch.

Per verificarlo di nuovo:

1. Per visualizzare l'anteprima del sito, premi Visualizza app, quindi 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 Minore, che è impostato su Nessuna limitazione per impostazione predefinita. Seleziona 3G veloce.
5. Ricarica l'app.

L'app aggiornerà le informazioni di rete a 3G: