L’utilizzo dell’elemento Html5 Video libera dall’utilizzo di plugin esterni basati su tecnologie proprietarie. Esempi di video erogati utilizzando Player Flash-based e Player built-in nel browser. A confronto vantaggi e vantaggi dei diversi markup, per accessibilità, praticità d’uso e qualità video. Il confronto riguarderà anche i diversi codec che si possono utilizzare nei due scenari: H.264/AVC/MPEG-4 Part 10 per i Flash Player, Ogg Theora per i Player built-in nei diversi browser che supportano l’elemento Html5 Video. Al termine, i due scenari verranno uniti con una tecnica di Fallback: se l’utente utilizza un browser che attualmente non supporta l’elemento Video con Player built-in (ad esempio Internet Explorer 8), viene servito il video eseguito da un Player basato su Flash.

3. Chi sono 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: info@robertoellero.it, mobile: 3480108848, skype: rellero Ideatore e responsabile di www.webmultimediale.org , la risorsa italiana sull'accessibilità e qualità degli audiovisivi sul Web. Lavoro presso il Centro Regionale di Cultura della Regione del Veneto. Network: http://www.webmultimediale.org http://www.robertoellero.it http://blog.iwa.it http:// webaccessibile.org Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

4. OBJECT vs VIDEO Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Vide Video sul Web Video sul Web 2 scenari a confronto Flash based Player uno scenario entrato nelle abitudini di tutti Built-in Player , HTML5 uno spettacolo in preparazione e ancora lontano dalla prova generale, ma che si prefigura molto interessante

5. dialogo tecnici, autori, pubblico Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Osserviamo cosa sta succedendo , senza prendere parte per un markup o l’altro, ma mettendo in dialogo due punti di vista , di chi usa il Web audiovisivo come strumento di comunicazione informazione e socializzazione, e di chi professionalmente e/o per passione definisce interfacce e contenuti video… “ pubblico” “ autore”

6. Dietro le quinte Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Per un dietro le quinte del Web audiovisivo a venire , serve un accenno al codice di marcatura , che - interpretato dai BROWSER - diviene visibile nell’interfaccia grafica. Lo scenario usuale è legato all’elemento OBJECT che serve a calare da fuori nella pagina l’oggetto audiovisivo. Questo elemento è presente nelle specifiche HTML e XHTML.

7. Come funziona OBJECT Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Per cattiva abitudine, nel Web quasi sempre si aggiunge a OBJECT l’elemento EMBED , che in realtà non fa parte delle specifiche citate, per consentire la fruizione “crossbrowser”. In realtà è agevole garantire la compatibilità con tutti i browser utilizzando il solo elemento corretto OBJECT. Se vi capita di condividere video, è facile modificare il codice offerto in modo automatico dalle varie piattaforme .

8. … quando si condivide un video Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Esempio di codice di condivisione da YouTube <object width=&quot;560&quot; height=&quot;340&quot;><param name=&quot;movie&quot; value=“url video&quot;></param><param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;></param> <embed src=“url video&quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;560&quot; height=&quot;340&quot;></embed> </object>

9. … ma anche… Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Stessa funzionalità senza EMBED <object id=&quot;myFlash&quot; type=&quot;application/x-shockwave-flash&quot; data=&quot;player&quot; width=&quot;500&quot; height=&quot;282&quot;> <param name=&quot;movie&quot; value=&quot;player.swf&quot; /> <param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /> <param name=&quot;FlashVars&quot; value=&quot;url video&quot; /> <p><a href=&quot;trascrizione.txt&quot;>Trascrizione</a></p> </object>

10. … o meglio… Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Stessa funzionalità, no EMBED, e accessibilità per dialogo con le MSAA e JAWS e altri screen-reader (attributo classid). <div><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;http://download.macromedia.com/...&quot; width=&quot;500&quot; height=&quot;300&quot;><param name=&quot;movie&quot; value=&quot;url video&quot; /><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /><param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /><!--[if !IE]> --><object type=&quot;application/x-shockwave-flash&quot; data=&quot;url video&quot; width=&quot;500&quot; height=&quot;300&quot;><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot; /><param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /><p>link a trascrizione...</p></object><!-- <![endif]--></object></div>

