Impara HTML, CSS e JavaScript: Video e audio

Bentornato su “Impara HTML5 CSS3 JavaScript”, la nuova rubrica di iCrewPlay Tech per imparare a creare da zero il nostro sito web personale, aziendale o di svago.

Impara HTML5 CSS3 JavaScript: il tag video e il tag audio

Per inserire un video dobbiamo usare il tag <video> (video) che presenta i seguenti attributi:

• autoplay: serve per far partire il video in automatico
• controls: serve per mostrare i controlli del video (come pausa e la barra di avanzamento)
• height: altezza del video in pixel
• width: larghezza del video in pixel
• muted: non riproduce l’audio di un video (ad ogni modo noi ti consigliamo di rimuovere l’audio dal video originale)
• poster: contiene l’URL di una eventuale immagine di copertina del video
• preload: indica se il video deve essere caricato al caricamento della pagina

Essendo i file video – soprattutto un tempo – molto complessi, si prevede la possibilità di aggiungere diversi sorgenti, con estensioni o dimensioni diverse. Questo ci permetterà in futuro di creare un video player con JavaScript che permetta di selezionare la qualità del video.

Il browser prova a caricare i video nell’ordine: se il primo viene caricato, ignora i successivi.

Per inserire la sorgente di un video, usiamo il tag annidato <source> (sorgente) che ha i seguenti attributi:

• src: sorgente del file (URL o percorso)
• type: tipologia e estensione del file

Per inserire un file audio dobbiamo usare il tag <audio> (audio) che presenta i seguenti attributi:

• autoplay: serve per far partire il file audio in automatico, per esempio come sottofondo durante la navigazione
• controls: serve per mostrare i controlli dell’audio (come pausa e la barra di avanzamento)
• loop: determina se il file audio deve essere ripetuto all’infinito
• muted: non riproduce l’audio (potrebbe tornare utile più avanti con JavaScript)
• preload: indica se il video deve essere caricato al caricamento della pagina

Essendo i file audio – soprattutto un tempo – molto complessi, si prevede la possibilità di aggiungere diversi sorgenti, con estensioni o bit-rate diversi.

Il browser prova a caricare i file audio nell’ordine: se il primo viene caricato, ignora i successivi.

Creiamo ora la nostra pagina web con un video e un audio, ricordandoci di quanto imparato in precedenza.

Come nelle precedenti puntate di questa rubrica, tutte le risorse che trovi qui puoi scaricarle e usarle gratuitamente ricordandoti però di menzionarci e di menzionare l’autore, Andrea Zanin nel tuo progetto. Ricordati di usare le stesse licenze Creative Commons di iCrewPlay Tech. Puoi scaricare immagini.html su andrezan.com.