Le tecnologie del video online: HTML5, Adobe Flash e Microsoft Silverlight

di Andrea Geremia e Simone Piva

Il nuovo standard HTML, giunto alla quinta versione, è diventato una valida alternativa ai plug-in esterni (come Adobe Flash e Microsoft Silverlight) come fonte di integrazione dei video all’interno delle pagine web.

Non si tratta di una tecnologia o di un linguaggio di markup, ma di un insieme di tecnologie: in esso sono incluse tutte le più recenti novità relative allo sviluppo web e alla creazione di web application: semantica e markup più semplici, funzionamento atto all’integrazione con tutti i dispositivi, CSS3.

Uno dei principali vantaggi dell’uso di HTML5 è la minor necessità di plug-in esterni, in particolare per l’audio e il video. Sono stati introdotti, infatti, i tag <audio> e <video> che permettono il supporto nativo dei browser a contenuti audiovisivi senza l’uso dei supporti esterni come Adobe Flash e Microsoft Silverlight.

Una cosa sorprendente è che, contrariamente a quanto avviene ad esempio con Flash, in HTML5 gli elementi video sono parte del DOM e dunque possono essere liberamente manipolati in tempo reale e gestiti in JavaScript in combinazione con altri oggetti come i canvas.

La gestione di un video in HTML5 può, quindi, essere fatta in maniera molto rapida ed efficiente:

<!DOCTYPE html>

<html>

<body>

<video width=”320″ height=”240″ controls=”controls”>

<source src=”movie.mp4″ type=”video/mp4″>

<source src=”movie.ogg” type=”video/ogg”>

<source src=”movie.webm” type=”video/webm”>

Your browser does not support the video tag.

</video>

</body>

</html>

In questo esempio viene creata una finestra video con dimensione 320×240 px con tutti i comandi standard di controllo della riproduzione (controls=”controls”), che possono includere: play, pausa, cerca, volume, fullscreen, sottotitoli e tracce audio.

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Il video, ovvero “movie”, viene caricato in tre formati differenti, .mp4, .ogg e.webm per essere supportato a seconda del browser utilizzato.

PER UN MAGGIOR APPROFONDIMENTO DI HTML5

http://www.w3schools.com/html/html5_video.asp

Dal punto di vista dell’implementazione, HTML è considerato uno standard aperto e decisamente più semplice, a differenza di Flash che è un linguaggio chiuso e complesso, con dispendio di forza-tempo per i programmatori in rapporto 10:1.

Se HTML5 richiede la compilazione di 3 semplici file per l’integrazione di video all’interno della pagina, il paradigma di Flash o Silverlight risultano, invece, esser molto più complessi.

Untitled2 Semplicità di HTML5 a confronto col più complesso Adobe Flash

Ovviamente, dato che la diffusione di HTML5 è ancora arretrata nel campo video, poiché non tutti gli utenti dispongono di software e device di ultima generazione, quando il tag <video> non viene supportato dal browser, sovente si ricorre al plug-in esterno di Adobe Flash o Microsoft Silverlight.

<video src=”video.ogv” controls>

<object data=”flvplayer.swf”

type=”application/x-shockwave-flash”>

<param value=”flvplayer.swf” name=”movie”/>

<object>

</video>

In questo esempio, nel momento in cui il codice in HTML5 non dovesse essere supportato dal browser, al posto di restituire un messaggio di errore, viene richiamato il player Flash con il tag <object>.

YouTube, ad esempio, permette all’utente la scelta diretta del linguaggio da utilizzare per la riproduzione dei video: Flash o HTML.

Netflix, invece, si basava su Microsoft Silverlight per la riproduzione dei propri contenuti, poiché tale tecnologia garantisce la protezione dei contenuti mediante DRM.

Dopo YouTube, anche Netflix ha deciso di puntare sull’HTML5, abbandonando pian piano Silverlight. Anche altri siti come Redbox, Premium Play e Infinity stanno lentamente rimpiazzando Silverlight con HTML5, dal momento che Microsoft terminerà il supporto del plug-in entro il 2021.

Leonardo Benefico, Flash Vs. HTML5, l’ora del la verità?, Webhouse: http://www.webhouseit.com/flash-html5-ora-della-verita

 

Leave a Reply

Your email address will not be published. Required fields are marked *

     

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>