11. Non solo copia e incolla Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org In questo caso, sapere cosa c’è dietro la visualizzazione di un video è utile sia per gli autori che per i fruitori del social Web che condividono video nei loro blog.

12. e VIDEO? Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Ideatore dei commenti condizionali è lo stesso Ian Hickson (hixie) che attualmente è Editor dello HTML5 Draft Standard. http://ln.hixie.ch/?start=1081798064&count=1 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), che il browser esegue con il Player built-in, proprio come avviene per le immagini (JPEG, GIF, PNG) già dal 1993 con Mosaic .

13. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

14. HTML5 <video> Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org <video src=“video.ogv” controls></video> (<img src=“immagine.jpg” alt=&quot;&quot;>) Non servono plugin esterni basati su tecnologie proprietarie

15. HTML5 <video> Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org <video controls> <source src=&quot;foo.ogg&quot; type=&quot;video/ogg&quot;> <source src=&quot;foo.mp4&quot;> </video>

16. H.264 Royalties Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org L’uso di Html5 <video> consente un secondo vantaggio: oltre a non dipendere da player basati su tecnologie proprietarie, è possibile pubblicare video e audio codificati con open media format . Dal 2011 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. http://www.mpegla.com http://www.streaminglearningcenter.com/articles/46/1/H264-Royalties-what-you-need-to-know/Page1.html

17. <video> accessibilità Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org < video src=&quot;video.ogv&quot; poster=&quot;immagine.jpg&quot; controls aria-label =&quot;esempio di video&quot; title =&quot;video per test html5&quot;> < itext id=&quot;video_it&quot; lang=&quot;it&quot; type=&quot;text/srt&quot; charset=&quot;UTF-8&quot; display=&quot;auto&quot; src=&quot;sottotitoli.srt&quot; category=&quot;SUB&quot;></itext> </video>

18. Ci vorrà tempo… Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Attualmente <video> è supportato da Firefox (Ogg), Chrome (Ogg e H.264), Opera (Ogg in experimental builds ) e Safari (H.264). 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

19. Ci vorrà tempo… Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Confronti fra Ogg Theora e H.264 hanno mostrato che il free e open video compression format di Xiph.org Foundation consente di ottenere risultati di qualità paragonabile al codec H.264/AVC. http://people.xiph.org/~greg/video/ytcompare/comparison.html http://www.osnews.com/story/19019/Theora-vs.-h.264 Theora 1.1 ( Thusnelda ) è appena stato rilasciato . Esistono server di streaming che supportano Ogg, ad esempio Flumotion, Icecast, JRoar, VLC.

20. Built-in Player in Chrome Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

21. Built-in Player in Firefox Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

22. Built-in Player in Opera (9.52) Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

23. Ricercatori Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org La persona che ha dato maggior contributo all'implementazione dell'elemento <video> in Firefox è Chris Double. http://www.bluishcoder.co.nz Silvia Pfeiffer sta conducendo una ricerca sull’accessibilità dei video in Html5, di cui vedremo poi alcune soluzioni molto valide. http://blog.gingertech.net/

24. Lo scenario attuale Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org OBJECT (e EMBED ) ci accompagnano da sempre nella fruizione di video e audio sul Web. Ai tempi dei Player tradizionali (Windows Media Player, QuickTime Player, Real Player) era possibile usarli inglobati nella pagina come oggetti, oppure lanciare l’applicativo standalone da link…

25. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

26. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

27. I Player tradizionali Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Con questi Player, oggi sempre meno utilizzati anche a causa di notevoli problemi di compatibilità con browser e sistemi operativi, era possibile aggiungere con facilità i sottotitoli utilizzando SMIL oppure, per WMP, SAMI , per temporizzare i testi associati ai video.

28. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

29. Lo scenario è mutato velocemente Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org La forza “ecumenica” del plugin Adobe Flash ha di fatto stabilito negli ultimi 3-4 anni una posizione di predominio nell’erogazione-fruizione di video sul Web. Tutte le piattaforme sociali di condivisione di video, e la grande maggioranza dei siti aziendali, di informazione e privati, utilizzano Player Flash-based , con infinite personalizzazioni delle funzionalità e dell’aspetto.

31. YouTube HD Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

32. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

33. Titolo della diapositiva Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

34. Per essere accessibile, un Flash Player Flv Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org * deve supportare almeno un formato di sottotitolazione (preferibilmente standard Web come W3C DFXP, SMIL, SAMI, QuickTime-txt e Real-rt), * deve consentire di collegare un file audio per l'audiodescrizione per le persone non vedenti, * deve consentire l'attivazione e la disattivazione di sottotitoli e audiodescrizione (le alternative possono essere distrattori o limitanti in alcune circostanze), * deve consentire la visione a tutto schermo per le persone ipovedenti (Full screen),

35. Per essere accessibile, un Flash Player Flv Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org * deve essere pilotabile da tastiera, senza l'uso del mouse (per i disabili motori e i non vedenti), * deve essere direttamente accessibile alle tecnologie assistive come ad esempio Jaws (lo screen-reader più utilizzato dai non vedenti), oppure deve essere corredato di una console aggiuntiva con comandi come link (costruita con programmazione Javascript), pilotabile con qualsiasi tecnologia e configurazione. Esempi pratici dal Player Zen Garden webmultimediale.org /guide/ player-zen-garden

36. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Alcune piattaforme di condivisione video fanno sperimentazioni con <video>, ad esempio YouTube, BBC, Dailymotion . Esistono piattaforme già in produzione con video codificati in Ogg Theora, ad esempio Tinyvid.tv e lo US Congress Video archive, METAVID.org .

37. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

38. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

39. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

40. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

41. VIDEO SHARE in HTML5 Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org

42. Html5 e accessibilità, esempi Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org Tecnica che sfrutta librerie Javascript insieme all’elemento itext all’interno dell’elemento video, sviluppata da Silvia Pfeiffer

43. FALLBACK Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org <div id=“richiamo il player flash in IE &quot;> <video id=&quot;video&quot; poster=“foto.jpg&quot; controls> <source src=&quot;video.mp4&quot; type=&quot;video/mp4&quot; /> [ Safari ] <source src=&quot;video.ogg&quot; type=&quot;video/ogg&quot; /> [ Firefox, Chrome, Opera ] </video> </div> Se si usa un browser che non supporta l’elemento Video con Player built-in, viene servito il video con Player basato su Flash:

44. Per approfondire Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org http://diveintohtml5.org/video.html http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html https://developer.mozilla.org/en/Using_audio_and_video_in_Firefox http://www.marcozehe.de/2009/06/11/exposure-of-audio-and-video-elements-to-assistive-technologies/ http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback http://camendesign.com/code/video_for_everybody

45. e ora? Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org L’argomento è in continua evoluzione, rimaniamo in contatto [email_address] Skype: rellero www.webmultimediale.org

46. Termini e Licenza del documento Quest'opera è stata rilasciata sotto la licenza Creative Commons Attribuzione-Non commerciale-Non opere derivate 3.0 Unported . Per leggere una copia della licenza visita il sito web http://creativecommons.org/licenses/by-nc-nd/3.0/ o spedisci una lettera a Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA. Diritti, marchi registrati e siti web riportati in immagini e url sono riservati e proprietà dei diretti interessati e relative aziende. IWA/HWG e l’associazione IWA Italy non sono direttamente o indirettamente responsabili dei contenuti riportati nel presente documento che sono ad esclusiva cura e responsabilità del relatore. Video-on-the-Web in HTML5 – Roberto Ellero @ Smau 2009-10-23 www.webmultimediale.org