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 consentire a chiunque di 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 diversi codici HTML o script lato server, 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.
- Specificare il tipo di origine file consente di migliorare le prestazioni di rete. Il browser può selezionare un'origine video senza dover scaricare parte del video per "sniffare" 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 frammenti multimediali per aggiungere punti di inizio e di fine all'elemento video.
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 funzione per pubblicare più visualizzazioni dello stesso video, come cue point in 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 riquadro 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 Codificare in modo efficiente le immagini.
Assicurati che i video non sovraccarichino i 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 usi semplici come quelli che sto descrivendo qui, usa le query multimediali CSS per
specificare la dimensione degli elementi in base alle dimensioni dell'area visibile; max-width:
100% è il tuo preferito.
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 l'esempio adattabile con la versione che non risponde. 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 passa facilmente 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'elemento <video> per iOS.
Anche sulle piattaforme in cui la riproduzione automatica è possibile, devi valutare se è opportuno abilitarla:
- 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 al browser un suggerimento 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 sui dispositivi mobili potrebbero verificarsi
ritardi all'avvio della riproduzione che non si verificano sui 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.