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>