smau 2010 - scenari futuri del video-on-the-web: selezione o coabitazione dei formati?

Milano, 20-22 ottobre - Fieramilanocity

1

Roberto Ellero Webmultimediale.org

Scenari futuri del Video-on-the-Web

Roberto Ellero, Webmultimediale.org

Selezione o coabitazione dei formati?


2


Roberto ElleroVideomaker, Web Designer Competenze specialistiche in accessibilità, Web standard, video progettati per il Web, accessibili alle persone sorde e non vedenti (contenuti audiovisivi, tecnologie, sottotitolazione, interpretazione in lingua dei segni, audiodescrizione).email: [email protected] e responsabile di www.webmultimediale.org: produzioni video accessibili alle persone con disabilità.Lavora presso il Centro Regionale di Cultura della Regione del Veneto, Mediateca del Veneto.robertoellero.it


3


Premessa

Solo qualche anno fa era usuale incontrare questo tipo di servizio video

Un video, tre formati: Rm, Wmv, Mov.


4


Adobe Flash Video

Il plugin Adobe Flash ha facilitato il lavoro di chi pubblica video in rete, con una tecnologia di erogazione video in grado di funzionare su tutte le piattaforme e tutti i browser.

L’uniformità e universalità di utilizzo ha facilitato la diffusione del video sul Web, e il lavoro di postproduzione e pubblicazione.

Un solo formato video (Flv VP6 oppure Mp4 H.264/AAC) per tutti i sistemi operativi e tutti i browser.


5


Html5 Video

Attualmente, con Html5 Video, si ripropone la necessità di fornire più versioni dello stesso video,

ma il vantaggio del nuovo scenario è una prospettiva simile alla facilità di fruizione delle immagini: il player decoder video è parte integrante del browser.

Come vedremo in test pratici, è oggi necessario fornire almeno due formati dello stesso video, oltre a un fallback Flash, per non escludere alcuna configurazione dalla fruizione di video in Html5.


6


Come funziona il video in Html5?

Non servono plugin esterni, come Adobe Flash, Microsoft Silverlight e Media Player, Vlc, Apple QuickTime, Real Media, Java applet.

Il video viene eseguito da un player che fa parte integrante del browser. Ciascun browser possiede librerie per l’esecuzione di video, supporta alcuni codec, presenta il player con controlli personalizzati, che si possono modificare attraverso l’uso dei fogli di stile e di librerie JavaScript.


7


Adobe Flash,e gli altri pluginmultimediali, si inglobano nellapagina utilizzandol’elementoObject.Si tratta dioggetti diprogrammazioneesterni.


8


HTML5

<video src=“video.ogv” controls></video> (<img src=“immagine.jpg” alt="">)

In HTML5, non si usa OBJECT per portare nella pagina Web un oggetto di programmazione esterno che esegue file video.

Si usa VIDEO per dire al browser che la risorsa da interpretare è un file video (OGG, MP4, WebM), che il browser esegue con il Player built-in, proprio come avviene per le immagini (JPEG, GIF, PNG) già dal 1993 con Mosaic.


9


E’ possibile studiare le librerie di Firefox per l’esecuzione di audio/video codificati in Ogg (Vorbis e Theora)

http://hg.mozilla.org/mozilla-central/file/da7fbe8a24dd/media

Costruzione player built-in:http://hg.mozilla.org/mozilla-central/file/da7fbe8a24dd/toolkit/content/widgets/videocontrols.xml

e CSShttp://hg.mozilla.org/mozilla-central/file/da7fbe8a24dd/toolkit/content/widgets/videocontrols.css


10


I Player nei browser

IE9

Opera

Firefox

Chrome

Safari


11


HTML5 Media elements e JavaScript

Gli elementi <video> e <audio> fanno parte della bozza di lavoro di HTML5

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#media-elements

http://www.w3.org/TR/html5

(W3C Working Draft 24 June 2010)

ed esistono metodi standard JavaScript, proprietà ed eventi DOM associati a <video> e <audio>, che consentono di realizzare controlli, skin, playlist ecc. per i player dei browser.


12


Skin (CSS + Javascript)

http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/


13


Skin (CSS + Javascript)

http://broken-links.com/tests/video/


14


YouTube.com/Html5 H.264


15


YouTube.com/Html5 WebM


16


Confronto di Html5 video con Flash e Silverlight Non solo video: - Animazioni: Flash e Silverlight funzionano su Win Mac e Linux, il supporto di canvas

dipende dai browser.Confronto Flash – Silverlight http://www.shinedraw.com/flash-vs-silverlight-galleryConfronto Flash - Canvas - SVG http://www.themaninblue.com/writing/perspective/2010/03/22/

-> “Flash still wins, but browsers are catching up”- Supporto Webcam, live event: solo Flash- DRM, Content Protection:Silverlight http://msdn.microsoft.com/en-us/library/cc838192%28VS.95%29.aspxFlash Rtmpe http://blogs.adobe.com/flashplatform/tag/rtmpeFlash Access https://www.adobe.com/it/products/flashaccessNon disponibile in Html5 video

- Streaming:Flash: Rtmp (Flash Media Server, Red5)Silverlight: IIS Media ServicesOgg: Flumotion, Icecast, JRoar, GStreamer, VLC / WebM: GStreamer

- Accessibilità: solo alcuni player basati su Flash consentono l’interazione con lo screen-reader Jaws. Sottotitolazione possibile con tutte le tecnologie. Per Html5 consultare:

