Che cosa è il video HTML5?
La specifica HTML5 introdotto l'elemento video al fine di riprodurre video, sostituendo parzialmente l'elemento oggetto.
video HTML5 è destinato dai suoi creatori per diventare il nuovo metodo standard per mostrare video sul web, al posto del precedente standard di de facto di utilizzare il plug-proprietaria di Adobe Flash, anche se l'adozione anticipata è stata ostacolata dalla mancanza di un accordo su quali formati video codifica e formati di codifica audio dovrebbero essere supportate nei browser web.
Riproduzione di video in HTML
Prima di HTML5, non vi era alcuna norma per mostrare i video su una pagina web.
Prima di HTML5, video possono essere riprodotti solo con un plug-in (like flash) .
L'HTML5 <video> elemento specifica un modo standard per incorporare un video in una pagina web.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il <video> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Il codice HTML <video> Element
Per mostrare un video in HTML, utilizzare il <video> elemento:
Esempio
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Prova tu stesso " Come funziona
Il controls attribuiscono aggiunge controlli video, come riproduzione, pausa, e il volume.
E 'una buona idea includere sempre width e height attributi.
Se altezza e la larghezza non sono impostati, il browser non conosce la dimensione del video. L'effetto sarà che la pagina cambierà (or flicker) , mentre i carichi di video.
Testo tra il <video> e </video> tag visualizzerà solo nei browser che non supportano il <video> elemento.
Molteplici <source> elementi possono collegare a diversi file video. Il browser utilizza il primo formato riconosciuto.
HTML <video> Autoplay
Per iniziare a utilizzare un video automaticamente l' autoplay attributi:
Esempio
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> Prova tu stesso " L' autoplay attributo non funziona nei dispositivi mobili come iPad e iPhone.
Video HTML - Supporto per il browser
Attualmente, ci sono 3 formati video supportati per la <video> elemento: MP4, WebM, Ogg e:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
Video HTML - Tipi di media
| Formato del file | Tipo di supporto |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Video HTML - metodi, proprietà ed eventi
HTML5 definisce i metodi DOM, proprietà ed eventi per la <video> elemento.
Questo consente di caricare, riprodurre, mettere in pausa e video, così come la regolazione della durata e del volume.
Ci sono anche eventi DOM in grado di avvertire quando un video viene riprodotto, è in pausa, ecc
Per un riferimento completo DOM, vai alla nostra HTML5 Audio / Video Reference del DOM .
HTML5 Video Tag
| Etichetta | Descrizione |
|---|---|
| <video> | Definisce un video o un film |
| <source> | Definisce più risorse multimediali per elementi multimediali, come ad esempio <video> e <audio> |
| <track> | Definisce le tracce di testo nei lettori multimediali |