Caricamento lento del video

Jeremy Wagner
Rachele Andrei

Come per gli elementi immagine, puoi anche eseguire il caricamento lento dei video. In genere i video vengono caricati con l'elemento <video> (anche se è emerso un metodo alternativo che utilizza <img> con un'implementazione limitata). Tuttavia, la modalità del caricamento lento di <video> dipende dal caso d'uso. Analizziamo un paio di scenari in cui ognuno richiede una soluzione diversa.

Per i video che non vengono riprodotti automaticamente

Per i video in cui la riproduzione viene avviata dall'utente (ovvero i video che non vengono riprodotti automaticamente), potrebbe essere opportuno 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 riportato sopra utilizza un attributo preload con valore none per impedire ai browser di precaricare qualsiasi dato video. L'attributo poster fornisce all'elemento <video> un segnaposto che occuperà lo spazio durante il caricamento del video. Il motivo è che il comportamento predefinito per il caricamento dei video può variare da browser a browser:

  • In Chrome, il valore predefinito di preload era auto, ma a partire dalla versione 64 di Chrome ora è metadata. Anche così, nella versione desktop di Chrome, una parte del video può essere precaricata utilizzando l'intestazione Content-Range. Altri browser basati su Chromium e Firefox si comportano in modo simile.
  • Come per Chrome su computer, le versioni desktop 11.0 di Safari precaricano un intervallo del video. 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 in merito a preload non sono definitivi, essere espliciti è probabilmente la scelta migliore. Nei casi in cui l'utente avvia la riproduzione, l'uso di preload="none" è il modo più semplice per posticipare il caricamento del video su tutte le piattaforme. L'attributo preload non è l'unico modo per posticipare il caricamento dei contenuti video. La funzionalità Riproduzione veloce con precaricamento video può fornirti alcune idee e informazioni su come lavorare con la riproduzione video in JavaScript.

Purtroppo, ciò non si rivela utile quando si vuole utilizzare i video al posto delle GIF animate, di cui parleremo più avanti.

Per video che sostituiscono una GIF animata

Sebbene le GIF animate siano ampiamente utilizzate, sono inferiori agli equivalenti video per vari aspetti, in particolare per quanto riguarda le dimensioni dei file. Le GIF animate possono estendersi fino a diversi megabyte di dati. I video con qualità visiva simile tendono a essere molto più piccoli.

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

  1. Vengono riprodotti automaticamente al momento del caricamento.
  2. I loop vengono eseguiti in modo continuo (anche se non è sempre così).
  3. Non hanno una traccia audio.

Il risultato con l'elemento <video> si presenta 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 abbia luogo su iOS. Ora hai a disposizione una sostituzione di video come GIF riparabile che funziona su più piattaforme. Ma come funziona 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 consente di specificare un segnaposto per occupare lo spazio dell'elemento <video> fino al termine del caricamento lento del video. Come per gli esempi di caricamento lento <img>, conserva l'URL del video nell'attributo data-src di ogni elemento <source>. Quindi, utilizza un codice JavaScript simile agli esempi di caricamento lento delle immagini basati su Intersection Observationr:

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 eseguire l'iterazione di tutti gli elementi <source> secondari e invertirne gli attributi data-src agli attributi src. Al termine, 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.

Con questo metodo hai una soluzione video che emula il comportamento delle GIF animate, ma non prevede lo stesso utilizzo intensivo dei dati delle GIF animate, e puoi caricare i contenuti tramite il caricamento lento.

Librerie con caricamento lento

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 Observationr. Per questo motivo, sono molto performanti, ma devono essere sottoposti a polyfill prima di poter essere utilizzati su browser meno recenti.
  • yall.js è una libreria che utilizza Intersection Observationr e utilizza i gestori di eventi. Può anche eseguire il caricamento lento delle immagini video poster utilizzando un attributo data-poster.
  • Se hai bisogno di una libreria di caricamento lento specifica di React, potresti considerare react-lazyload. Sebbene non utilizzi Intersection Observationr, offre un metodo familiare di caricamento lento delle immagini a 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.