HTML5: l’ elemento video.
Una delle innovazioni più importanti che porta con se il linguaggio HTML5 è il tag video, questo elemento permetterà di incorporare video all’ interno di documenti web in maniera semplice e veloce.
Il primo paragone che viene ovviamente da fare è con l’incorporazione di filmati tramite il classico plugin Flash player, i vantaggi messi in mostra da HTML5 rispetto a Flash e altri plug-in sono :
- Maggiore velocità di caricamento.
- Nessun plugin e relativo aggiornamento da scaricare.
- Elevatissima personalizzazione e interattività grafica del player.
Molto probabilmente Flash player non scomparirà dalla rete per passare solo ad altri tipi di utilizzi, ma è giusto sapere per chi non lo sapesse che Youtube e Vimeo mettono già a disposizione il loro player in HTML5 per visualizzare video, mentre Ipad ha dichiarato di non voler più supportare il plugin di Flash per la riproduzione di filmati, inoltre tutti i browser, tolte alcune versioni di IE,accettano il tag video.
Per inserire un filmato in documento utilizzando HTML5 sarà sufficiente inserire questo codice:
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
Dove movie.ogg dovrà essere sostituito con il nome e l’ estensione del video da riprodurre.
All’ interno del tag video oltre agli attributi standard di HTML5 potremo poi aggiungere i seguenti attributi specifici:
- Autoplay: Se presente il video inizierà ad essere riprodotto automaticamente al caricamento della pagina.
- Controls: Se presente comparirà un bottone per il controllo della riproduzione del filmato, come un bottone play/pausa.
- Height: Definisce in pixel l’altezza del video player.
- Loop: Il video ricomincerà automaticamente la sua riproduzione una volta terminato.
- Src: L’URL del video da riprodurre.
- Width: Definisce in pixel la larghezza del video player.
Esempio:
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> </source><source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </source></video>
Esempi di video player in HTML5:
Sublime player: Questo player è uno dei più famosi al momento, è interessante il secondo esempio che viene mostrato sul sito, dove è possibile scegliere la scena del video clip da cui partire, come se fosse il menu di un DVD.
Video Js: Mette a disposizione uno tool on-line per incorporare un video, oltre a 5 tipi di skin perconfigurate.
Dailymotion: Ha creato un player con il quale potrete interagire con il filmato creando instantanee, effetti esplosione, e frame multipli.
Projector: Un player ricco di features e di istruzioni per l’ uso, da provare.
JW player: Altra libreria di player in HTML5 e Javascript ben costruita, con la possibilità di editare facilmente le skin.
Brightcove: Altro semplice player con la possibilità di fare comparire immagini sopra al video tramite il pulsante close.
Html5video: Mette a disposizione gratuitamente una intera libreria dedicata al player video HTML5 di nome kaltura, una delle risorse pratiche più complete per questo argomento.
Media front: Ha realizzato un player video molto ingegnoso, nel quale è possibile scegliere da un menu scrollabile una serie di video correlati, simile a Youtube.
Video for everybody: Questo sito ha creato un semplice player in HTML5, pensato anche per Ipad, molto utile per chi alle prime armi volesse studiarne il codice implementandolo direttamente dalla pagina sorgente sulla propria.
Bella raccolta