I tag <video> e <source>

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="chrome.webm" type="video/webm">
  <source src="chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

Provare Glitch

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="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.

Screenshot di Chrome DevTools: Accept-Ranges: bytes.
Screenshot di Chrome DevTools: Accept-Ranges: bytes.

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.

Cosa non fare
Senza un poster di riserva, il video sembra non funzionare.
Senza un poster di riserva, il video sembra non funzionare.
Cosa fare
Un poster di riserva fa sembrare che sia stato acquisito il primo frame.
Un poster di riserva fa sembrare che sia stato acquisito il primo frame.

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.

Screenshot di Chrome per Android, formato verticale: l&#39;elemento video senza stile esce dal viewport.
Screenshot di Chrome per Android, in verticale: l'elemento video senza stile esce dal viewport.
Screenshot di Chrome per Android, formato orizzontale: l&#39;elemento video senza stile esce dal viewport.
Screenshot di Chrome per Android, formato orizzontale: l'elemento video senza stile esce dal viewport.

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>

Prova

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:

Screenshot di un video in riproduzione in Safari su iPhone, in verticale.
Screenshot di un video in riproduzione in Safari su iPhone, in modalità Ritratto.
Screenshot di un video in riproduzione in Safari su iPhone, in orizzontale.
Screenshot del video in riproduzione in Safari su iPhone, in formato orizzontale.

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:

Screenshot di un video in riproduzione in Safari su iPad, in orizzontale.
Screenshot di un video in riproduzione in Safari su iPad, in formato orizzontale.

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.

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.