Con HTML5 è stato possibile aggiungere contenuti video a una pagina web senza plug-in da un po 'di tempo. HTML5 rende anche più facile fornire formati alternativi per i tuoi contenuti.
Il video> elemento incorpora contenuti multimediali nella pagina. Nella sua forma più semplice, utilizza l'estensione src attributo per puntare al file di origine video.
video src = "movie.webm" controlli> / video>
Se presente, l'attributo dei controlli indica che il browser deve visualizzare il proprio set di controlli dell'interfaccia utente per funzioni quali riproduzione / pausa. Se crei uno script per il tuo set di controlli dell'interfaccia utente, l'attributo fornisce un fallback quando lo scripting è disabilitato nel browser. Puoi anche fornire contenuti di riserva per i browser legacy. Potrebbe trattarsi di testo statico, un collegamento per scaricare il file video o consigli su come eseguire l'upgrade a un agente utente compatibile con HTML5.
video src = "movie.webm" controls> Fallback dei contenuti per i browser legacy./video>
Il manifesto l'attributo può essere utilizzato per visualizzare un'immagine statica di segnaposto. C'è ancora qualche discussione sulla via manifesto viene gestito all'interno della specifica HTML5, ma per ora è un attributo di video> elemento stesso.
video src = "movie.webm" poster = "image.webp" controls> Fallback dei contenuti per i browser legacy./video>
Il traccia> element è un figlio di video> elemento utilizzato per puntare a un file di testo temporizzato esterno che fornisce informazioni supplementari per il video. Utilizza l'estensione genere attributo per specificare il tipo di informazioni da fornire.
- Sottotitoli (predefinito): fornisce la traduzione del dialogo quando il suono non è compreso.
- Didascalie: trascrizione audio completa quando il suono non è disponibile o non può essere ascoltato dallo spettatore.
- Descrizioni: trascrizione del contenuto visivo per la conversione in discorso sintetico.
- Capitoli: fornisce un meccanismo di navigazione per sfogliare il contenuto video tramite un elenco interattivo nell'interfaccia utente.
- Metadati: utilizzato per fornire l'accesso alle tracce da utilizzare con gli script.
video src = "movie.webm" poster = "image.webp" controls> track kind = "captions" src = "captions.vtt"> Fallback dei contenuti per i browser legacy./video>
Questo esempio utilizza il formato Web Video Text Tracks (Web VTT) per fornire l'estensione didascalie file. Web VTT consente di mappare un segnale temporale su un pezzo di testo (trascritto dal dialogo audio originale). Tom Leadbetter esplora Web VTT in modo più dettagliato sul sito Web di HTML5 Doctor.
Il video> elemento è supportato in tutti i browser attuali. Purtroppo, il supporto per il traccia> element e Web VTT è in ritardo. I fornitori di browser stanno lavorando su entrambi, quindi non passerà molto tempo prima che ci avvicineremo a un video HTML5 veramente inclusivo.
