Condividi su facebook
Condividi su twitter
Condividi su linkedin
Condividi su telegram
HTML5 CSS3 JavaScript

Impara HTML, CSS e JavaScript: Video e audio

Iniziamo a costruire un sito web partendo dalle basi

iCrewPlay è alla ricerca di redattori che si occupino della sezione di scienza e tecnologia: vuoi far parte di un gruppo dinamico e stimolante, recensire i prodotti in uscita e condividere le tue conoscenze con gli altri?

0 0 voto
Voto iCrewers

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.

Potrebbe interessarti...

Speciale

Come trasferire i contatti in rubrica ad un altro smartphone

Scienze

Sindrome del cuore spezzato: in aumento tra le donne adulte

Speciale

Impara HTML5 CSS3 JavaScript: Copyright con JS

Speciale

Impara HTML5 CSS3 JavaScript: creare uno stile

TOBi

TOBi di Vodafone comodamente su WhatsApp

WhatsApp

Scorciatoie WhatsApp Web

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
Tronsmart Studio

14 settembre, 2021

Condividi su facebook
Condividi su twitter
Condividi su whatsapp
Condividi su telegram
0