Scenari futuri del Video-on-the-Web Roberto Ellero , Webmultimediale.org Selezione o coabitazione dei formati?
Roberto Ellero Videomaker, Web Designer  Competenze specialistiche in accessibilità, Web standard, video progettati per il...
Premessa <ul><li>Solo qualche anno fa era usuale incontrare questo tipo di servizio video   </li></ul>Un video, tre format...
Adobe Flash Video <ul><li>Il plugin  Adobe Flash  ha facilitato il lavoro di chi pubblica video in rete, con una tecnologi...
Html5 Video <ul><li>Attualmente, con  Html5 Video , si ripropone la necessità di fornire più versioni dello stesso video, ...
Come funziona il video in Html5?  <ul><li>Non servono plugin esterni , come Adobe Flash, Microsoft Silverlight e Media Pla...
Adobe Flash, e gli altri plugin multimediali,  si inglobano nella pagina utilizzando l’elemento Object. Si tratta di ogget...
HTML5 <video src=“video.ogv” controls></video>    (<img src=“immagine.jpg” alt=&quot;&quot;>) In HTML5, non si usa OBJECT ...
E’ possibile studiare le librerie di Firefox per l’esecuzione di audio/video codificati in Ogg (Vorbis e Theora) http:// h...
I Player nei browser  <ul><li>IE9 </li></ul><ul><li>Opera </li></ul><ul><li>Firefox </li></ul><ul><li>Chrome </li></ul><ul...
HTML5 Media elements e JavaScript <ul><li>Gli elementi <video> e <audio> fanno parte della bozza di lavoro di HTML5 </li><...
Skin (CSS + Javascript) <ul><li>http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/ </li...
Skin (CSS + Javascript) <ul><li>http://broken-links.com/tests/video/ </li></ul>
YouTube.com/Html5 H.264
YouTube.com/Html5 WebM
Confronto di Html5 video con Flash e Silverlight  <ul><li>Non solo video:  </li></ul><ul><li>-  Animazioni: Flash e Silver...
JW Flash Player
www.audiodescrizione.it <ul><li>Una nuova risorsa dedicata alla diffusione della pratica dell'audiodescrizione in Italia, ...
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...
WebM, VP8 <ul><li>http://www.webmproject.org/ </li></ul><ul><li>WebM è un formato aperto, royalty-free, progettato per il ...
Ogg Theora e Vorbis <ul><li>http://www.theora.org/ </li></ul><ul><li>è un formato aperto, royalty-free, basato sul codec V...
TEST: Partiamo da un video in formato H.264 <ul><li>Codifica con un encoder  </li></ul><ul><li>da uno stesso file Mp4  </l...
Encoder per WebM e Ogg Theora Vorbis  <ul><li>Firefogg  http://firefogg.org </li></ul><ul><li>Conversione a partire da cli...
Encoder per WebM  e Ogg Theora Vorbis  <ul><li>Miro  </li></ul><ul><li>http://www.mirovideoconverter.com </li></ul>
Tre file: .mp4 (H.264) .webm (VP8) .ogv (Theora) <ul><li>Tutti con bitrate 1.500 kbps e dimensione 720x406 pixel. </li></u...
Google Chrome
Opera 10.63
Firefox 3.6
Firefox 4 Beta
Safari
IE 8
IE 9
Fornire un servizio  user friendly ,  che funziona con tutte le configurazioni  <ul><li>Cosa dobbiamo fare per pubblicare ...
Esempio di codice che include tutti i browser <ul><li>http://webmultimediale.org/labs/html5.htm </li></ul><ul><li><video  ...
MIME Type  <ul><li>Associare i MIME Type ai formati nei server Apache  </li></ul>Da cPanel o tramite file .htaccess AddTyp...
L’argomento è in continua evoluzione, rimaniamo in contatto [email_address] http://www.facebook.com/robertoellero http://i...
Upcoming SlideShare
Loading in …5
×

SMAU 2010 - Scenari futuri del Video-on-the-Web: selezione o coabitazione dei formati?

3,146 views

Published on

