HTML5 Video. De stand van zaken. Versie 1.1. 8 februari 2011. Herman van Dompseler / Bas Zoetekouw. SURFnet/Kennisnet Innovatieprogramma

HTML5 Video De stand van zaken Versie 1.1 8 februari 2011 Herman van Dompseler / Bas Zoetekouw SURFnet/Kennisnet Innovatieprogramma

Het SURFnet/ Kennisnet Innovatieprogramma wordt financieel mogelijk gemaakt door het Ministerie van Onderwijs, Cultuur en Wetenschap. Voor deze publicatie geldt de Creative Commons Licentie Attribution 3.0 Unported. Meer informatie over deze licentie is te vinden op http://creativecommons.org/licenses/by/3.0/

Inhoudsopgave SAMENVATTING... 4 1 INLEIDING... 5 1.1 Demonstratiewebsite... 6 1.2 Meer informatie... 6 2 ACHTERGROND... 7 2.1 Huidige stand van zaken van video in webbrowsers... 7 2.2 Codecs en formaten voor embedded video... 7 2.3 New kid on the block (Waarom HTML5/WebM/VP8?)... 10 2.4 Features van HTML5 en de <video>-tag... 11 2.5 Bronnen... 12 3 ONDERSTEUNING VAN HTML5 VIDEO... 13 3.1 <video>-tag in webbrowsers... 13 3.2 Webbrowser en video matrix... 15 3.3 Mobiele toegang tot video... 16 3.4 Mobiel en video matrix... 17 3.5 Wat als HTML5 niet ondersteund wordt?... 18 3.6 Bronnen... 19 4 GEAVANCEERDE MOGELIJKHEDEN HTML5 VIDEO... 20 4.1 Ondertitel en annotaties... 20 4.2 Websockets... 21 4.3 Digital Rights Management... 22 4.4 HTML5 Canvas... 23 4.5 Fullscreen... 24 4.6 Opnames en randapparatuur... 24 4.7 Overzicht van de ondersteuning... 25 4.8 Bronnen... 25 5 ONDERSTEUNING AAN DE SERVERKANT... 26 5.1 Distributie van video op het web... 26 5.2 Distributie van on demand video... 26 5.3 Backend ondersteuning voor HTML5 compatible formaten... 30 5.4 Overigen... 33 5.5 Bronnen... 35 6 CONCLUSIE... 36 6.1 Uitkomsten... 37 6.2 Aanbevelingen... 38 3

Samenvatting De nieuwe standaard voor het maken van webpagina s is HTML5. Deze nieuwe versie van HTML biedt voor het eerst de mogelijkheid om video direct in de browser af te spelen zonder gebruik te maken van plug ins zoals de Flashplayer. In deze technologieverkenning worden de mogelijkheden en onmogelijkheden van HTML5 op videogebied onderzocht en worden aanbevelingen gedaan aan de SURFnet/Kennisnet-gemeenschap om HTML5 voor webvideo te ondersteunen. Het direct opnemen van de video in de webpagina, zoals dat al lange tijd voor plaatjes mogelijk is, heeft een aantal voordelen, waarvan de voornaamste is dat het maken en gebruiken van video s op het web eenvoudiger wordt. Om gebruik te maken van deze nieuwe techniek, moet de video beschikbaar zijn in een formaat dat door de browser van de gebruiker wordt ondersteund. Helaas is er momenteel niet één formaat dat door alle browsers wordt ondersteund. Om HTML5 video op alle platforms te ondersteunen is het daarom nodig om elke video zowel in H.264 formaat als in WebM formaat aan te bieden. Daarbij moeten we wel opmerken dat dit pas geldt voor de volgende generatie browsers (met name Internet Explorer 9 en Firefox 4), die naar verwachting in 2011 beschikbaar zullen komen. Hoewel het afspelen van video s in een HTML5 pagina al goed werkt in nieuwe browsers, zijn er nog een aantal geavanceerde mogelijkheden die niet, of slechts in enkele browsers, worden ondersteund. Het gaat dan om zaken als full screen afspelen van video en de technische afscherming van auteursrechtelijk beschermde video s. De ontwikkelingen hier gaan echter snel en het ligt in de lijn der verwachting dat deze zaken op termijn allemaal geïmplementeerd gaan worden in de meeste browsers. Aan de serverkant zijn voor de ondersteuning van HTML-video weinig veranderingen nodig: in het algemeen kunnen videobestanden op dezelfde manier worden aangeboden als bij andere technieken het geval is. Alleen in het geval van streaming van live video zijn aanpassingen nodig. HTML5 video heeft veel aandacht in de ontwikkelgemeenschap en lijkt op termijn de nieuwe standaard te gaan worden voor video op het web, al moeten er nog wel enige hordes genomen worden, met name op het gebied van de ondersteuning in de browsers. De belangrijkste aanbeveling van dit rapport is om op dit moment al met HTML5 rekening te houden in de ontwikkeling van videotoepassingen. Het belangrijkste punt daarbij is dat video s in het H.264 formaat en het WebM formaat beschikbaar moeten worden gemaakt. Tevens is het nu al mogelijk om HTML5-video te ondersteunen voor video door browsers die geen HTML5 ondersteunen te laten terugvallen op de Flashplayer, die ook het H.264 formaat kan afspelen. 4

