Habituellement, les vidéos sont téléchargées à l'aide de la balise vidéo (bien qu'une méthode alternative utilisant img soit apparue , cependant, ses capacités sont limitées). La manière d'implémenter le chargement vidéo paresseux dépend du cas d'utilisation. Discutons de plusieurs scénarios, chacun nécessitant une solution différente.
Pour les vidéos sans lecture automatique automatique
Pour les vidéos initiées par l'utilisateur (c'est-à-dire les vidéos qui ne sont pas lues automatiquement), vous devez spécifier l' attribut approprié dans le tag vidéo :
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Dans l'exemple ci-dessus, il utilise l'attribut précharge avec une valeur nulle , interdisant aux navigateurs de télécharger des données vidéo. L'attribut poster définit une image d'aperçu pour la vidéo, qui prendra la place de la vidéo sur la page jusqu'à ce qu'elle soit chargée. La nécessité d'un aperçu est due au fait que le chargement de la vidéo diffère selon les navigateurs:
- Dans Chrome, la valeur par défaut de l'attribut de préchargement était automatique , mais depuis la version 64, la valeur par défaut est les métadonnées . Même ainsi, sur Chrome de bureau, une partie de la vidéo peut être préchargée à l'aide de l'en-tête Content-Range. Firefox, Edge et Internet Explorer 11 se comportent de la même manière.
- Chrome, Safari 11.0 . 11.2, , Safari iOS .
- , preload none.
Étant donné que le comportement par défaut diffère d'un navigateur à l'autre en ce qui concerne le chargement automatique, il est probablement préférable de définir ce comportement explicitement. Dans les cas où l'utilisateur lance la lecture de lui-même, l'utilisation de preload = "none" est le moyen le plus simple de retarder le chargement de la vidéo sur toutes les plates-formes. L'attribut de préchargement n'est pas le seul moyen de retarder le chargement du contenu vidéo. La lecture rapide avec précharge vidéo peut vous donner des idées et des informations sur l'utilisation de la lecture vidéo en JavaScript.
Malheureusement, cela ne sert à rien si vous souhaitez utiliser des vidéos au lieu de GIF, nous en parlerons ci-dessous.
Pour une vidéo servant de remplacement de GIF animé
Bien que les GIF animés soient largement utilisés, ils ne correspondent pas aux équivalents vidéo à bien des égards, en particulier en termes de taille de fichier. Les GIF animés peuvent prendre plusieurs mégaoctets de données. Les vidéos avec une qualité visuelle similaire sont généralement beaucoup plus petites.
Utiliser l'élément vidéo en remplacement d'un GIF animé n'est pas facile. Les GIF animés ont trois caractéristiques:
- Ils sont automatiquement lus après le téléchargement.
- Ils sont continuellement en boucle ( bien que ce ne soit pas toujours le cas ).
- Ils n'ont pas de piste audio.
Obtenir ceci avec une balise vidéo ressemble à ceci:
<video autoplay muted loop playsinline>
<source src="one-does-not-simply.webm" type="video/webm">
<source src="one-does-not-simply.mp4" type="video/mp4">
</video>
Les attributs autoplay , muted et loop sont explicites. playinline est requis pour la lecture automatique sur iOS . Vous disposez maintenant d'un remplacement d'animation vidéo utilisable. Mais comment ajouter un chargement paresseux aux vidéos? Chrome n'a aucun problème avec le chargement vidéo paresseux , mais vous ne pouvez pas compter sur tous les navigateurs pour offrir ce comportement optimisé. En fonction de votre public et des exigences de votre application, vous devrez peut-être prendre les choses en main. Commençons par changer la connexion vidéo:
<video autoplay muted loop playsinline width="610" height="254" poster="one-does-not-simply.jpg">
<source data-src="one-does-not-simply.webm" type="video/webm">
<source data-src="one-does-not-simply.mp4" type="video/mp4">
</video>
Vous remarquerez peut-être l'ajout de l'attribut poster , qui vous permet de spécifier une image d'aperçu située sur la page au lieu de la balise vidéo jusqu'à ce que la vidéo soit chargée paresseusement. L'URL de la vidéo est placée dans l'attribut data-src de chaque élément source .
Nous utilisons JavaScript pour organiser le chargement "paresseux" en utilisant IntersectionObserver.
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
Nous itérons sur tous les enfants de source et convertissons leurs attributs data-src en attributs src . Une fois que vous faites cela, vous devez commencer à charger la vidéo en appelant la méthode de chargement , après quoi la lecture du média commencera automatiquement conformément à l'attribut de lecture automatique .
En utilisant cette méthode, vous obtenez une solution vidéo prête à l'emploi qui imite le comportement d'un GIF animé, mais ne nécessite pas la même utilisation intensive de données, et vous pouvez charger paresseusement ce contenu.
Bibliothèques à chargement différé
Les bibliothèques suivantes peuvent vous aider avec des vidéos à chargement différé:
- lozad.js est une version ultra-légère utilisant uniquement Intersection Observer. Ainsi, il est très efficace, mais il devra être polyfilled avant de pouvoir l'utiliser dans les anciens navigateurs.
- yall.js est une bibliothèque qui utilise Intersection Observer et accède aux gestionnaires d'événements. Il est compatible avec IE11 et les principaux navigateurs.
- Si vous avez besoin d'une bibliothèque lazyload pour React, vous pouvez envisager react-lazyload . Cette bibliothèque n'utilise pas Intersection Observer, mais fournit un moyen de charger paresseusement des images avec lesquelles les développeurs React seront familiers.
Chacune de ces bibliothèques est documentée et contient de nombreux modèles de balisage pour diverses tâches de chargement différé.