Seminario tenuto da Roberto Ellero a SMAU 2010.
http://www.robertoellero.it
Nei magazine e blog è tutto un rincorrersi di voci entusiastiche a favore del video in Html5, mentre Flash Video viene disegnato come formato in declino o addirittura già superato e destinato a scomparire sulla scena del Web video. In realtà il futuro del Web Video sarà segnato dal convivere di tre tecnologie: WebM, Html5 Video e Flash Video.
Con vantaggio degli utenti che avranno maggiori possibilità di scelta. E lo scenario diventerà nitido solo fra alcuni anni.
Un'analisi dei motivi tecnologici che stanno alla base di questa evoluzione a venire può servire a mantenere uno sguardo oggettivo e a cogliere le opportunità nella comunicazione audiovisiva e nella scelta dei formati più adeguati alle future esigenze di produzione e fruizione.
Vengono esaminati pro e contro nelle diverse possibili scelte per l'erogazione in Rete dei video: WebM, Html5 video e Flash video, e relativi player e codec, anche con riguardo all'accessibilità, alla facilità d'uso nell'authoring e nella postproduzione video, e alle soluzioni per la compatibilità cross-browser.

Target: responsabili e operatori della comunicazione audiovisiva su Web

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • IL VIDEO INTEGRALE DEL SEMINARIO

    <br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=16073824&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=16073824&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=16073824&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,146
