SlideShare ist ein Scribd-Unternehmen logo
1 von 36
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 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
Premessa ,[object Object],Un video, tre formati: Rm, Wmv, Mov.
Adobe Flash Video ,[object Object],[object Object],[object Object]
Html5 Video ,[object Object],[object Object],[object Object]
Come funziona il video in Html5?  ,[object Object],[object Object]
Adobe Flash, e gli altri plugin multimediali,  si inglobano nella pagina utilizzando l’elemento Object. Si tratta di oggetti di programmazione esterni.
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 .
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
I Player nei browser  ,[object Object],[object Object],[object Object],[object Object],[object Object]
HTML5 Media elements e JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object]
Skin (CSS + Javascript) ,[object Object]
Skin (CSS + Javascript) ,[object Object]
YouTube.com/Html5 H.264
YouTube.com/Html5 WebM
Confronto di Html5 video con Flash e Silverlight  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JW Flash Player
www.audiodescrizione.it ,[object Object],[object Object]
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.
WebM, VP8 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ogg Theora e Vorbis ,[object Object],[object Object],[object Object],[object Object]
TEST: Partiamo da un video in formato H.264 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Encoder per WebM e Ogg Theora Vorbis  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Encoder per WebM  e Ogg Theora Vorbis  ,[object Object],[object Object]
Tre file: .mp4 (H.264) .webm (VP8) .ogv (Theora) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Esempio di codice che include tutti i browser ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
MIME Type  ,[object Object],Da cPanel o tramite file .htaccess AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
L’argomento è in continua evoluzione, rimaniamo in contatto [email_address] http://www.facebook.com/robertoellero http://it.linkedin.com/in/rellero www.webmultimediale.org

Weitere ähnliche Inhalte

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

Degree Dissertation
Degree DissertationDegree Dissertation
Degree Dissertationbbg5ne
 
Multimedia Cde
Multimedia CdeMultimedia Cde
Multimedia Cdeclayton
 
We Tv Oghenoa
We Tv OghenoaWe Tv Oghenoa
We Tv Oghenoamarco
 
Tech Webinar: Firefox Developer Tool
Tech Webinar: Firefox Developer ToolTech Webinar: Firefox Developer Tool
Tech Webinar: Firefox Developer ToolCodemotion
 
Thesis: browser MHP-XHTML on DVB-T decoder
Thesis: browser MHP-XHTML on DVB-T decoderThesis: browser MHP-XHTML on DVB-T decoder
Thesis: browser MHP-XHTML on DVB-T decoderguest263043
 
Google Chrome Extensions & Plugin vs Firefox
Google Chrome Extensions & Plugin vs FirefoxGoogle Chrome Extensions & Plugin vs Firefox
Google Chrome Extensions & Plugin vs FirefoxWikiCorsoWeb
 
Matteo baccan raspberry pi - linox 2014
Matteo baccan   raspberry pi - linox 2014Matteo baccan   raspberry pi - linox 2014
Matteo baccan raspberry pi - linox 2014Matteo Baccan
 
Liferay - Quick Start 1° Episodio
Liferay - Quick Start 1° EpisodioLiferay - Quick Start 1° Episodio
Liferay - Quick Start 1° EpisodioAntonio Musarra
 
Corso live streaming sett 2013 lesson 4
Corso live streaming sett 2013 lesson 4Corso live streaming sett 2013 lesson 4
Corso live streaming sett 2013 lesson 4InSide Training
 
Streaming in Java e Flex con Red5
Streaming in Java e Flex con Red5Streaming in Java e Flex con Red5
Streaming in Java e Flex con Red5Marcello Teodori
 
Flash Platform su dispositivi mobili
Flash Platform su dispositivi mobiliFlash Platform su dispositivi mobili
Flash Platform su dispositivi mobililuca mezzalira
 
Corso live streaming sett 2013 lesson 2
Corso live streaming sett 2013 lesson 2  Corso live streaming sett 2013 lesson 2
Corso live streaming sett 2013 lesson 2 InSide Training
 

Ähnlich wie SMAU 2010 - Scenari futuri del Video-on-the-Web: selezione o coabitazione dei formati? (20)

Flash vs jQuery
Flash vs jQueryFlash vs jQuery
Flash vs jQuery
 
Degree Dissertation
Degree DissertationDegree Dissertation
Degree Dissertation
 
Multimedia Cde
Multimedia CdeMultimedia Cde
Multimedia Cde
 
