Vidéo à chargement différé

Jeremy Wagner
Rachel Andrew

Vous pouvez également effectuer le chargement différé des vidéos, comme pour les éléments image. Les vidéos sont généralement chargées avec l'élément <video> (même si une autre méthode à l'aide de <img> a est apparu avec une implémentation limitée). La méthode de chargement différé d'<video> dépend de la cas d'utilisation. Examinons deux scénarios dans lesquels chacun nécessite solution différente.

Pour les vidéos sans lecture automatique

Pour les vidéos dont la lecture est lancée par l'utilisateur (c'est-à-dire les vidéos qui ne sont pas autoplay), en spécifiant le preload attribut sur l'élément <video> peut être souhaitable:

<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>

L'exemple ci-dessus utilise un attribut preload avec la valeur none pour empêcher les navigateurs en préchargeant n'importe quelle donnée vidéo. poster donne à l'élément <video> un espace réservé qui occupera cet espace pendant le chargement de la vidéo. Cela s'explique par le fait que le comportement par défaut du chargement des vidéos peut varier d'un navigateur à l'autre:

  • Dans Chrome, la valeur par défaut pour preload était auto, mais à partir de Chrome 64, elle est désormais la valeur par défaut est metadata. Malgré cela, sur la version pour ordinateur de Chrome, la vidéo peut être préchargée à l'aide de l'en-tête Content-Range. Les autres navigateurs basés sur Chromium et Firefox se comportent de la même manière.
  • Comme avec Chrome pour ordinateur, la version 11.0 de Safari pour ordinateur précharge une plage de la vidéo. Depuis la version 11.2, seules les métadonnées de la vidéo sont préchargées. Dans Safari sur iOS, les vidéos ne sont jamais préchargées.
  • Lorsque le mode Économiseur de données est activé, preload est défini par défaut sur none.

Comme les comportements par défaut du navigateur preload ne sont pas figés, être explicite est probablement votre meilleure solution. Dans ce cas, lorsque l'utilisateur initie preload="none" est le moyen le plus simple de différer le chargement d'une vidéo sur toutes les plates-formes. L'attribut preload n'est pas le seul moyen de différer le chargement de contenus vidéo. Lecture rapide avec la vidéo Le préchargement peut vous donner quelques idées et un aperçu de la façon de travailler avec la lecture de vidéos en JavaScript.

Malheureusement, cela n'est pas utile si vous voulez utiliser des vidéos à la place GIF animés, que nous aborderons ensuite.

Pour une vidéo servant de remplacement de GIF animé

Si les GIF animés sont très utilisés, ils sont inférieurs aux équivalents vidéo dans un plusieurs façons, en particulier en termes de taille de fichier. Les GIF animés peuvent s'étirer dans de plusieurs mégaoctets de données. Les vidéos de qualité visuelle similaire ont tendance à être beaucoup plus petite.

L'utilisation de l'élément <video> pour remplacer le GIF animé n'est pas aussi aussi simple que l'élément <img>. Les GIF animés ont trois caractéristiques:

  1. Elles sont lues automatiquement une fois chargées.
  2. Elles sont lues en boucle (mais ce n'est pas toujours cas).
  3. Elles n'ont pas de piste audio.

L'élément <video> permet d'atteindre cet objectif:

<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. playsinline est nécessaire pour que la lecture automatique ait lieu dans iOS À présent, Remplacement de vidéo en GIF réparable qui fonctionne sur toutes les plates-formes. Mais comment y parvenir le chargement différé. Pour commencer, modifiez le balisage <video> en conséquence:

<video class="lazy" 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 que poster attribut, qui vous permet de spécifier un espace réservé pour occuper l'espace de l'élément <video> jusqu'à ce que la vidéo soit à chargement différé. Comme pour les exemples de chargement différé <img>, Conservez l'URL de la vidéo dans l'attribut data-src chaque <source> . Ensuite, utilisez un code JavaScript semblable à celui Exemples de chargement différé d'image basé sur l'observateur d'intersection:

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

Lorsque vous chargez un élément <video> en différé, vous devez itérer tous les éléments enfants Éléments <source> et inversez leurs attributs data-src en attributs src. Une fois vous devez déclencher le chargement de la vidéo en appelant la méthode à la méthode load de l'élément. La lecture du contenu multimédia commencera alors automatiquement. conformément à l'attribut autoplay.

Avec cette méthode, vous disposez d'une solution vidéo qui émule le comportement des GIF animés, mais n'engendre pas la même utilisation de données intensive que les GIF animés, et vous pouvez charger ce contenu en différé.

Bibliothèques à chargement différé

Les bibliothèques suivantes peuvent vous aider à charger des vidéos de manière différée:

  • vanilla-lazyload et lozad.js sont des options très légères. qui n'utilisent que l'outil Intersection Observer. Ils sont donc très performants, mais devront être émulées avant de pouvoir les utiliser dans des navigateurs plus anciens.
  • yall.js est une bibliothèque qui utilise Intersection Observer et utilise les gestionnaires d'événements. Il peut également charger des images vidéo poster de manière différée à l'aide d'un attribut data-poster.
  • Si vous avez besoin d'une bibliothèque de chargement différé spécifique à React, vous pouvez envisager react-lazyload. Bien qu'il n'utilise pas Intersection Observer, mais il fournit une méthode familière d'affichage différé de chargement d'images pour ceux qui ont l'habitude de développer des applications avec React.

Chacune de ces bibliothèques de chargement différé est bien documentée, avec de nombreux balisages différents modèles de chargement différé.