Caricamento lento del video

Jeremy Wagner
Rachel Andrew

Come per gli elementi immagine, puoi anche eseguire il caricamento lento dei video. I video vengono generalmente caricati con l'elemento <video> (sebbene un metodo alternativo che utilizza <img> sia emersa con un'implementazione limitata). La modalità di caricamento lento di <video> dipende però dal caso d'uso. Analizziamo un paio di scenari che richiedono una soluzione diversa.

Per i video che non vengono riprodotti automaticamente

Per i video in cui la riproduzione viene avviata dall'utente (ovvero video che non vengono riprodotti automaticamente), potrebbe essere preferibile specificare l'attributo preload nell'elemento <video>:

<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'esempio precedente utilizza un attributo preload con valore none per impedire ai browser di precaricare qualsiasi dato video. L'attributo poster assegna all'elemento <video> un segnaposto che occuperà lo spazio durante il caricamento del video. Il motivo è che i comportamenti predefiniti per il caricamento dei video possono variare da browser a browser:

  • In Chrome, il valore predefinito per preload era auto, ma a partire da Chrome 64 il valore predefinito è metadata. Anche così, nella versione desktop di Chrome, una parte del video potrebbe essere precaricata tramite l'intestazione Content-Range. Gli altri browser basati su Chromium e Firefox si comportano in modo simile.
  • Come per Chrome sui computer, le versioni desktop 11.0 di Safari precaricano un intervallo di video. A partire dalla versione 11.2, vengono precaricati solo i metadati del video. In Safari su iOS, i video non vengono mai precaricati.
  • Quando la modalità Risparmio dati è attiva, il valore predefinito di preload è none.

Poiché i comportamenti predefiniti del browser relativi a preload non sono definitivi, essere espliciti è probabilmente la soluzione migliore. Nei casi in cui l'utente avvia la riproduzione, l'utilizzo di preload="none" è il modo più semplice per rimandare il caricamento del video su tutte le piattaforme. L'attributo preload non è l'unico modo per rinviare il caricamento dei contenuti video. La funzionalità Riproduzione rapida con precaricamento video può fornirti alcune idee e informazioni su come lavorare con la riproduzione video in JavaScript.

Purtroppo, non è utile per usare i video al posto delle GIF animate, di cui parleremo più avanti.

Per un video che funge da sostituzione di GIF animata

Sebbene le GIF animate possano essere utilizzate in molti modi, sono inferiori rispetto agli equivalenti dei video per molti aspetti, in particolare per quanto riguarda le dimensioni dei file. Le GIF animate possono estendersi nell'intervallo di diversi megabyte di dati. I video con qualità visiva simile tendono a essere molto più piccoli.

L'utilizzo dell'elemento <video> come sostituzione di una GIF animata non è semplice come l'elemento <img>. Le GIF animate hanno tre caratteristiche:

  1. Vengono riprodotti automaticamente una volta caricati.
  2. I loop vengono eseguiti continuamente (anche se non è sempre così).
  3. Non hanno una traccia audio.

Puoi ottenere questo risultato con l'elemento <video> in modo simile al seguente:

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

Gli attributi autoplay, muted e loop sono autoesplicativi. playsinline è necessario affinché la riproduzione automatica venga eseguita su iOS. Ora hai una sostituzione video come GIF utilizzabile su più piattaforme. Ma come si usa il caricamento lento? Per iniziare, modifica il markup <video> di conseguenza:

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

Noterai l'aggiunta dell'attributo poster, che ti consente di specificare un segnaposto da occupare lo spazio dell'elemento <video> fino al caricamento lento del video. Come per gli esempi di caricamento lento <img>, nascondi l'URL del video nell'attributo data-src su ogni elemento <source>. Poi, utilizza un codice JavaScript simile agli esempi di caricamento lento delle immagini basate su Intersection Observer:

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

Quando esegui il caricamento lento di un elemento <video>, devi iterare tutti gli elementi <source> secondari e invertire i relativi attributi data-src in attributi src. Dopodiché, devi attivare il caricamento del video chiamando il metodo load dell'elemento, dopodiché la riproduzione dei contenuti multimediali inizierà automaticamente in base all'attributo autoplay.

Utilizzando questo metodo, hai una soluzione video che emula il comportamento delle GIF animate, ma non richiede lo stesso utilizzo intensivo dei dati delle GIF animate, e puoi eseguire il caricamento lento dei contenuti.

Caricamento lento delle librerie

Le seguenti librerie possono aiutarti a eseguire il caricamento lento dei video:

  • vanilla-lazyload e lozad.js sono opzioni estremamente leggere che utilizzano solo Intersection Observer. Di conseguenza, hanno prestazioni elevate, ma dovranno essere sottoposti a polyfill prima di poter essere utilizzati su browser meno recenti.
  • yall.js è una libreria che utilizza Intersection Observer e utilizza i gestori di eventi. Può anche utilizzare il caricamento lento di immagini video poster utilizzando un attributo data-poster.
  • Se hai bisogno di una libreria di caricamento lento specifico di React, potresti prendere in considerazione react-lazyload. Sebbene non utilizzi Intersection Observer, offre un metodo familiare di caricamento lento delle immagini per coloro che sono abituati a sviluppare applicazioni con React.

Ognuna di queste librerie di caricamento lento è ben documentata, con molti pattern di markup per le varie attività di caricamento lento.