HTML5 CSS3 JavaScript

Impara HTML, CSS e JavaScript: Video e audio

Iniziamo a costruire un sito web partendo dalle basi

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.

Ti piace questa nuova rubrica? Creerai il tuo sito? Hai riscontrato qualche problema? Facci sapere la tua qui sotto nei commenti!

Sottoscrivi
Notificami
guest
0 Commenti
Inline Feedbacks
Guarda tutti i commenti
0
in iCrewPlay diamo spazio al tuo pensiero! Commenta!x
()
x
Condividi su facebook
CONDIVIDI