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 quand diffuser une image. effectiveType
peut être 'slow-2g'
, '2g'
, '3g'
ou '4g'
.
É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 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.
- Dans
script.js
, ajoutez une instructionif
qui vérifie si l'objetnavigator.connection
existe et s'il possède la propriétéeffectiveType
. - Ajoutez une instruction
if
pour vérifier leeffectiveType
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 comme 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 tester cette fonctionnalité par vous-même:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Réseau.
- Cliquez sur la liste déroulante Limitation, qui est définie sur Pas de limitation par défaut. Sélectionnez 3G rapide.
Actualisez à nouveau la page avec la simulation de connexion 3G rapide toujours activée. L'application charge une image en arrière-plan au lieu de la vidéo:
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.
Pour tester à nouveau:
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Réseau.
- Cliquez sur la liste déroulante Limitation, qui est définie sur Pas de limitation par défaut. Sélectionnez 3G rapide.
- Actualisez l'application.
L'application met à jour les informations sur le réseau sur 3G: