Inserire delle immagini, video e audio con HTML5
immagini
<figure>
<img
src="percorso/nome_imm.png"
alt="testo
alternativo">
<figcaption> testo
didascalia della foto<figcaption>
</figure>
posso inserire più immagini con <img…..> nello stesso blocco <figure>…..</figure> e usare una didascalia unica per tutte le foto.
video
a differenza del passato, il file video, viene letto da strumenti del browser. Gli strumenti messi a disposizione da HTML5 leggono file video con estensione : MP4, Ogg e WebM. Se si hanno video con altre estensioni consiglio questo sito in cui on-line si possono trasformare video con estensioni diverse
http://www.online-convert.com/
il codice per inserire un file video è :
<video src="percorso/nome_video.MP4">
Il
tuo browser non supporta l'elemento video
</video>
se non viene letto, per esempio a causa di un browser vecchio, scrive il messaggio “Il tuo browser non supporta l'elemento video”
Per specificare quale file aprire posso aggiungere l'elemento <source> e l'attributo type all'interno di <video>…</video> :
<video>
<source
src="percorso/nome_video.mp4" type="video/mp4">
<source
src="percorso/nome_video.ogg" type="video/ogg">
<source
src="percorso/nome_video.webm" type="video/webm">
Il
tuo browser non supporta l'elemento video
</video>
in questo esempio ci sono tutti i tre possibili esempi, in questo caso il browser usa solo il codice dell'estensione che gli serve, il resto del codice viene ignorato. In questo modo considero tutte le possibilità.
Mediante l'attributo controls permette di avere un'interfaccia grafica :
cambia a seconda del browser
serve per fermare/avviare il filmato
controllare il volume dell'audio
passare a schermo intero
avere dei sottotitoli ed altro ancora
<video controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
Posso specificare anche la grandezza in pixel dello schermo del video :
<video width="150" height="70" controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
Un altro importante attributo di <video> è autoplay. Permette di far partire automaticamente il browser quando il video è stato caricato completamente :
<video autoplay width="150" height="70" controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
l'attributo loop fa ripetere il video all'infinito, il video si potrà fermare con il pulsante stop se saranno stati attivati i comandi con l'attributo controls :
<video loop autoplay width="150" height="70" controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
l'attributo muted fa riprodurre il video muto, cioè senza audio :
<video muted autoplay width="150" height="70" controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
l'attributo poster permette di inserire un immagine fissa al posto del primo fotogramma del video :
<video poster=”percorso/nome_imm.png” autoplay width="150" height="70" controls>
<source src=”percorso/nome_video.mp4” type=”video/mp4”>
Il tuo browser non supporta l'elemento
</video>
L'attributo preload accetta
tre valori: auto
(default),metadate e none.
Questi tre valori indicano al browser rispettivamente:
auto =
carica il video durante il caricamento della pagina
metadate =
non caricare il video durante il caricamento della pagina ma solo le
sue informazioni compresa una eventuale immagine usata con
poster
none =
non caricare il video se non quando sarà premuto il pulsantino
[play] dell'interfaccia.
File audio
<audio src="percorso/nome_audio.MP3">
Il
tuo browser non supporta l'elemento audio
</audio>
anche in questo caso ci sono solo alcune estensioni audio supportate : MP3, Ogg e Wav. Come per i video posso usare <source> e specificare anche tutti i tre tipi, il browser poi usa il codice che gli serve :
<audio>
<source
src="percorso/nome_audio.mp3" type="audio/mpeg">
<source
src="percorso/nome_audio.ogg" type="audio/ogg">
<source
src="percorso/nome_audio.wav" type="audio/wav">
Il
tuo browser non supporta l'elemento audio
</audio>
come per i video posso usare i seguenti attributi :
controls : per attivare i comandi
autoplay : per far partire il file audio al suo caricamento
loop : ripete il file audio all'infinito
preload :
auto = (default)carica il brano durante il caricamento della pagina
metadate = non caricare il brano durante il caricamento della pagina ma solo le sue informazioni
none = non caricare l'audio se non quando sarà premuto il pulsantino [play] dell'interfaccia
Sitografia
http://www.web-link.it