Elemento Video in HTML

L’elemento <video>

Per mostrare un video in HTML, utilizza l’elemento <video>:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Il tuo browser non supporta il tag del video.
</video>

Come funziona

L’attributo “controls” aggiunge i controlli del video, come play, pausa e volume.

È una buona idea includere sempre gli attributi width e height. Se height e width non sono impostati, la pagina potrebbe lampeggiare durante il caricamento del video.

L’elemento <source> ti consente di specificare file video alternativi dai quali il browser può scegliere. Il browser utilizzerà il primo formato riconosciuto.

Il testo tra le tag <video> e </video> verrà visualizzato solo nei browser che non supportano l’elemento <video>.

HTML <video> Autoplay

Per avviare automaticamente un video, utilizza l’attributo “autoplay”:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Il tuo browser non supporta il tag del video.
</video>

Nota: I browser Chromium non consentono l’autoplay nella maggior parte dei casi. Tuttavia, l’autoplay con audio disattivato è sempre consentito.

Aggiungi “muted” dopo “autoplay” per far partire automaticamente il video (ma disattivato):

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Il tuo browser non supporta il tag del video.
</video>

Metodi, Proprietà ed Eventi

Il DOM HTML definisce metodi, proprietà ed eventi per l’elemento <video>.

Ciò ti consente di caricare, riprodurre e mettere in pausa i video, nonché impostare la durata e il volume.

Ci sono anche eventi DOM che possono avvisarti quando un video inizia a riprodursi, viene messo in pausa, ecc.