Adapter la vidéo à la diffusion d'images en fonction de la qualité du réseau

Dans cet atelier de programmation, vous allez apprendre à adapter votre contenu en fonction de la qualité du réseau. La vidéo en arrière-plan de cette page ne se charge que lorsque les utilisateurs se trouvent sur un réseau rapide. Sur les réseaux plus lents, une image est chargée à la place.

L'API Network Information vous permet d'accéder à des informations sur la qualité de la connexion de l'utilisateur. Vous utiliserez sa propriété effectiveType pour décider quand diffuser une vidéo et une image. effectiveType peut être 'slow-2g', '2g', '3g' ou '4g'.

Navigateurs pris en charge

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

Source

Étape 1 : Vérifiez le type de connexion

Le fichier index.html contient une balise <video> pour afficher la vidéo en arrière-plan (ligne 22). Le code de script.js charge la vidéo en définissant l'attribut src de la balise vidéo. (Le code de chargement de la vidéo est décrit plus en détail à l'étape 2.)

Pour charger la vidéo sous certaines conditions, commencez par vérifier si l'API Network Information est disponible. Si c'est le cas, vérifiez le type de connexion.

  1. Dans script.js, ajoutez une instruction if qui vérifie si l'objet navigator.connection existe et s'il possède la propriété effectiveType.
  2. Ajoutez une instruction if pour vérifier l'état effectiveType du réseau.
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.
  }
}

Encapsulez le code de chargement de la vidéo existant dans une instruction else afin que la vidéo continue de se charger dans les navigateurs qui ne sont pas compatibles avec 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');
}

Étape 2 : Charger la vidéo

Si effectiveType est '4g', utilisez le code de chargement de la vidéo depuis le début de l'atelier de programmation.

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
}

Voici comment fonctionne le code de chargement de la vidéo : la balise <video> ne télécharge ni n'affiche rien au début, car son attribut src n'est pas défini. L'URL de la vidéo à charger est spécifiée à l'aide de l'attribut 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>

Les attributs de données vous permettent de stocker des informations supplémentaires sur les éléments HTML standards. Vous pouvez attribuer n'importe quel nom à un élément de données, à condition qu'il commence par "data-".

Pour afficher la vidéo sur la page, vous devez obtenir la valeur de data-src et la définir en tant qu'attribut src de l'élément vidéo.

Commencez par récupérer l'élément DOM qui contient l'élément :

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

Obtenez ensuite l'emplacement de la ressource à partir de l'attribut data-src :

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

Enfin, définissez-le comme attribut src de l'élément vidéo :

video.setAttribute('src', videoSource);

La dernière ligne gère le positionnement CSS :

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

Étape 3: Charger l'image

Pour charger une image de manière conditionnelle sur des réseaux plus lents, utilisez la même stratégie que pour la vidéo.

Ajoutez un élément image à index.html (juste après l'élément vidéo) et utilisez l'attribut data-src au lieu de l'attribut src.

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

Dans script.js, ajoutez du code pour définir l'attribut src de l'image en fonction du effectiveType du réseau.

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

Essayer

Pour le tester vous-même:

  1. Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran) plein écran.
  2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  3. Cliquez sur l'onglet Réseau.
  4. Cliquez sur le menu déroulant Limitation, défini par défaut sur Aucune limitation. Sélectionnez 3G rapide.

Onglet &quot;Network&quot; (Réseau) des outils pour les développeurs, avec l&#39;option &quot;Fast 3G throttling&quot; (Limiter la 3G rapide) mise en évidence

Maintenant, actualisez la page en activant la 3G rapide. L'application charge une image en arrière-plan au lieu de la vidéo:

Arrière-plan d&#39;image semblable à Matrix avec superposition du texte &quot;NETWORK INFORMATION&quot; (INFORMATIONS SUR LE RÉSEAU)

Crédit supplémentaire : Réagir aux changements

Vous vous souvenez que cette API dispose d'un onchange écouteur d'événement ? Vous pouvez l'utiliser pour de nombreuses choses: adapter dynamiquement le contenu, comme la qualité vidéo ; redémarrer les transferts de données différés lorsqu'un changement vers un type de réseau à bande passante élevée est détecté ; ou avertir les utilisateurs lorsque la qualité du réseau change.

Voici un exemple simple d'utilisation de cet écouteur. Ajoutez-le à script.js. Ce code appelle la fonction displayNetworkInfo chaque fois que les informations réseau changent.

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

Un élément <h2> vide existe déjà sur la page index.html. Définissez maintenant la fonction displayNetworkInfo pour qu'elle affiche les informations réseau dans l'élément <h2>, puis appelez la fonction.

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

displayNetworkInfo();

Voici l'état final de l'application sur Glitch.

Arrière-plan vidéo semblable à Matrix avec superposition de texte &quot;NETWORK INFORMATION 4g&quot;

Pour tester à nouveau :

  1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.
  2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  3. Cliquez sur l'onglet Réseau.
  4. Cliquez sur la liste déroulante Limitation, qui est définie sur Pas de limitation par défaut. Sélectionnez 3G rapide.
  5. Actualisez l'application.

L'application met à jour les informations sur le réseau sur 3G:

Arrière-plan de vidéo semblable à Matrix avec superposition de texte &quot;NETWORK INFORMATION 3g&quot;