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

Milica Mihajlija

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Remarque : Cet atelier de programmation utilise les outils pour les développeurs Chrome. Téléchargez Chrome si ce n'est pas déjà fait.

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 sont sur un réseau rapide. Sur les réseaux plus lents, c'est une image qui se charge.

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

• 61
• 79
• x
• x

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 dans 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 de manière conditionnelle, vérifiez d'abord 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 teste si l'objet navigator.connection existe et s'il possède la propriété effectiveType.
2. Ajoutez une instruction if pour vérifier le 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 existant de la vidéo dans une instruction else, afin que la vidéo continue de se charger dans les navigateurs non 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: Chargez la vidéo

Si effectiveType est défini sur '4g', utilisez le code de chargement vidéo du 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 le code de chargement de la vidéo fonctionne: la balise <video> ne télécharge ni n'affiche quoi que ce soit 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" 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 nommer n'importe quel é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');

Récupérez ensuite l'emplacement de la ressource à partir de l'attribut data-src:

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

Enfin, définissez-la 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 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 de l'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 par vous-même:

1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur 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.

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

Crédit supplémentaire: répondre aux changements

Vous vous souvenez que cette API possède un écouteur d'événements onchange ? Vous pouvez l'utiliser dans de nombreux cas, par exemple pour adapter dynamiquement du contenu (par exemple, pour améliorer la qualité vidéo), redémarrer les transferts de données différés lorsqu'un changement vers un type de réseau à haut débit est détecté, ou pour 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);

La page index.html contient déjà un élément <h2> vide. Définissez maintenant la fonction displayNetworkInfo afin qu'elle affiche les informations sur le réseau dans l'élément <h2> et appelle la fonction.

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

displayNetworkInfo();

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

Pour le tester à nouveau:

1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur 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.
5. Actualisez l'application.

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