Post on 17-Dec-2014
description
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?
Milano, 20-22 ottobre - Fieramilanocity
2
Roberto Ellero Webmultimediale.org
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: robertoellero@gmail.comIdeatore 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
Milano, 20-22 ottobre - Fieramilanocity
3
Roberto Ellero Webmultimediale.org
Premessa
Solo qualche anno fa era usuale incontrare questo tipo di servizio video
Un video, tre formati: Rm, Wmv, Mov.
Milano, 20-22 ottobre - Fieramilanocity
4
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
5
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
6
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
7
Roberto Ellero Webmultimediale.org
Adobe Flash,e gli altri pluginmultimediali, si inglobano nellapagina utilizzandol’elementoObject.Si tratta dioggetti diprogrammazioneesterni.
Milano, 20-22 ottobre - Fieramilanocity
8
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
9
Roberto Ellero Webmultimediale.org
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
Milano, 20-22 ottobre - Fieramilanocity
10
Roberto Ellero Webmultimediale.org
I Player nei browser
IE9
Opera
Firefox
Chrome
Safari
Milano, 20-22 ottobre - Fieramilanocity
11
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
12
Roberto Ellero Webmultimediale.org
Skin (CSS + Javascript)
http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/
Milano, 20-22 ottobre - Fieramilanocity
13
Roberto Ellero Webmultimediale.org
Skin (CSS + Javascript)
http://broken-links.com/tests/video/
Milano, 20-22 ottobre - Fieramilanocity
14
Roberto Ellero Webmultimediale.org
YouTube.com/Html5 H.264
Milano, 20-22 ottobre - Fieramilanocity
15
Roberto Ellero Webmultimediale.org
YouTube.com/Html5 WebM
Milano, 20-22 ottobre - Fieramilanocity
16
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
17
Roberto Ellero Webmultimediale.org
JW
Flash
Player
Milano, 20-22 ottobre - Fieramilanocity
18
Roberto Ellero Webmultimediale.org
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
Milano, 20-22 ottobre - Fieramilanocity
19
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
20
Roberto Ellero Webmultimediale.org
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.
Milano, 20-22 ottobre - Fieramilanocity
21
Roberto Ellero Webmultimediale.org
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)
Milano, 20-22 ottobre - Fieramilanocity
22
Roberto Ellero Webmultimediale.org
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)
Milano, 20-22 ottobre - Fieramilanocity
23
Roberto Ellero Webmultimediale.org
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
Milano, 20-22 ottobre - Fieramilanocity
24
Roberto Ellero Webmultimediale.org
Encoder per WebM e Ogg Theora Vorbis
Miro http://www.mirovideoconverter.com
Milano, 20-22 ottobre - Fieramilanocity
25
Roberto Ellero Webmultimediale.org
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>
Milano, 20-22 ottobre - Fieramilanocity
26
Roberto Ellero Webmultimediale.org
Google Chrome
Milano, 20-22 ottobre - Fieramilanocity
27
Roberto Ellero Webmultimediale.org
Opera 10.63
Milano, 20-22 ottobre - Fieramilanocity
28
Roberto Ellero Webmultimediale.org
Firefox 3.6
Milano, 20-22 ottobre - Fieramilanocity
29
Roberto Ellero Webmultimediale.org
Firefox 4 Beta
Milano, 20-22 ottobre - Fieramilanocity
30
Roberto Ellero Webmultimediale.org
Safari
Milano, 20-22 ottobre - Fieramilanocity
31
Roberto Ellero Webmultimediale.org
IE 8
Milano, 20-22 ottobre - Fieramilanocity
32
Roberto Ellero Webmultimediale.org
IE 9
Milano, 20-22 ottobre - Fieramilanocity
33
Roberto Ellero Webmultimediale.org
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
Milano, 20-22 ottobre - Fieramilanocity
34
Roberto Ellero Webmultimediale.org
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>
Milano, 20-22 ottobre - Fieramilanocity
35
Roberto Ellero Webmultimediale.org
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
Milano, 20-22 ottobre - Fieramilanocity
36
Roberto Ellero Webmultimediale.org
L’argomento è in continua evoluzione, rimaniamo in contatto
robertoellero@gmail.comhttp://www.facebook.com/robertoellero
http://it.linkedin.com/in/rellero
www.webmultimediale.org