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
eraauto
, 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'intestazioneContent-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:
- Vengono riprodotti automaticamente al momento del caricamento.
- I loop vengono eseguiti in modo continuo (anche se non è sempre così).
- 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 attributodata-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.