1 Inleiding Video en video gerelateerde toepassingen spelen een steeds grotere rol in het onderwijs. In de afgelopen jaren zijn er dan ook veel infrastructurele faciliteiten beschikbaar gekomen die dit ondersteunen, zoals de videoportals van Kennisnet en SURFnet (waaronder Teleblik en SURFmedia). Daarnaast zijn er ook veel losse initiatieven binnen onderwijsinstellingen, of worden bestaande clouddiensten zoals YouTube gebruikt. Al deze platformen hebben gemeen dat ze het world wide web gebruiken voor de presentatie van video aan de gebruiker. Van oudsher is distributie van video op het web echter problematisch. Er bestaan veel verschillende, onderling onuitwisselbare videoformaten: niet elk formaat kan op elk platform en in elke browser worden afgespeeld. Bovendien zijn voor het afspelen van de video browser plug ins (bijvoorbeeld Adobe Flashplayer) nodig, die in de praktijk allerlei beperkingen en beveiligingsproblemen met zich meebrengen. Op dit moment zijn er op dit gebied echter nieuwe ontwikkelingen gaande. De W3C, die waakt over de standaarden van het www, werkt aan een nieuwe versie van HTML, versie 5. Hierin wordt onder andere een nieuwe standaard gedefinieerd om video in webpagina s op te nemen en direct in de browser, zonder gebruik te maken van plug ins, af te spelen. Bovendien heeft Google in het begin van 2010 een nieuw videoformaat, WebM, vrijgegeven, waarvan de specificatie helemaal open is (in de zin dat niet alleen de specificatie public beschikbaar is, zoals bij H.264, maar ook het gebruik helemaal vrij en gratis is). Hierdoor is het nu mogelijk om hoge kwaliteit video via het web te verspreiden zonder licenties te hoeven aanschaffen voor de technologie. Google beoogt met dit WebM-formaat het gebruik van video op het web een nieuwe impuls te geven. Deze ontwikkelingen hebben potentieel belangrijke consequenties voor de videoplatformen zoals die op dit moment in het Nederlandse onderwijs- en onderzoeksinstellingen in gebruik zijn. In opdracht van het SURFnet/Kennisnet innovatieprogramma heeft SURFnet daarom een technologieverkenning uitgevoerd naar de nieuwe mogelijkheden voor het gebruik van video op het web die HTML5 en WebM bieden. Dit rapport is het eindverslag van deze technologieverkenning. Het doel van de technologieverkenning was om te bepalen of het gebruik van op HTML5 gebaseerde video nuttig is voor de videodiensten van SURFnet, van Kennisnet en van de Nederlandse onderwijsinstellingen; of SURFnet, Kennisnet, en hun directe doelgroepen het open WebM videoformaat zouden moeten ondersteunen; of WebM en HTML5 video op termijn propriëtaire videocodecs en oplossingen kunnen vervangen; of het op dit moment al zinnig is om te investeren in HTML5 compatibiliteit van videodiensten, of dat het daarvoor nog te vroeg is. Dit rapport is voornamelijk gericht op lezers die al enigszins kennis hebben van webpagina s en video. Er wordt dus niet uitgebreid ingegaan op de usecases van video op het web, of de technische basis van webpagina s, digitale video, en webstreaming. In Hoofdstuk 2 wordt echter wel kort de achtergrond van de besproken technologie weergegeven, en een overzicht van de huidige stand van zaken van video op het web. In Hoofdstuk 3 wordt dan dieper ingegaan op de ondersteuning van HTML5 video door de belangrijkste webbrowsers en op de verschillende videoformaten die daarbij gebruikt kunnen worden. In Hoofdstuk 4 komen diverse geavanceerde mogelijkheden van video op het web aan de orde, en wordt besproken hoe deze worden ondersteund in HTML5. Hoofdstuk 5 richt zich op de server, en bespreekt wat er aan de webserver moet worden veranderd om HTML5 5

