Hai preparato correttamente un file video per il web. Hai impostato le dimensioni e la risoluzione corrette. Hai persino creato file WebM e MP4 separati per browser diversi.
Perché 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 spiega gli attributi che devi aggiungere a questi tag per creare una buona esperienza utente.
Specificare un singolo file
Anche se non è 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 racchiuso.
<video src="chrome.webm" type="video/webm">
<p>Your browser cannot play the provided video file.</p>
</video>
Specificare più formati di file
Ricorda dalle nozioni di base sui file multimediali che non tutti i browser supportano gli stessi formati video. L'elemento <source> ti consente di specificare più formati come fallback
nel caso in cui il browser dell'utente non ne supporti uno.
L'esempio seguente produce 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>
Dovresti sempre aggiungere un attributo type ai tag <source>, anche se
è facoltativo. In questo modo, il browser scarica solo il file che è in grado di riprodurre.
Questo approccio presenta diversi vantaggi rispetto alla pubblicazione di HTML o script lato server diversi, soprattutto sui dispositivi mobili:
- Puoi elencare i formati in ordine di preferenza.
- Il passaggio lato client riduce la latenza; viene effettuata una sola richiesta per ottenere i contenuti.
- Consentire al browser di scegliere un formato è più semplice, veloce e potenzialmente più affidabile rispetto all'utilizzo di un database di supporto lato server con rilevamento dello user agent.
- La specifica del tipo di ogni origine file migliora il rendimento della 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 sul rendimento quando sono presenti più origini con tipi non supportati.
Esistono alcuni modi per approfondire i dettagli. Consulta A Digital Media Primer for Geeks per scoprire di più su come funzionano video e 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 l'ora 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 secondo 5 al secondo 10, specifica:
<source src="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 del video, specifica #t=,00:01:00.
Puoi utilizzare questa funzionalità per fornire più visualizzazioni dello stesso video, ad esempio i punti di riferimento in un DVD, senza dover codificare e pubblicare più file.
Perché questa funzionalità funzioni, il server deve supportare le richieste di intervalli e questa funzionalità deve essere abilitata. La maggior parte dei server abilita le richieste di intervalli per impostazione predefinita. Poiché alcuni servizi di hosting le disattivano, devi verificare che le richieste di intervalli siano disponibili per l'utilizzo di 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 bytes. Nell'immagine, ho disegnato una casella rossa intorno a questa intestazione. Se non vedi bytes come valore, dovrai contattare il tuo provider di hosting.
Includere 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 avviare la riproduzione.
<video poster="poster.jpg" ...>
…
</video>
Un poster può anche essere un fallback se l'elemento src del video è danneggiato o se nessuno dei formati video forniti è supportato. L'unico svantaggio delle immagini poster è una richiesta di file aggiuntiva, che consuma un po' di larghezza di banda e richiede il rendering.
Per saperne di più, consulta Codificare le immagini in modo efficiente.
Assicurarsi che i video non superino i contenitori
Quando gli elementi video sono troppo grandi per l'area visibile, potrebbero superare il contenitore, rendendo impossibile all'utente visualizzare i contenuti o utilizzare i controlli.
Puoi controllare le dimensioni del video utilizzando CSS. Se 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 altre origini. Purtroppo, queste risorse possono aumentare le dimensioni del payload di rete con conseguenze negative per le tue entrate e per i portafogli degli utenti.
Per utilizzi semplici come quelli che descrivo qui, utilizza le query supporti CSS per
specificare le dimensioni degli elementi in base alle dimensioni dell'area visibile; max-width:
100% è la soluzione ideale.
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 non adattabile. Come puoi vedere, la versione non adattabile non offre una buona esperienza utente.
Orientamento del dispositivo
L'orientamento del dispositivo non è un problema per monitor desktop o laptop, ma è estremamente importante quando si considera la progettazione di pagine web per dispositivi mobili e tablet.
Safari su iPhone esegue un buon lavoro di passaggio dall'orientamento verticale a quello orizzontale:
L'orientamento del dispositivo su iPad e Chrome su Android può essere problematico. Ad esempio, senza alcuna personalizzazione, un video riprodotto su un iPad in orientamento orizzontale ha questo aspetto:
L'impostazione di width: 100% o max-width: 100% del 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 modo preciso in cui funziona dipende dalla piattaforma e dal browser.
Chrome: dipende da più fattori, tra cui, a titolo esemplificativo ma non esaustivo, se la visualizzazione avviene su computer e se l'utente di dispositivi mobili 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 gli audio, ma consente agli utenti di rilassare queste restrizioni per tutti i siti o per siti specifici. Per maggiori dettagli, consulta Consentire o bloccare la riproduzione automatica dei contenuti multimediali in Firefox.
Safari: in passato richiedeva un gesto dell'utente, ma ha allentato questo requisito nelle versioni recenti. Per maggiori dettagli, consulta Nuove norme <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 di contenuti multimediali prima che l'utente li voglia può consumare larghezza di banda e CPU, ritardando il rendering della pagina.
- Gli utenti potrebbero trovarsi in un contesto in cui la riproduzione di video o audio è intrusiva.
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 precaricare nulla. |
metadata |
I metadati (durata, dimensioni, tracce di testo) devono essere precaricati, ma con un video minimo. |
auto |
Il download immediato dell'intero video è considerato auspicabile. Una stringa vuota produce lo stesso risultato. |
L'attributo preload ha effetti diversi su piattaforme diverse.
Ad esempio, Chrome memorizza nel buffer 25 secondi di video su computer, ma non su iOS o Android. Ciò significa che sui dispositivi mobili potrebbero verificarsi ritardi nell'avvio della riproduzione che non si verificano sui computer. Per maggiori dettagli, consulta Riproduzione rapida con il precaricamento di 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, dove aggiungerai i sottotitoli al video per le persone con problemi di udito o quando la riproduzione dell'audio non è un'opzione praticabile.