Esercizi Tag <Video> HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare l’utilizzo dell’elemento <video> in HTML.

Esercizio 1

Inserisci un file video nella tua pagina HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
  </head>
  <body>
    <video src="path/to/video.mp4" controls></video>
  </body>
</html>

Esercizio 2

Fai in modo che il video si avvii automaticamente all'apertura della pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <video src="path/to/video.mp4" autoplay></video>
  </body>
</html>

Esercizio 3

Aggiungi un testo alternativo nel caso in cui il browser non possa riprodurre il video.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <video src="path/to/video.mp4" controls>
      Il tuo browser non supporta la riproduzione video.
    </video>
  </body>
</html>

Esercizio 4

Fai in modo che il video venga riprodotto in loop continuo.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <video src="path/to/video.mp4" controls loop></video>
  </body>
</html>

Esercizio 5 (Difficile con JS)

Aggiungi un controllo del volume per il video.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <video src="path/to/video.mp4" controls>
      Il tuo browser non supporta la riproduzione video.
    </video>
    <input
      type="range"
      min="0"
      max="1"
      step="0.1"
      value="1"
      oninput="video.volume = this.value" />
  </body>
</html>

Esercizio 6 (Difficile con JS)

Aggiungi un controllo per il tempo di riproduzione del video.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <video src="path/to/video.mp4" controls>
      Il tuo browser non supporta la riproduzione video.
    </video>
    <input
      type="range"
      min="0"
      max="video.duration"
      value="0"
      oninput="video.currentTime = this.value" />
  </body>
</html>