http://blog.gingertech.net di Silvia Pfeiffer. Silverlight non supporta file Sami esterni, ma solo inglobati con Expression Encoder.


17


JW

Flash

Player


18


www.audiodescrizione.it

Una nuova risorsa dedicata alla diffusione della pratica dell'audiodescrizione in Italia,

a cura di Saveria Arma, esperta di traduzione multimediale e audiovisiva


19


I CODEC per Html5 Video: H.264/AAC

Dal 2016 l’uso del codec H.264/AVC/MPEG-4 Part 10 sarà soggetto a costi di licenza e distribuzione. E’ il codec dell’alta definizione nel broadcasting televisivo e Web.MPEG LA rappresenta i patent holders di AVC/H.264 ed è l'unica licensing authority per questa tecnologia.MPEG LA ha annunciato che non verranno mai richieste royalties a chi utilizzerà il codec per produrre e distribuire filmati gratuiti per l’utente finale.

Lo supportano: Google Chrome, IE9, IE6 7 e 8 con Google Chrome Frame, Apple Safari, il plugin Adobe Flash, Android, iPhone.


20


WebM, VP8

http://www.webmproject.org/WebM è un formato aperto, royalty-free, progettato per il Web.Contenitore Matroska con codec VP8 (On2 Technologies, ora acquisito da

Google) per il video e Ogg Vorbis per l’audio.Google ha acquistato On2 nel 2010, ha rilasciato VP8 come codec open

source durante la conferenza Google I/O. Il 19 maggio 2010 il progetto WebM è stato lanciato, assieme al contributo

di Mozilla, Opera, Google e più di quaranta altre aziende, per sostenere l'uso di VP8 come codec per l'HTML5.

Lo supportano: Google Chrome, Firefox 4, Opera 10.6+, IE9 (se installato localmente), Android.

Verrà supportato da una prossima versione del plugin Adobe Flash.


21


Ogg Theora e Vorbis

http://www.theora.org/

è un formato aperto, royalty-free, basato sul codec VP3 della On2 Technologies.

VP3 è una tecnologia brevettata, ma On2 ha concesso una licenza royalty-free senza limiti di tempo dei brevetti collegati, permettendo al pubblico di usare Theora ed altri codec derivati da VP3 per qualsiasi uso, senza dover pagare diritti a On2.

Lo supportano: Google Chrome, Firefox 3, Opera 10.6+, Safari (con Xiph QuickTime Components installato)


22


TEST: Partiamo da un video in formato H.264

Codifica con un encoder

da uno stesso file Mp4

con bitrate 15.000 Kbps.

Produciamo tre video• Mp4 (con Sony Vegas)• WebM (con Firefogg)• Ogv (con Firefogg)


23


Encoder per WebM e Ogg Theora Vorbis

Firefogg http://firefogg.orgConversione a partire da clipMTS AVC H.264Nei formati Ogv e WebM

Handbrake (Mp4, Theora)

Miro, Mp4 Ogv Webm

Encoding.com Mp4 WebM Ogv

Arista Mp4 WebM Ogv

Altri: http://www.webmproject.org/tools/#free_and_open_source_tools


24


Encoder per WebM e Ogg Theora Vorbis

Miro http://www.mirovideoconverter.com


25


Tre file: .mp4 (H.264) .webm (VP8) .ogv (Theora)

Tutti con bitrate 1.500 kbps e dimensione 720x406 pixel.Pubblichiamoli una pagina Html5 con un elemento Video per ciascun

formato, e proviamo a caricare la pagina con i diversi browser più utilizzati.

<video id="movie" width="720" height="405" preload controls> <source src="H264.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /></video>

<video id="movie2" width="720" height="405" preload controls> <source src="theora.ogv" type='video/ogg; codecs="theora, vorbis"' /></video>

<video id="movie3" width="720" height="405" preload controls> <source src="webm.webm" type='video/webm; codecs="vp8, vorbis"' /></video>


26


Google Chrome


27


Opera 10.63


28


Firefox 3.6


29


Firefox 4 Beta


30


Safari


31


IE 8


32


IE 9


33


Fornire un servizio user friendly, che funziona con tutte le configurazioni

Cosa dobbiamo fare per pubblicare video in Html5 senza escludere nessuno?

Alla luce dei test che abbiamo visto, è necessario fornire almeno due formati:

- MP4 H.264/AAC

- WebM VP8/Ogg Vorbis

e un fallback Flash per IE fino alla versione 8

e per Firefox 3


34


Esempio di codice che include tutti i browserhttp://webmultimediale.org/labs/html5.htm

<video id="movie" width="720" height="405" preload controls aria-label="test html5 video" title="test html5 video">

<source src="H264.mp4" /> <source src="webm.webm" type='video/webm; codecs="vp8, vorbis"' /> (<source src=“theora.ogv" type='video/ogg; codecs="theora, vorbis"' />) <object type="application/x-shockwave-flash" data="" width="720"

height="430"> <param name="autostart" value="0" /><param name="movie"

value="http://webmultimediale.org/labs/player.swf" /> <param name='flashvars' value='file=H264.mp4'>

</object></video>


35


MIME Type

Associare i MIME Type ai formati nei server Apache

Da cPanel o tramite file .htaccessAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm


36


L’argomento è in continua evoluzione, rimaniamo in contatto

[email protected]://www.facebook.com/robertoellero

http://it.linkedin.com/in/rellero

www.webmultimediale.org

smau 2010 - scenari futuri del video-on-the-web: selezione o coabitazione dei formati?

Technology