Inserire delle immagini, video e audio con HTML5



<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.




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 :

<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.



<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 :






Sitografia

http://www.web-link.it