Hai preparato correttamente un file video per il web. Hai specificato le dimensioni e la risoluzione corrette. Hai anche creato file WebM e MP4 separati per browser diversi.
Per fare in modo che chiunque possa vedere il tuo video, devi comunque aggiungerlo a una pagina web. Per farlo correttamente, devi aggiungere due elementi HTML: l'elemento <video> e l'elemento <source>. Oltre alle nozioni di base su questi tag, questo articolo illustra gli attributi da aggiungere ai tag per creare un'esperienza utente positiva.
Specifica un singolo file
Sebbene non sia consigliabile, puoi utilizzare l'elemento video da solo. Utilizza sempre
l'attributo type come mostrato di seguito. Il browser lo utilizza per determinare se può riprodurre il file video fornito. In caso contrario, viene visualizzato il testo incluso.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Specificare più formati file
Come indicato nella sezione Nozioni di base sui file multimediali, non tutti i browser supportano gli stessi formati video. L'elemento <source> consente di specificare più formati come alternativa nel caso in cui il browser dell'utente non supporti uno di questi.
L'esempio riportato di seguito genera il video incorporato utilizzato come esempio più avanti in questo articolo.
<video controls>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Sebbene sia facoltativo, devi sempre aggiungere un attributo type all'evento tag <source>. In questo modo, il browser scarica solo il file che è in grado di riprodurre.
Questo approccio presenta diversi vantaggi rispetto alla pubblicazione di script HTML o lato server diversi, in particolare sui dispositivi mobili:
- Puoi elencare i formati in ordine di preferenza.
- Il passaggio lato client riduce la latenza: viene effettuata una sola richiesta per recuperare i contenuti.
- Lasciare che sia il browser a scegliere un formato è più semplice, più rapido e potenzialmente più affidabile rispetto all'utilizzo di un database di assistenza lato server con il rilevamento dello user agent.
- La specifica del tipo di ogni origine file migliora il rendimento della rete; il browser può selezionare una sorgente video senza dover scaricare parte del video per "annusare" il formato.
Questi problemi sono particolarmente importanti nei contesti mobile, dove la larghezza di banda e la latenza sono fondamentali e la pazienza dell'utente è probabilmente limitata. L'omissione
dell'attributo type può influire sulle prestazioni quando sono presenti più origini
con tipi non supportati.
Esistono diversi modi per esaminare i dettagli. Consulta A Digital Media Primer for Geeks per scoprire di più su come funzionano i contenuti video e audio sul web. Puoi anche utilizzare il debug di rete da remoto in DevTools per confrontare l'attività di rete con attributi di tipo e senza attributi di tipo.
Specificare l'ora di inizio e di fine
Risparmia larghezza di banda e rendi il tuo sito più reattivo: utilizza i frammenti multimediali per aggiungere all'elemento video le ore di inizio e di fine.
Per utilizzare un frammento multimediale, aggiungi #t=[start_time][,end_time] all'URL del file multimediale. Ad esempio, per riprodurre il video dal quinto al decimo secondo, specifica:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Puoi anche specificare le ore in <hours>:<minutes>:<seconds>. Ad esempio,
#t=00:01:05 fa partire il video a 1 minuto e 5 secondi. Per riprodurre solo il primo minuto del video, specifica #t=,00:01:00.
Puoi utilizzare questa funzionalità per pubblicare più visualizzazioni dello stesso video, ad esempio i cue point su un DVD, senza dover codificare e pubblicare più file.
Affinché questa funzionalità funzioni, il server deve supportare le richieste di intervallo e questa funzionalità deve essere attivata. La maggior parte dei server attiva le richieste di intervallo per impostazione predefinita. Poiché alcuni servizi di hosting li disattivano, devi verificare che le richieste di intervallo siano disponibili per l'utilizzo dei frammenti sul tuo sito.
Fortunatamente, puoi farlo negli strumenti per sviluppatori del browser. In Chrome, ad esempio, si trova nel pannello Rete. Cerca l'intestazione Accept-Ranges e verifica che sia visualizzata la dicitura bytes. Nell'immagine ho tracciato un riquadro rosso attorno a questo
intestazione. Se non visualizzi bytes come valore, dovrai contattare il tuo provider hosting.
Includi un'immagine poster
Aggiungi un attributo poster all'elemento video in modo che gli spettatori abbiano un'idea dei contenuti non appena l'elemento viene caricato, senza dover scaricare il video o avviarne la riproduzione.
<video poster="poster.jpg" ...>
…
</video>
Un poster può essere anche un'opzione di riserva se il video src è danneggiato o se nessuno dei formati video forniti è supportato. L'unico svantaggio delle immagini poster è una richiesta di file aggiuntiva, che consuma una certa larghezza di banda e richiede il rendering.
Per ulteriori informazioni, consulta Codifica in modo efficace le immagini.
Assicurati che i video non fuoriescano dai contenitori
Quando gli elementi video sono troppo grandi per l'area visibile, potrebbero fuoriuscire dal contenitore, impedendo all'utente di vedere i contenuti o utilizzare i controlli.
Puoi controllare le dimensioni dei video utilizzando CSS. Se il CSS non soddisfa tutte le tue esigenze, le librerie e i plug-in JavaScript come FitVids possono aiutarti, anche per i video di YouTube e di altre fonti. Purtroppo, queste risorse possono aumentare le dimensioni del payload della rete con conseguenze negative per le tue entrate e per il portafoglio dei tuoi utenti.
Per utilizzi semplici come quelli che sto descrivendo qui, utilizza le query supporti CSS per
specificare le dimensioni degli elementi in base alle dimensioni dell'area visibile. max-width:
100% è tuo amico.
Per i contenuti multimediali in iframe (ad esempio i video di YouTube), prova un approccio responsive (come quello proposto da John Surdakowski).
CSS
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML
<div class="video-container">
<iframe
src="//www.youtube.com/embed/l-BA9Ee2XuM"
frameborder="0"
width="560"
height="315"
></iframe>
</div>
Confronta il campione adattabile con la versione non adattabile. Come puoi vedere, la versione non responsiva non offre un'esperienza utente ottimale.
Orientamento del dispositivo
L'orientamento del dispositivo non è un problema per i monitor dei computer o i laptop, ma è estremamente importante quando si considera il design delle pagine web per dispositivi mobili e tablet.
Safari su iPhone gestisce bene il passaggio dall'orientamento verticale a quello orizzontale e viceversa:
L'orientamento del dispositivo su iPad e Chrome su Android può essere problematico. Ad esempio, senza alcuna personalizzazione, un video riprodotto su iPad in orientamento orizzontale ha il seguente aspetto:
L'impostazione di width: 100% o max-width: 100% per il video con CSS può risolvere molti problemi di layout relativi all'orientamento del dispositivo.
Riproduzione automatica
L'attributo autoplay controlla se il browser scarica e riproduce immediatamente un
video. Il funzionamento esatto dipende dalla piattaforma e dal browser.
Chrome: dipende da diversi fattori, tra cui, a titolo esemplificativo, se la visualizzazione avviene su computer e se l'utente mobile ha aggiunto il tuo sito o la tua app alla schermata Home. Per maggiori dettagli, consulta le best practice per la Riproduzione automatica.
Firefox: blocca tutti i video e l'audio, ma consente agli utenti di allentare queste limitazioni per tutti i siti o per siti specifici. Per maggiori dettagli, vedi Consentire o bloccare la riproduzione automatica dei contenuti multimediali in Firefox
Safari: in passato era necessario un gesto dell'utente, ma questo requisito è stato allentato nelle versioni recenti. Per maggiori dettagli, consulta Nuove norme relative all'attributo <video> per iOS.
Anche sulle piattaforme in cui è possibile, devi valutare se attivarla:
- L'utilizzo dei dati può essere costoso.
- La riproduzione dei contenuti multimediali prima che l'utente lo richieda può occupare larghezza di banda e CPU e quindi ritardare il rendering della pagina.
- Gli utenti potrebbero trovarsi in un contesto in cui la riproduzione di video o audio è invadente.
Precarica
L'attributo preload fornisce un suggerimento al browser sulla quantità di informazioni o contenuti da precaricare.
| Valore | Descrizione |
|---|---|
none |
L'utente potrebbe scegliere di non guardare il video, quindi non caricare nulla in anteprima. |
metadata |
I metadati (durata, dimensioni, tracce di testo) devono essere pre caricati, ma con un video minimo. |
auto |
È considerato auspicabile scaricare subito l'intero video. Una stringa vuota produce lo stesso risultato. |
L'attributo preload ha effetti diversi su piattaforme diverse.
Ad esempio, Chrome memorizza nella cache 25 secondi di video su computer, ma nessuno su iOS o Android. Ciò significa che su dispositivo mobile potrebbero verificarsi ritardi nell'avvio della riproduzione che non si verificano su computer. Per ulteriori dettagli, consulta Riproduzione veloce con precaricamento audio e video o il blog di Steve Souders.
Ora che sai come aggiungere contenuti multimediali alla tua pagina web, è il momento di scoprire di più sull'accessibilità dei contenuti multimediali, ovvero su come aggiungere sottotitoli codificati ai tuoi video per le persone con disabilità uditiva o quando la riproduzione dell'audio non è un'opzione praticabile.