Video HTML
L'elemento HTML <video>viene utilizzato per mostrare un video su una pagina web.
L'elemento HTML <video>
Per mostrare un video in HTML, usa l' <video>elemento:
Esempio
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Come funziona
L' controlsattributo aggiunge controlli video, come riproduzione, pausa e volume.
È una buona idea includere sempre widthe heightattributi. Se l'altezza e la larghezza non sono impostate, la pagina potrebbe sfarfallare durante il caricamento del video.
L' <source>elemento consente di specificare file video alternativi tra cui il browser può scegliere. Il browser utilizzerà il primo formato riconosciuto.
Il testo tra i tag <video>e </video>verrà visualizzato solo nei browser che non supportano l' <video>elemento.
HTML <video> Riproduzione automatica
Per avviare automaticamente un video, utilizza l' autoplayattributo:
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>
Nota: nella maggior parte dei casi, i browser Chromium non consentono la riproduzione automatica. Tuttavia, l'autoplay disattivato è sempre consentito.
Aggiungi muteddopo
autoplayper avviare automaticamente la riproduzione del video (ma disattivato):
Esempio
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'
<video>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formati video HTML
Sono disponibili tre formati video supportati: MP4, WebM e Ogg. Il supporto del browser per i diversi formati è:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Video HTML - Tipi di media
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Video HTML: metodi, proprietà ed eventi
Il DOM HTML definisce metodi, proprietà ed eventi per l' <video>elemento.
Ciò ti consente di caricare, riprodurre e mettere in pausa i video, nonché di impostare la durata e il volume.
Esistono anche eventi DOM che possono avvisarti quando un video inizia a essere riprodotto, viene messo in pausa, ecc.
Per un riferimento DOM completo, vai al nostro Riferimento DOM audio/video HTML .
Tag video HTML
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |