Hai preparato correttamente un file video per il web. Hai fornito le dimensioni e la risoluzione corrette. Hai anche creato file WebM e MP4 separati per browser diversi.
Affinché chiunque possa vedere il tuo video, dovrai comunque aggiungerlo a una pagina web. Questa operazione richiede l'aggiunta di 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 a questi tag per creare una buona esperienza utente.
Specifica un singolo file
Sebbene non sia consigliato, 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 allegato.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Specificare più formati di file
Ricorda Nozioni di base sui file multimediali che non tutti i browser supportano gli stessi formati video. L'elemento <source> consente di specificare più formati come riserva nel caso in cui il browser dell'utente non ne supporti uno.
L'esempio riportato di seguito produce il video incorporato che verrà 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>
Dovresti sempre aggiungere un attributo type all'evento tag <source> anche se è facoltativo. In questo modo il browser scarica solo il file che può 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 fatta una sola richiesta per ricevere i contenuti.
- Consentire al browser di scegliere un formato è più semplice, più veloce e potenzialmente più affidabile rispetto all'utilizzo di un database di assistenza lato server con il rilevamento degli user agent.
- Specificare il tipo di origine di ogni file migliora 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 in contesti mobili, in cui la larghezza di banda e la latenza hanno un costo maggiore e la pazienza dell'utente è probabilmente limitata. L'omissione dell'attributo type può influire sulle prestazioni in caso di più origini con tipi non supportati.
Esistono diversi modi per entrare nei dettagli. Consulta A Digital Media Primer for Geeks per scoprire di più su come funzionano i video e l'audio sul web. Puoi anche utilizzare il debug remoto in DevTools per confrontare l'attività di rete con gli 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 ore di inizio e di fine all'elemento video.
Per utilizzare un frammento di elemento multimediale, aggiungi #t=[start_time][,end_time] all'URL dell'elemento multimediale. Ad esempio, per riprodurre il video dai secondi 5 ai 10, specifica:
<source src="video/chrome.webm#t=5,10" type="video/webm">
Puoi anche specificare gli orari in <hours>:<minutes>:<seconds>. Ad esempio,
#t=00:01:05 avvia il video a un minuto e cinque secondi. Per riprodurre solo il
primo minuto di video, specifica #t=,00:01:00.
Puoi utilizzare questa funzionalità per pubblicare più visualizzazioni sullo stesso video, ad esempio i cue point di 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 abilitata. La maggior parte dei server abilita le richieste di intervallo per impostazione predefinita. Poiché alcuni servizi di hosting li disattivano, devi confermare che sono disponibili richieste di intervalli per l'utilizzo di frammenti sul tuo sito.
Fortunatamente, puoi eseguire questa operazione negli strumenti per sviluppatori del browser. Ad esempio, in Chrome si trova nel riquadro Rete. Cerca l'intestazione Accept-Ranges e
verifica che sia bytes. Nell'immagine ho disegnato un riquadro
rosso intorno a questa intestazione. Se non visualizzi bytes come valore, dovrai contattare il tuo
provider host.
Includi un'immagine poster
Aggiungi un attributo poster all'elemento video in modo che gli spettatori possano farsi un'idea dei contenuti non appena viene caricato l'elemento, senza dover scaricare il video o avviare la riproduzione.
<video poster="poster.jpg" ...>
…
</video>
Un poster può essere anche di riserva se il video src non funziona o se nessuno dei
formati video forniti è supportato. L'unico svantaggio di un'immagine poster è una richiesta di file aggiuntiva, che consuma un po' di larghezza di banda e richiede il rendering.
Per scoprire di più, consulta Codificare in modo efficiente le immagini.
Assicurati che i video non superino i contenitori
Quando gli elementi video sono troppo grandi per l'area visibile, potrebbero superare il 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, possono esserti utili le librerie e i plug-in JavaScript come FitVids, anche per i video di YouTube e di altre fonti. Purtroppo, queste risorse possono aumentare le dimensioni dei payload di rete, con conseguenze negative sulle tue entrate e sui portafogli dei tuoi utenti.
Per utilizzi semplici come quelli descritti qui, usa 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 negli iframe (ad esempio i video di YouTube), prova un approccio adattabile (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 che non risponde non rappresenta un'esperienza utente ottimale.
Orientamento del dispositivo
L'orientamento del dispositivo non è un problema per i monitor desktop o laptop, ma è enormemente importante quando si prende in considerazione la progettazione di pagine web per dispositivi mobili e tablet.
Safari su iPhone riesce a passare dall'orientamento verticale a quello orizzontale e viceversa:
L'orientamento del dispositivo su iPad e Chrome su Android può presentare problemi. Ad esempio, senza alcuna personalizzazione, un video riprodotto su un iPad con orientamento orizzontale avrà il seguente aspetto:
L'impostazione del video width: 100% o max-width: 100% con CSS può risolvere molti problemi di layout relativi all'orientamento del dispositivo.
Riproduzione automatica
L'attributo autoplay consente di stabilire se il browser scarica e riproduce immediatamente un video. Il modo esatto in cui funziona dipende dalla piattaforma e dal browser.
Chrome: dipende da diversi fattori, inclusi, a titolo esemplificativo, se la visualizzazione avviene su computer e se l'utente del dispositivo mobile ha aggiunto il tuo sito o la tua app alla schermata Home. Per maggiori dettagli, consulta l'articolo Best practice per la riproduzione automatica.
Firefox: blocca tutti i contenuti video e audio, ma offre agli utenti la possibilità di allentare queste limitazioni per tutti i siti o per siti specifici. Per maggiori dettagli, consulta l'articolo Consentire o bloccare la riproduzione automatica dei contenuti multimediali in Firefox.
Safari: in passato ha richiesto un gesto dell'utente, ma nelle versioni recenti ha allentato questo requisito. Per maggiori dettagli, consulta le nuove norme di <video> per iOS.
Anche sulle piattaforme in cui è possibile la riproduzione automatica, devi valutare se è una buona idea abilitarla:
- L'utilizzo dei dati può essere costoso.
- La riproduzione dei contenuti multimediali prima che l'utente lo voglia può modificare la larghezza di banda e la CPU, ritardando così il rendering delle pagine.
- Gli utenti potrebbero trovarsi in un contesto in cui la riproduzione di video o audio potrebbe essere 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 precaricare nulla. |
metadata |
I metadati (durata, dimensioni, tracce di testo) devono essere precaricati, ma con una quantità di video minima. |
auto |
È preferibile scaricare subito l'intero video. Una stringa vuota produce lo stesso risultato. |
L'attributo preload ha effetti diversi su piattaforme differenti.
Ad esempio, Chrome esegue il buffering di 25 secondi di video sui computer, ma nessuno su iOS o Android. Ciò significa che sui dispositivi mobili potrebbero verificarsi ritardi all'avvio della riproduzione, che non si verificano su computer desktop. Per ulteriori dettagli, vedi 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 l'accessibilità dei contenuti multimediali, che ti consente di aggiungere sottotitoli al video per ipoudenti o che, quando riproducono l'audio, non è possibile.