On SlideShare
0
From Embeds
0
Number of Embeds
188
Actions
Shares
0
Downloads
27
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • Materiale didattico rilasciato con licenza Creative Commons http://creativecommons.org/licenses/by-nc-nd/2.5/it/ Roberto Ellero robertoellero@gmail.com www.robertoellero.it
  • Materiale didattico rilasciato con licenza Creative Commons http://creativecommons.org/licenses/by-nc-nd/2.5/it/ Roberto Ellero robertoellero@gmail.com www.robertoellero.it
  • SMAU 2010 - Scenari futuri del Video-on-the-Web: selezione o coabitazione dei formati?

    1. 1. Scenari futuri del Video-on-the-Web Roberto Ellero , Webmultimediale.org Selezione o coabitazione dei formati?
    2. 2. Roberto Ellero Videomaker, 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_address] Ideatore 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. 3. Premessa <ul><li>Solo qualche anno fa era usuale incontrare questo tipo di servizio video </li></ul>Un video, tre formati: Rm, Wmv, Mov.
    4. 4. Adobe Flash Video <ul><li>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. </li></ul><ul><li>L’uniformità e universalità di utilizzo ha facilitato la diffusione del video sul Web, e il lavoro di postproduzione e pubblicazione. </li></ul><ul><li>Un solo formato video (Flv VP6 oppure Mp4 H.264/AAC) per tutti i sistemi operativi e tutti i browser. </li></ul>
    5. 5. Html5 Video <ul><li>Attualmente, con Html5 Video , si ripropone la necessità di fornire più versioni dello stesso video, </li></ul><ul><li>ma il vantaggio del nuovo scenario è una prospettiva simile alla facilità di fruizione delle immagini: il player decoder video è parte integrante del browser . </li></ul><ul><li>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. </li></ul>
    6. 6. Come funziona il video in Html5? <ul><li>Non servono plugin esterni , come Adobe Flash, Microsoft Silverlight e Media Player, Vlc, Apple QuickTime, Real Media, Java applet. </li></ul><ul><li>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. </li></ul>
    7. 7. Adobe Flash, e gli altri plugin multimediali, si inglobano nella pagina utilizzando l’elemento Object. Si tratta di oggetti di programmazione esterni.
    8. 8. HTML5 <video src=“video.ogv” controls></video>   (<img src=“immagine.jpg” alt=&quot;&quot;>) 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. 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 CSS http:// hg.mozilla.org / mozilla-central /file/da7fbe8a24dd/toolkit/ content / widgets / videocontrols.css
    10. 10. I Player nei browser <ul><li>IE9 </li></ul><ul><li>Opera </li></ul><ul><li>Firefox </li></ul><ul><li>Chrome </li></ul><ul><li>Safari </li></ul>
    11. 11. HTML5 Media elements e JavaScript <ul><li>Gli elementi <video> e <audio> fanno parte della bozza di lavoro di HTML5 </li></ul><ul><li>http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#media-elements </li></ul><ul><li>http://www.w3.org/TR/html5 </li></ul><ul><li>( W3C Working Draft 24 June 2010) </li></ul><ul><li>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. </li></ul>
    12. 12. Skin (CSS + Javascript) <ul><li>http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/ </li></ul>
    13. 13. Skin (CSS + Javascript) <ul><li>http://broken-links.com/tests/video/ </li></ul>
    14. 14. YouTube.com/Html5 H.264
    15. 15. YouTube.com/Html5 WebM
    16. 16. Confronto di Html5 video con Flash e Silverlight <ul><li>Non solo video: </li></ul><ul><li>- Animazioni: Flash e Silverlight funzionano su Win Mac e Linux, il supporto di canvas dipende dai browser. </li></ul><ul><li>Confronto Flash – Silverlight http://www.shinedraw.com/flash-vs-silverlight-gallery </li></ul><ul><li>Confronto Flash - Canvas - SVG http://www.themaninblue.com/writing/perspective/2010/03/22/ </li></ul><ul><li>-> “ Flash still wins, but browsers are catching up” </li></ul><ul><li>- Supporto Webcam, live event : solo Flash </li></ul><ul><li>- DRM , Content Protection: </li></ul><ul><li>Silverlight http://msdn.microsoft.com/en-us/library/cc838192%28VS.95%29.aspx </li></ul><ul><li>Flash Rtmpe http://blogs.adobe.com/flashplatform/tag/rtmpe </li></ul><ul><li>Flash Access https://www.adobe.com/it/products/flashaccess </li></ul><ul><li>Non disponibile in Html5 video </li></ul><ul><li>- Streaming : </li></ul><ul><li>Flash : Rtmp (Flash Media Server, Red5) </li></ul><ul><li>Silverlight : IIS Media Services </li></ul><ul><li>Ogg: Flumotion, Icecast, JRoar, GStreamer, VLC / WebM: GStreamer </li></ul><ul><li>- Accessibilità : solo alcuni player basati su Flash consentono l’interazione con lo screen-reader Jaws. Sottotitolazione possibile con tutte le tecnologie . Per Html5 consultare: </li></ul><ul><li>http://blog.gingertech.net di Silvia Pfeiffer. Silverlight non supporta file Sami esterni, ma solo inglobati con Expression Encoder. </li></ul>
    17. 17. JW Flash Player
    18. 18. www.audiodescrizione.it <ul><li>Una nuova risorsa dedicata alla diffusione della pratica dell'audiodescrizione in Italia, </li></ul><ul><li>a cura di Saveria Arma , esperta di traduzione multimediale e audiovisiva </li></ul>
    19. 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. 20. WebM, VP8 <ul><li>http://www.webmproject.org/ </li></ul><ul><li>WebM è un formato aperto, royalty-free, progettato per il Web. </li></ul><ul><li>Contenitore Matroska con codec VP8 (On2 Technologies, ora acquisito da Google) per il video e Ogg Vorbis per l’audio. </li></ul><ul><li>Google ha acquistato On2 nel 2010, ha rilasciato VP8 come codec open source durante la conferenza Google I/O . </li></ul><ul><li>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. </li></ul><ul><li>Lo supportano: Google Chrome, Firefox 4, Opera 10.6+ , IE9 (se installato localmente), Android. </li></ul><ul><li>Verrà supportato da una prossima versione del plugin Adobe Flash. </li></ul>
    21. 21. Ogg Theora e Vorbis <ul><li>http://www.theora.org/ </li></ul><ul><li>è un formato aperto, royalty-free, basato sul codec VP3 della On2 Technologies. </li></ul><ul><li>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. </li></ul><ul><li>Lo supportano: Google Chrome, Firefox 3, Opera 10.6+, Safari (con Xiph QuickTime Components installato) </li></ul>
    22. 22. TEST: Partiamo da un video in formato H.264 <ul><li>Codifica con un encoder </li></ul><ul><li>da uno stesso file Mp4 </li></ul><ul><li>con bitrate 15.000 Kbps. </li></ul><ul><li>Produciamo tre video </li></ul><ul><li>Mp4 (con Sony Vegas) </li></ul><ul><li>WebM (con Firefogg) </li></ul><ul><li>Ogv (con Firefogg) </li></ul>
    23. 23. Encoder per WebM e Ogg Theora Vorbis <ul><li>Firefogg http://firefogg.org </li></ul><ul><li>Conversione a partire da clip </li></ul><ul><li>MTS AVC H.264 </li></ul><ul><li>Nei formati Ogv e WebM </li></ul><ul><li>Handbrake (Mp4, Theora) </li></ul><ul><li>Miro , Mp4 Ogv Webm </li></ul><ul><li>Encoding.com Mp4 WebM Ogv </li></ul><ul><li>Arista Mp4 WebM Ogv </li></ul><ul><li>Altri: http://www.webmproject.org/tools/#free_and_open_source_tools </li></ul>
    24. 24. Encoder per WebM e Ogg Theora Vorbis <ul><li>Miro </li></ul><ul><li>http://www.mirovideoconverter.com </li></ul>
    25. 25. Tre file: .mp4 (H.264) .webm (VP8) .ogv (Theora) <ul><li>Tutti con bitrate 1.500 kbps e dimensione 720x406 pixel. </li></ul><ul><li>Pubblichiamoli una pagina Html5 con un elemento Video per ciascun formato, e proviamo a caricare la pagina con i diversi browser più utilizzati. </li></ul><ul><li><video id=&quot;movie&quot; width=&quot;720&quot; height=&quot;405&quot; preload controls> </li></ul><ul><li><source src=&quot; H264.mp4 &quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;' /> </li></ul><ul><li></video> </li></ul><ul><li><video id=&quot;movie2&quot; width=&quot;720&quot; height=&quot;405&quot; preload controls> </li></ul><ul><li><source src=&quot; theora.ogv &quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;' /> </li></ul><ul><li></video> </li></ul><ul><li><video id=&quot;movie3&quot; width=&quot;720&quot; height=&quot;405&quot; preload controls> </li></ul><ul><li><source src=&quot; webm.webm &quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;' /> </li></ul><ul><li></video> </li></ul>
    26. 26. Google Chrome
    27. 27. Opera 10.63
    28. 28. Firefox 3.6
    29. 29. Firefox 4 Beta
    30. 30. Safari
    31. 31. IE 8
    32. 32. IE 9
    33. 33. Fornire un servizio user friendly , che funziona con tutte le configurazioni <ul><li>Cosa dobbiamo fare per pubblicare video in Html5 senza escludere nessuno? </li></ul><ul><li>Alla luce dei test che abbiamo visto, è necessario fornire almeno due formati : </li></ul><ul><li>- MP4 H.264/AAC </li></ul><ul><li>- WebM VP8/Ogg Vorbis </li></ul><ul><li>e un fallback Flash per IE fino alla versione 8 </li></ul><ul><li>e per Firefox 3 </li></ul>
    34. 34. Esempio di codice che include tutti i browser <ul><li>http://webmultimediale.org/labs/html5.htm </li></ul><ul><li><video id=&quot;movie&quot; width=&quot;720&quot; height=&quot;405&quot; preload controls aria-label=&quot;test html5 video&quot; title=&quot;test html5 video&quot;> </li></ul><ul><li><source src=&quot; H264.mp4 &quot; /> </li></ul><ul><li><source src=&quot; webm.webm &quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;' /> </li></ul><ul><li>(<source src=“theora.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;' />) </li></ul><ul><li><object type=&quot;application/x-shockwave-flash&quot; data=&quot;&quot; width=&quot;720&quot; height=&quot;430&quot;> </li></ul><ul><li><param name=&quot;autostart&quot; value=&quot;0&quot; /><param name=&quot;movie&quot; value=&quot;http://webmultimediale.org/labs/player.swf&quot; /> </li></ul><ul><li><param name='flashvars' value='file= H264.mp4 '> </li></ul><ul><li></object> </li></ul><ul><li></video> </li></ul>
    35. 35. MIME Type <ul><li>Associare i MIME Type ai formati nei server Apache </li></ul>Da cPanel o tramite file .htaccess AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
    36. 36. L’argomento è in continua evoluzione, rimaniamo in contatto [email_address] http://www.facebook.com/robertoellero http://it.linkedin.com/in/rellero www.webmultimediale.org

    ×