HTML - I video

Un file video può essere inserito in una pagina html in due modi. Il primo modo sarebbe quello di usare il tag <embed/>. Questo tag non ha bisogno di un un'etichetta conclusiva. Funziona, per lo più, come un tag per una foto.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

E' anche possibile inserire un video utilizzando un link.

html<a href="example.mpeg" title="Download movie">film name</a>

Estensioni supportate

Sono:

• .swf - realizzata da Macromedia Flash
• .wmv - Microsoft Windows Media Video
• .mov - Quick Time Movie, di proprietà della Apple
• .mpeg - creato da Moving Pictures Expert Group.

I più utilizzati sono .mpeg e .swf, per il loro formato compatto.

Attributi dell'etichetta embed

• autostart - indica se il file verrà eseguito automaticamente dopo il caricamento della pagina. Può avere il valore vero o falso
• hidden - indica se i pulsanti sono nascosti o meno. Può avere il valore vero o falso.
• volume - può assumere un valore da 1 a 100
• loop- indica se il file verrà riprodotto nuovamente una volta terminato. Può avere il valore vero o falso.
• playcount - indica quante volte il file verrà riprodotto. Per esempio playcount="2" significa che verrà riprodotto due volte e dopo che si fermerà.

Inserire un video Youtube utilizzando l'etichetta embed

Puoi farlo molto facilmente, perché YouTube ha su ogni pagina il codice HTML necessario.

html<object width="425" height="344" data="https://www.youtube.com/embed/FiCiRkkfxhM"></object>

html<embed src="https://www.youtube.com/embed/FiCiRkkfxhM" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/FiCiRkkfxhM" frameborder="0" allowfullscreen></iframe>

Demo

Anche se tutto quello che vedi è piuttosto caotico, la parte positiva è che devi solo copiarlo da YouTube, e incollarlo nel tuo sito, e avrai il tuo video. Anche se ultimamente YouTube fornisce un semplice iFrame per la condivisione.

Si noti che gli script di embed su Youtube non sono validi per XHML. Per generare codici validi per i video su youtube XHML consiglio questo strumento che genera validi XHTML YouTube embed code per i video. Basta inserire l'URL dove hai trovato il video e otterrai un codice XHTML valido per te.

HTML5 - L'etichetta video

Con l'introduzione dell'HTML5, il tag video si è diffuso molto rapidamente con un buon supporto dei browser moderni. L'etichetta video viene utilizzata per aggiungere un video alla pagina html. Al momento la tag html, supporta 3 tipi di file video:

• mp4 - MIME-type video/mp4
• webm - MIME-type video/webm
• ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Il tuo browser non supporta letichetta video.
</video>

Demo

Al momento il tag video è supportato molto bene dai principali browser moderni.