We Tv Oghenoa
We Tv OghenoaWe Tv Oghenoa
We Tv Oghenoa
 
Podcast generator
Podcast generatorPodcast generator
Podcast generator
 
Tech Webinar: Firefox Developer Tool
Tech Webinar: Firefox Developer ToolTech Webinar: Firefox Developer Tool
Tech Webinar: Firefox Developer Tool
 
Html5
Html5Html5
Html5
 
Thesis: browser MHP-XHTML on DVB-T decoder
Thesis: browser MHP-XHTML on DVB-T decoderThesis: browser MHP-XHTML on DVB-T decoder
Thesis: browser MHP-XHTML on DVB-T decoder
 
Google Chrome Extensions & Plugin vs Firefox
Google Chrome Extensions & Plugin vs FirefoxGoogle Chrome Extensions & Plugin vs Firefox
Google Chrome Extensions & Plugin vs Firefox
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Android
AndroidAndroid
Android
 
HTML 5 e browser legacy
HTML 5 e browser legacyHTML 5 e browser legacy
HTML 5 e browser legacy
 
Matteo baccan raspberry pi - linox 2014
Matteo baccan   raspberry pi - linox 2014Matteo baccan   raspberry pi - linox 2014
Matteo baccan raspberry pi - linox 2014
 
Liferay - Quick Start 1° Episodio
Liferay - Quick Start 1° EpisodioLiferay - Quick Start 1° Episodio
Liferay - Quick Start 1° Episodio
 
Corso live streaming sett 2013 lesson 4
Corso live streaming sett 2013 lesson 4Corso live streaming sett 2013 lesson 4
Corso live streaming sett 2013 lesson 4
 
Link. javascript ajax
  Link. javascript ajax  Link. javascript ajax
Link. javascript ajax
 
Streaming in Java e Flex con Red5
Streaming in Java e Flex con Red5Streaming in Java e Flex con Red5
Streaming in Java e Flex con Red5
 
8. Architetture web
8. Architetture web8. Architetture web
8. Architetture web
 
Flash Platform su dispositivi mobili
Flash Platform su dispositivi mobiliFlash Platform su dispositivi mobili
Flash Platform su dispositivi mobili
 
Corso live streaming sett 2013 lesson 2
Corso live streaming sett 2013 lesson 2  Corso live streaming sett 2013 lesson 2
Corso live streaming sett 2013 lesson 2
 

Kürzlich hochgeladen

Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Associazione Digital Days
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoQuotidiano Piemontese
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Associazione Digital Days
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Associazione Digital Days
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Associazione Digital Days
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Associazione Digital Days
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Associazione Digital Days
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Associazione Digital Days
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Associazione Digital Days
 

Kürzlich hochgeladen (9)

Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
Alessandro Nasi, COO @Djungle Studio – “Cosa delegheresti alla copia di te st...
 
Programma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 TorinoProgramma Biennale Tecnologia 2024 Torino
Programma Biennale Tecnologia 2024 Torino
 
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
Gabriele Mittica, CEO @Corley Cloud – “Come creare un’azienda “nativa in clou...
 
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
Daniele Lunassi, CEO & Head of Design @Eye Studios – “Creare prodotti e servi...
 
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
Mael Chiabrera, Software Developer; Viola Bongini, Digital Experience Designe...
 
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
Federico Bottino, Lead Venture Builder – “Riflessioni sull’Innovazione: La Cu...
 
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
Luigi Di Carlo, CEO & Founder @Evometrika srl – “Ruolo della computer vision ...
 
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
Edoardo Di Pietro – “Virtual Influencer vs Umano: Rubiamo il lavoro all’AI”
 
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
Alessio Mazzotti, Aaron Brancotti; Writer, Screenwriter, Director, UX, Autore...
 

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

  • 1. Scenari futuri del Video-on-the-Web Roberto Ellero , Webmultimediale.org Selezione o coabitazione dei formati?
  • 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.
  • 4.
  • 5.
  • 6.
  • 7. Adobe Flash, e gli altri plugin multimediali, si inglobano nella pagina utilizzando l’elemento Object. Si tratta di oggetti di programmazione esterni.
  • 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. 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.
  • 11.
  • 12.
  • 13.
  • 16.
  • 18.
  • 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.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 31. IE 8
  • 32. IE 9
  • 33.
  • 34.
  • 35.
  • 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

Hinweis der Redaktion

  1. 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
  2. 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