HTML5 - Video avanzato

Video taggato de HTML5 Abbiamo molte opzioni per arricchire i nostri documenti, al fine di rendere le nostre pagine più ricche in termini di contenuti visivi e uditivi, grazie al fatto che non dipendiamo da plugin o di terze parti, possiamo manipolare i nostri video in modo da consentirci di raggiungere i nostri obiettivi senza problemi.
Precaricamento video
Quando lavoriamo con contenuti più pesanti come i video, dobbiamo stare molto attenti a non saturare la pagina, poiché questo invece di arricchire i nostri contenuti può ottenere l'effetto opposto e rallentare il nostro documento e fornire un'esperienza di navigazione scadente.
Anticipando questo in HTML5 Nell'elemento video, ci consente di precaricare il video da mostrare in questo modo, assicurandoci di avere un piccolo contenuto prima di mostrarlo all'utente e quindi di non interrompere la sua esperienza sulla nostra pagina.
Per questo possiamo usare i seguenti attributi:
precarico - è l'attributo che ci consentirà di utilizzare la funzionalità di precaricamento del video.
nessuno - il video non verrà caricato finché l'utente non lo riproduce.
metadati - verranno precaricati solo i metadati del video, ovvero i dettagli del video come dimensione, durata ecc.
auto - il browser può scaricare il video automaticamente come ritiene necessario, il browser può anche ignorare questa istruzione, è il comportamento predefinito.
Vediamo un piccolo esempio di codice su come utilizzare questa proprietà:

 Esempio Il video non può essere visualizzato Il video non può essere visualizzato 

Nell'immagine seguente vediamo come il browser interpreta la chiamata al video utilizzando gli attributi nessuno sì metadati:

È importante sottolineare che dobbiamo fare un uso equilibrato di questa proprietà, poiché possiamo consumare risorse inutilmente così come larghezza di banda, il che potrebbe anche tradursi in una brutta esperienza di utilizzo della nostra pagina.
Metti un'immagine di copertina per il tuo video
Poiché il video è una parte importante della nostra pagina, non possiamo lasciare che mostri il primo fotogramma poiché può rompere il design, per questo possiamo posizionare un'immagine di copertina o segnaposto, con questo possiamo anche controllare quale immagine mostrare se l'utente non ha ancora dato l'ordine di riprodurre il video, per questo possiamo usare gli attributi poster, per questo possiamo vedere il seguente esempio di codice.

 Esempio Il video non può essere visualizzato  

Ora vediamo un po' come il browser lo interpreta e come lo vedrebbe l'utente:

INGRANDIRE

Per ottenere questo effetto, quello che è stato fatto è stato uno screenshot del video, quindi con la proprietà manifesto possiamo posizionare questa immagine come copertina del nostro elemento video.
Con questo finiamo questo tutorial, con queste nuove proprietà possiamo controllare in modo migliore il modo in cui possiamo mostrare i nostri video e in questo modo creare documenti nuovi, più ricchi e più interattivi.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo