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 uno utilizzando il metodo alternativo <img> ha sono emersi con un'implementazione limitata). La modalità di caricamento lento di <video> dipende dal caso d'uso. Analizziamo un paio di scenari, ognuno dei quali richiede 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 la riproduzione automatica), specificando preload attributo sull'elemento <video> potrebbe essere desiderabile:

<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 dal precaricamento di qualsiasi dato video. poster assegna all'elemento <video> un segnaposto che occuperà lo spazio durante il caricamento del video. Il motivo è che 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. Tuttavia, nella versione desktop di Chrome, una parte il video potrebbe essere precaricato utilizzando 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 del video. A partire dalla versione 11.2, vengono precaricati solo i metadati del video. In Safari su iOS, i video non vengono mai vengono precaricati.
  • Quando la modalità Risparmio dati è abilitata, il valore predefinito di preload è none.

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

Purtroppo, non è utile quando si preferisce usare i video al posto delle GIF animate, di cui parleremo dopo.

Per un video che funge da sostituzione di GIF animata

Anche se le GIF animate godono di un ampio utilizzo, sono inferiori rispetto agli equivalenti dei video in un in molti modi, in particolare per quanto riguarda le dimensioni dei file. Le GIF animate possono estendersi l'intervallo di vari megabyte di dati. I video di qualità visiva simile tendono molto più piccolo.

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

  1. Vengono riprodotti automaticamente una volta caricati.
  2. Vengono eseguiti in loop in modo continuo (anche se non è sempre richiesta).
  3. Non hanno una traccia audio.

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

<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 si verifichi in iOS. Ora hai un sostituzione di video come GIF utilizzabili su più piattaforme. Ma come fare sul 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'elemento poster , che ti consente di specificare un segnaposto per occupare lo spazio dell'elemento <video> fino al caricamento lento del video. Come per gli esempi di caricamento lento <img>, accantona l'URL del video nell'attributo data-src su ogni <source> . Da qui, utilizza un codice JavaScript simile Esempi di caricamento lento delle immagini con l'osservatore di incroci:

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 ripetere l'iterazione in tutti gli elementi figlio <source> e capovolgere i relativi attributi data-src in attributi src. Una volta devi attivare il caricamento del video richiamando il metodo load dell'elemento, dopodiché la riproduzione dell'elemento multimediale inizierà automaticamente. in base all'attributo autoplay.

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

Caricamento lento delle librerie

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

  • vanilla-lazyload e lozad.js sono opzioni super leggere che utilizzano solo Intersection Observer. In quanto tali, sono altamente performanti, dovranno essere compilati automaticamente prima di poter essere utilizzati nei browser meno recenti.
  • yall.js è una libreria che utilizza Osservatore di intersezione 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 per il caricamento lento specifico di React, puoi prendere in considerazione react-lazyload. Mentre non utilizza Intersection Observer, offre un metodo lazy familiare caricare immagini per coloro che sono abituati a sviluppare applicazioni con React.

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