Audio e video con HTML 5

Quali sono i tag per inserire video e foto in pagine di siti web realizzati con l’html 5

L’HTML 5 è entrato nella vita degli sviluppatori web, semplificando molte delle procedure classiche, in particolare sui mezzi per l’inclusione di elementi speciali. Una delle caratteristiche più innovative ed interessanti è la possibilità di integrazione di elementi audio e video con HTML 5, grazie all’ausilio di semplici tag, senza necessariamente ricorrere al Flash.

Audio

Con il tag <audio> i programmatori che sfruttano le potenzialità dell’ HTML5 sono in grado di integrare facilmente e rapidamente file audio, e di gestire un flash player di ripiego nel caso in cui l’utente non supporti il nuovo elemento audio. L’utilizzo di questo tag è molto semplice e funziona nello stesso modo del tag <img> che, con l’ausilio dell’attributo “src”, consente di caricare file specifici.

L’elemento audio fornito dall’HTML5 consente all’amministratore di gestire alcune opzioni interessanti, tra cui l’autoplay, da utilizzare con estrema cautela per non risultare invasivi durante la navigazione; la funzionalità di loop che consente di ripetere il file audio all’infinito; l’attivazione della modalità preload che permette al browser di iniziare il buffering prima che il visitatore faccia effettivamente partire l’audio; infine la possibilità di attivare l’uso dei controlli per lasciare maggior autonomia ai visitatori.

Video

La sintassi dell’elemento <video> è la stessa dell’elemento <audio>. Ancora una volta è necessario che il programmatore utilizzi più fonti e differenti tipi di file per la codifica del medesimo video, al fine di assicurarsi il supporto su tutti i browser.

Gli attributi di autoplay, loop e preload del tag video funzionano allo stesso modo del tag audio. Esistono, però, attributi aggiuntivi specifici, come la possibilità di ridimensionare l’altezza e la larghezza del player per la visualizzazione ottimale del video.

Quando il video non è in riproduzione, poi, è possibile utilizzare l’attributo poster in grado di mostrare un’immagine specifica piuttosto che il classico primo fotogramma del video.

[fonte immagine in alto:     tutorialdock.altervista.org ]