📢 Nuovo Corso Laravel API disponibile!

Esercizi Tag <Video> HTML

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>