video te ondersteunen, en welke softwarepakketten voor HTML5 geschikte videoformaten kunnen leveren. Hoofdstuk 6 tenslotte, bevat de conclusie van de technologieverkenning en besluit met een aantal aanbevelingen hoe om te gaan met video op het web in het kader van HTML5. 1.1 Demonstratiewebsite Samen met dit rapport is een eenvoudige demonstratiewebsite ontwikkeld. Op deze website is een filmpje een aantal keer beschikbaar gemaakt in verschillende formaten, zodat gebruikers zelf kunnen uitproberen hoe HTML5 video in de praktijk werkt, en welke videoformaten wel en niet door de gebruikte browser worden ondersteund. De website is te vinden op http://demo.mediamosa.surfnet.nl/html5/. 1.2 Meer informatie F. Alons, Educatieve videotoepassingen in het voortgezet onderwijs, 2008, http://web.kennisnet2.nl/portal/onderzoek/onderzoeken/overig/educatievevideotoepassingen N. Verbeij, De magie van video en leren, 2009, http://www.vka.nl/artikelen/publicaties/de_magie_van_video_en_leren W3C HTML Working Group, http://www.w3.org/html/wg/ The WebM project, http://www.webmproject.org/ 6

2 Achtergrond Dit hoofdstuk geeft inzicht in het gebruik van video in webbrowsers. Hier wordt beschreven hoe video in webbrowsers kan worden afgespeeld. Ook wordt een overzicht gegeven van de verschillende videoformaten die in browsers gebruikt kunnen worden. Het afspelen van video in een webbrowser is de opmaat voor de beschrijving van de <video>-tag in HTML5. 2.1 Huidige stand van zaken van video in webbrowsers Om een video af te spelen in een HTML-pagina moet de video in een HTML-pagina ingesloten worden, dit heet embedden. De pre-html5-manier om video in een HTMLpagina in te sluiten is door een <object>-tag op te nemen in een HTML-pagina. Bij video s op YouTube een video (bijvoorbeeld http://www.youtube.com/watch?v=qid93uxvhrw over de SURFnet-lichtpaden) staat onder de video een knopje insluiten. Dit knopje opent een schermpje met daarin de code die nodig is om deze video in een HTML-pagina in te sluiten. De code behorende bij dit filmpje is: <object width="640" height="385"> <param name="movie" value="http://www.youtube.com/v/qid93uxvhrw?fs=1&hl=nl_nl"></param> <param name="allowfullscreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/qid93uxvhrw?fs=1&hl=nl_nl" type="application/x shockwave Flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed> </object> In deze code staat allerlei informatie die de webbrowser gebruikt om het object in de HTMLpagina op te nemen. Zaken als de grootte van het object (640x385 pixels) zijn daar bijvoorbeeld vastgelegd. YouTube definieert een kaal object, waarin de URL http://www.youtube.com/v/qid93uxvhrw?fs=1&hl=nl_nl wordt geopend via het http protocol. Deze URL levert naast de video ook een Adobe Flash videospeler, waarin de video wordt afgespeeld. De <embed> code, die wordt gebruikt door browsers die de <object> code niet herkennen, bevat een herhaling van de informatie; hier wordt wel expliciet vermeld dat het om een Flash applicatie gaat. 2.2 Codecs en formaten voor embedded video Flash is een van de formaten die in een <object> ingesloten kunnen worden. Er zijn allerlei andere videoformaten die in een HTML-pagina afgespeeld kunnen worden. De term formaat wordt gebruikt om een videotechnologie te benoemen. Onderdelen van een videotechnologie zijn codecs, containers, maar ook servers, players, protcollen en afspeelapparaten. Zo gebruikte Microsoft voorheen de naam Windows Media voor deze verzameling. Het formaat komt ook vaak overeen met de naam van de container die in een specifieke videotechnologie wordt gebruikt. Een container is een soort envelop waarin afzonderlijk videobestanden, audiobestanden, ondertitels, menu s en andere elementen van een volledig videobestand gegroepeerd zijn. Een container is dus een file met daarin verwijzingen naar andere files. Het QuickTime formaat van Apple en het Ogg formaat zijn hier voorbeelden van. 7

De bekendste formaten anno 2010 zijn: Flash; Microsoft Windows Media / Silverlight; Quicktime; H.264 (MPEG 4); Ogg. In SURFmedia, de videodienst van SURFnet, worden meerdere van deze formaten ondersteund. Dit is een voorbeeld van een Microsoft object zoals het wordt gebruikt in SURFmedia: <object id='iivbtldr8ndsie0ggt5lqzvm' classid='clsid:22d6f312 B0F6 11D0 94AB 0080C74C7E95' standby='loading Media Player components...' type='application/x oleobject' width='1024' height='640'> <param name='filename' value='mms://wmvstream.kennisnet.nl/vpx/5/vjxbwryoffstsla9lozd01j1' /> <param name='autostart' value='true' /> <embed type='application/x mplayer2' src='mms://wmvstream.kennisnet.nl/vpx/5/vjxbwryoffstsla9lozd01j1' autostart='1' name='iivbtldr8ndsie0ggt5lqzvm' width='1024' height='640'/> </embed> </object> Dit object bevat dezelfde type informatie als in het voorbeeld op de vorige pagina, bijvoorbeeld de grootte van de video: 1024x640 pixels. De filename parameter geeft aan waar de video vandaan komt. In dit geval wordt deze geleverd door een windows media server ( wmvstream.kennisnet.nl ) met het mms protocol. De term protocol beschrijft hoe het dataverkeer tussen computers verloopt. De twee belangrijkste protocollen die gebruikt worden bij het afspelen van video zijn: http: Het Hyper Text Transfer Protocol is het standaardprotocol in de applicatielaag voor het uitwisselen van informatie op het internet. Met http is het ook mogelijk een video te downloaden en alvast het deel dat binnen is gekomen af te spelen alvorens het hele bestand is binnen gehaald. Dit heet dan progressive download. RTSP: Het Real Time Streaming Protocol is ontwikkeld door RealNetworks, Netscape en Columbia University en beter geschikt voor streaming dan http. Het grote verschil met http is dat in RTSP uitgebreidere communicatie tussen player en server is gedefinieerd. Met RTSP kunnen daardoor commando s aan een streaming server gegeven worden waarmee videofiles bestuurd kunnen worden, zoals het dynamisch aanpassen van bandbreedte als deze niet voldoende is. Het MMS protocol van Microsoft is een variant op dit RTSP protocol. Daarnaast gebruikt Adobe voor Flash een vergelijkbaar, maar incompatibel formaat voor streaming, RTMP. Meer over servers en protocollen is te lezen in Hoofdstuk 5. Belangrijk om te onthouden is dat ieder formaat zijn eigen manier van insluiten in een HTMLpagina heeft via de <object>-tag. Voor elk formaat wordt een andere videospeler geopend en 8

de manier waarop het formaat van de server naar de speler wordt gestuurd, het protocol, is ook telkens anders. Een <object>-tag werkt daardoor niet zomaar in elke browser en op elk platform. Sommige browsers en platformen hebben geen ondersteuning voor een bepaald protocol of formaat. Zo werkt een Windows Media stream niet zonder meer op Apple platformen. Naast het formaat zelf is er nog een belangrijk verschil in de verschillende formaten en dat is de gebruikte compressie techniek, de codec. De manier waarop audio- of videodata is gecomprimeerd, wordt een codec genoemd. Het woord codec is een samentrekking van coder en decoder. Een encoder is software waarmee grote videobestanden kunnen worden gecomprimeerd in kleinere bestanden zodat ze te streamen zijn over internet. Om deze stream af te spelen is een decoder nodig, die vaak is ingebouwd in de videospeler. Compressie heeft als doel het bestand kleiner te maken. Door compressie wordt de beeldkwaliteit dan ook vaak minder dan het origineel, tenzij voor speciale lossless compressieprotocollen gekozen wordt. Lossless compressietechnieken kunnen echter niet zover comprimeren als compressietechnieken die data weggooien en daardoor kwaliteitsverlies opleveren (lossy technieken). De URL die verwijst in de <object>-tag naar het videobestand, verwijst eigenlijk naar een container van het videobestand. In deze container staan verwijzingen naar afzonderlijke delen voor de video en de audio. De codec comprimeert deze afzonderlijke audio en videodelen. In de volgende tabel staan de verschillen tussen de belangrijkste formaten van het moment op een rijtje: Formaat Flash Windows Media / Silverlight Quicktime MP4 Ogg Container Flv/f4v asf Mov MPEG4 ogg Videospeler Flash/swf applicatie Windows Media / Silverlight QuickTime player Flash app / Silverlight / QuickTime Cortado (java), of via Windows Media of QT Protocol rtmp http / rtsp / mms http / rtsp http / rtmp / rtsp http Audio codec MP3 / AAC Wma / AAC Aifc / AAC AAC Vorbis / flac Video codec VP6 / H.264 Wmv / VC 1 / H.264 Sorensen / H.264 H.264 theora Propriëtair / open Licentiekosten voor encoden Licentiekosten voor afspelen prop prop prop prop open X X X X Samengevat zijn er in de huidige browsers drie belangrijke <object>-tags die (1) een Adobe Flash player openen, (2) een Microsoft Windows Media player openen, of (3) een Apple 9

QuickTime player openen. Elk van deze drie formaten heeft propriëtaire codecs en heeft zijn eigen methode van video afspelen. Er is één open videoformaat dat al deze players daarnaast ook af kunnen spelen en dat is MP4/H.264. Ondanks het feit dat de specificatie van H.264 vrij beschikbaar is, zijn aan het gebruik van H.264 als enige codec licentiekosten verbonden. Daarnaast is er de Ogg suite; deze heeft een volledige eigen set van tools, die voor iedereen toegankelijk en bruikbaar zijn. MP4/H.264 is een belangrijk formaat, met name omdat veel grote spelers het gebruiken en daardoor vrijwel alle gebruikers het kunnen afspelen. Met dit formaat is een hoge compressie mogelijk zonder (al te veel) kwaliteitsverlies: Een videobestand kan relatief klein gemaakt worden, terwijl de beeldkwaliteit relatief hoog blijft. 2.3 New kid on the block (Waarom HTML5/WebM/VP8?) In mei van 2010 heeft Google een nieuw videoformaat gelanceerd, genaamd WebM. Google heeft WebM expliciet gepositioneerd als open en gratis videoformaat voor het internet, Het levert hoge kwaliteit audio en video en is voor iedereen bruikbaar toegankelijk. Qua filosofie lijkt WebM het meest op het Ogg formaat. In de volgende tabel worden de bovenstaande formaten en WebM met elkaar vergeleken: Formaat Flash Windows Media / Silverlight Quicktime H.264 Ogg WebM container Flv/f4v asf Mov MPEG4 ogg WebM Videospeler Flash/swf applicatie Windows Media / Silverlight QuickTime player Flash app / Silverlight / QuickTime Cortado (java) Diverse Protocol rtmp http / rtsp / mms http / rtsp http / rtmp / rtsp http http Audio codec MP3 / AAC Wma / AAC Aifc / AAC AAC Vorbis / flac Vorbis Video codec VP6 / H.264 Wmv / VC 1 / H.264 Sorensen / H.264 H.264 Theora VP8 Propriëtair / open Licentiekosten voor encoden Licentiekosten voor afspelen prop prop prop prop open open X X X X De belangrijkste eigenschappen van WebM zijn dat het open is, en vrij en gratis in gebruik. Dit in tegenstelling tot de andere formaten die ofwel gesloten zijn, ofwel waarvoor een licentieovereenkomst vereist is. Daarnaast is WebM ontwikkeld om direct in de browser af te spelen, gebruik makend van nieuwe HTML5 technologie en de daarbij behorende <video>tag. Dit betekent dat er geen plug in (Flash, Silverlight of QuickTime) meer nodig is om de video af te spelen. 10

Om WebM video in HTML5 af te spelen is het noodzakelijk dat de browser HTML5 en het WebM formaat ondersteunt. In het volgende hoofdstuk wordt dieper ingegaan op de ondersteuning van HTML5 in diverse browsers. In de volgende paragraaf worden eerst de belangrijkste eigenschappen van HTML5 onder de loep genomen. 2.4 Features van HTML5 en de <video>-tag HTML5 is een verzameling standaarden van de W3C met nieuwe features voor dynamische webpagina s. Eén van deze nieuwe features is de <video>-tag. Een van de andere features is de mogelijkheid tot tekenen met de <canvas>-tag. HTML5 biedt daarnaast ook meer detail in formulieren, zoals een search box en een email box. Een andere belangrijke aanvulling van HTML5 is lokale opslag in de browser voor het offline bewaren van statusdata. Ook geolocatie bepaling is onderdeel van HTML5. Meer informatie over HTML5 is te vinden in deze presentatie: http://slides.html5rocks.com/. Meer informatie over HTML5 in een bredere context dan in dit rapport is te vinden op http://diveintohtml5.org/. In deze verkenning ligt de focus op de videomogelijkheden in HTML5. De <video>-tag wordt gebruikt om video in een webpagina in te sluiten. In tegenstelling tot de voorbeelden eerder in dit hoofdstuk, is er dus geen <object>-tag meer nodig. Er zijn in de standaard geen beperkingen in het gebruik van een container of een audio of video codec opgelegd. In theorie zijn dus alle formaten en codecs binnen de <video> tag toegestaan. De browser bepaalt welk videoformaat wordt ondersteund, en het zijn dus de ontwikkelaars van de browsers die uiteindelijk zullen bepalen welke formaten worden ondersteund. Er is op dit moment niet één formaat die door de HTML5 specificatie wordt voorgeschreven. In het volgende hoofdstuk wordt uitgebreid ingegaan op de mogelijke combinaties van browsers en videoformaten. De video tag heeft de volgende attributen waarmee de presentatie kan worden aangepast. Attribuut Waarde Beschrijving Audio muted Default status van de audio Autoplay autoplay De video begint direct te spelen Controls controls Er worden knoppen bij de video getoond, zoals een play knop Height [pixels] De hoogte van de video Loop loop De video begint opnieuw nadat hij is afgelopen Preload preload De video wordt geladen als de pagina wordt geladen. Src [URL] De URL van de video Width [pixels] De breedte van de video De <video>-tag ondersteunt naast bovenstaande specifieke attributen alle standaard HTML5 attributen. Daarmee is de video onder andere eenvoudig te benaderen en te bewerken met Javascript en CSS voor dynamische aansturing en vormgeving van de video. HTML5 Code Een eenvoudige <video>-tag om een H.264 filmpje, MY_MOVIE.mp4, af te spelen in het formaat 320 bij 240 pixels is: 11

<video src="my_movie.mp4" width="320" height="240" id="movie" preload controls /> De id tag kan gebruikt worden om vanuit Javascript en CSS het video object te bewerken, zoals het aanpassen van de grootte van de video, het pauzeren en spelen van de video, etc. De preload en controls opties geven aan dat de video geladen mag worden tijdens het openen van de pagina en dat er controls voor bijvoorbeeld afspelen en stoppen van de video getoond moeten worden. Merk op dat deze <video>-tag alleen in browsers werkt die het MP4-formaat ondersteunen. In de loop van dit document zal deze tag uitgebreid worden met code zodat de video voor alle browsers geschikt wordt. 2.5 Bronnen HTML5: http://diveintohtml5.org/video.html HTML5: http://www.html5video.org/ HTML5: http://en.wikipedia.org/wiki/html5_video HTML5; http://www.w3schools.com/html5/tag_video.asp HTML5 test: http://html5test.com/ QuickTime: http://images.apple.com/euro/quicktime/pdf/quicktime7_user_guide.pdf MS expression: http://www.microsoft.com/netherlands/expression/ MS Silverlight: http://www.microsoft.com/silverlight/ MS codecs: http://msdn.microsoft.com/en us/library/ff819508(vs.85).aspx Silverlight codecs: http://msdn.microsoft.com/en us/library/cc189080(vs.95).aspx Alles ogg: http://www.xiph.org/ Adobe Flash: http://en.wikipedia.org/wiki/flash_video H.264 overal: http://www.wowzamedia.com/h.264.html WebM: http://www.webmproject.org/ Gerelateerde SURFnet/Kennisnet-rapporten: http://www.surfnetkennisnetproject.nl/attachments/2235334/ts_open_live_streamin gdefinitief.pdf http://video.surfnet.nl/streamingvideoformaten/rapport_streaming_video_formaten.p df 12

3 Ondersteuning van HTML5 video In het vorige hoofdstuk is beschreven dat met de nieuwe <video>-tag in HTML5 het mogelijk is om video in een webbrowser af te spelen zonder gebruik te maken van een plug in. Dit lijkt de ideale oplossing voor video op het web, want er is dan geen propriëtaire videospeler of software meer nodig om een video op alle platformen af te spelen. Zover is het nu nog niet. Ten eerste bieden alleen recente browserversies ondersteuning voor HTML5. Bovendien is er veel verschil tussen de implementaties van de verschillende browsers van de <video>-tag, waardoor een bepaalde video niet in iedere browser afspeelbaar is. Alle nieuwe browsers ondersteunen de <video>-tag wel, maar het verschilt per browser welk formaat video afspeelbaar is. 3.1 <video>-tag in webbrowsers Om een vergelijking te maken tussen de webbrowsers worden hierna de vijf belangrijkste desktop webbrowsers van het moment beschouwd: 1. Internet Explorer; 2. Firefox; 3. Chrome; 4. Safari; 5. Opera. In sectie 3.3 kijken we naar de ondersteuning in mobiele apparaten. Van iedere webbrowser wordt de HTML5-ondersteuning van de huidige versie weergegeven en de ondersteuning van de bèta-versie, als deze beschikbaar is. Alleen de belangrijkste formaten worden in beschouwing genomen, die op verschillende platforms beschikbaar zijn. Naast de beschreven formaten ondersteunen fabrikanten vaak ook nog hun eigen formaten, die echter niet algemeen bruikbaar zijn. Internet Explorer Internet Explorer is de webbrowser die geleverd wordt door Microsoft. Deze is alleen beschikbaar op Windows platforms. Huidige versie: 8 De huidige versie van Internet Explorer ondersteunt de <video>-tag niet. Bètaversie: 9 De nieuwste features van Microsoft wat betreft HTML5 video zijn hier te vinden: http://msdn.microsoft.com/en us/ie/ff468705.aspx#_html5_video_audio. Op het gebied van HTML5 en de <video> tag gaat er ondersteuning komen voor: Container: MP4, WebM 1 Video: H.264, VP8 1 Audio: AAC, mp3, Vorbis 1 Firefox Firefox is de veel gebruikte browser van de Mozilla community. Deze is beschikbaar voor Windows, OSX, en Linux. 1 WebM wordt niet standaard bij Internet Explorer geleverd, maar door de WebM codec in Windows te installeren, wordt het voor gebruikers wel mogelijk in Internet Explorer 9 WebM video s af te spelen. 13

Huidige versie: 3.6 Deze versie ondersteunt de <video>-tag voor de volgende formaten: Container: ogg Video: Theora Audio: Vorbis Bètaversie: 4.0 Belangrijke HTML5 video features van de nieuwe versie 4.0 zijn hier te vinden: https://developer.mozilla.org/en/media_formats_supported_by_the_audio_and_video_elements. Daar is veel te lezen over HTML5 en video. Firefox gaat ondersteuning geven voor WebM: Container: WebM, Ogg Video: VP8, Theora Audio: Vorbis Chrome Chrome is de webbrowser van Google, en is beschikbaar op Windows, OSX, en Linux. Ondersteuning voor HTML5 video is er vanaf versie 5 van Chrome. Vanaf versie 6 wordt ook WebM ondersteund. Huidige versie: 7.0 Deze versie ondersteunt de <video>-tag voor de volgende formaten: Safari Container: Ogg, WebM, MP4 Video: Theora, VP8, H.264 Audio: Vorbis, AAC Safari is de webbrowser van Apple. Van oudsher ondersteunt Apple het H.264 en de MP4/MOV container. Safari doet dat vanaf versie 3 ook. Huidige versie: 5.0 Deze versie ondersteunt de <video>-tag voor de volgende formaten: Opera Container: MP4 Video: H.264 Audio: AAC Opera is een webbrowser die is ontwikkeld in Noorwegen; het bedrijf Opera is nu onderdeel is Nokia. De browser is beschikbaar voor Windows, OSX, en Linux. Huidige versie: 10.6 Deze versie ondersteunt de <video>-tag voor de volgende formaten: Container: Ogg, WebM Video: Theora, VP8 Audio: Vorbis Bètaversie: 11 De nieuwe versie van Opera heeft optimalisaties voor HTML5, maar zal dezelfde formaten ondersteunen als versie 10.6. 14

3.2 Webbrowser en video matrix Alle versies en video ondersteuning uit de vorige paragrafen zijn hierna opgenomen in één overzicht. container Internet Explorer Firefox Chrome Safari Opera 8 9 3.6 4.0 6+ 3+ 10.6+ MP4 Ogg WebM 2 Video codec H.264 Theora VP8 2 Audio codec MP3 AAC Vorbis 2 combined Ogg/Theora/Vorbis MP4/H.264/AAC/ WebM/VP8/Vorbis 2 Uit deze tabel is te lezen dat er op dit moment nog geen combinatie is die op alle browsers werkt met de HTML5 <video>-tag. Als op dit moment gebruik wordt gemaakt van de <video> tag om video s op te nemen, dan moet een combinatie van alle drie de formaten worden gebruikt. Als we alleen de nieuwste versie van Firefox in beschouwing nemen, is een combinatie van minimaal twee videoformaten nodig. De mogelijk combinaties zijn: MP4 en Ogg; MP4 en WebM; De belangrijkste bewegingen in de toekomst zijn die van Internet Explorer versie 9 naar H.264 ondersteuning en van Firefox 4.0 naar WebM ondersteuning. Aangezien VP8 (de videocodec behorende bij WebM) een modernere codec is en betere kwaliteit en compressie geeft dan Theora (de videocodec in het Ogg-formaat), ligt het voor de hand te kiezen voor WebM. Overigens is de kwaliteit ook erg afhankelijk van welke encoder er wordt gebruikt: een goede Theora-encoder kan betere resultaten geven dan een slechte VP8-encoder, ondanks dat de VP8 codec geavanceerder is. 2 Na handmatige installatie van de codec 15

De belangrijkste conclusie is dus dat video voor gebruik met HTML5 het beste beschikbaar gemaakt kan worden in de volgende combinatie, waarbij opgemerkt moet worden dat Chrome beide formaten ondersteunt: MP4 voor IE 9 en Safari 3+ WebM voor FireFox 4, Chrome 6+ en Opera 10.6+ Door ondersteuning van deze twee formaten is de video het beste op de toekomst voorbereid. Deze conclusie wordt onderschreven door wat YouTube op dit moment over HTML5 ondersteuning schrijft op http://www.youtube.com/html5: HTML5 code Zoals we hierboven hebben beschreven is het nodig om video s in meerdere formaten aan te bieden. Om het voorbeeld van HTML5 video uit Hoofdstuk 2 afspeelbaar te maken in alle browsers is het nodig meerdere source files aan te bieden in de <video>-tag. Het nieuwe voorbeeld is: <video id="movie" width="320" height="240" preload controls> <source src="my_movie.mp4" /> <source src="my_movie.webm" type='video/webm; codecs="vp8, vorbis"' /> </video> Indien naast MP4 en WebM ook het Ogg formaat gewenst is, dan kan de volgende source als derde optie binnen de <video> tag toegevoegd worden: <source src="my_movie.ogv" type='video/ogg; codecs="theora, vorbis"' /> 3.3 Mobiele toegang tot video Naast webbrowsers voor PC en laptops wordt er steeds meer gebrowsed met mobiele(re) apparaten. Een aantal van deze apparaten en software hebben worden in dit rapport ook beschreven wat betreft hun ondersteuning voor HTML5 Video. Het gaat om: 1. ios van Apple voor iphone en ipad; 2. Android van Google; 3. Windows Phone 7, het mobiele operating systeem van Microsoft; 4. Opera mini, een browser van Opera voor verschillende mobiele platformen. 16