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
eraauto
, 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'intestazioneContent-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:
- Vengono riprodotti automaticamente una volta caricati.
- Vengono eseguiti in loop in modo continuo (anche se non è sempre richiesta).
- 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 attributodata-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.