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
-tag ................................................................... 11 2.5 Bronnen ..................................................................................................................... 12 -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 -tag in HTML5.-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: <param name="movie" value="http://www.youtube.com/v/qiD93UxvHRw?fs=1&hl=nl_NL"> <param name="allowFullScreen" value="true"> <param name="allowscriptaccess" value="always"> <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"> code niet herkennen, bevat een herhaling van de informatie; hier wordt wel expliciet vermeld dat het om een Flash applicatie gaat. 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. <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'/> -tag. Voor elk formaat wordt een andere videospeler geopend en-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).-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-tags die (1) een Adobe Flash–player openen, (2) een Microsoft Windows Media–player openen, of (3) een Appletag. Dit betekent dat er geen plug–in (Flash, Silverlight of QuickTime) meer nodig is om de video af te spelen.-tag-tag. Een van de andere features is de mogelijkheid tot tekenen met de -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 -tag wordt gebruikt om video in een webpagina in te sluiten. In tegenstelling tot de voorbeelden eerder in dit hoofdstuk, is er dus geen -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 –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-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.-tag om een H.264 filmpje, MY_MOVIE.mp4, af te spelen in het formaat 320 bij 240 pixels is:-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.-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 -tag, waardoor een bepaalde video niet in iedere browser afspeelbaar is. Alle nieuwe browsers ondersteunen de -tag wel, maar het verschilt per browser welk formaat video afspeelbaar is.-tag in webbrowsers-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 –tag gaat er ondersteuning komen voor: – – –-tag voor de volgende formaten: – – –-tag voor de volgende formaten: – – –-tag voor de volgende formaten: – – –-tag voor de volgende formaten: – – –-tag. Als op dit moment gebruik wordt gemaakt van de –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: – –-tag. Het nieuwe voorbeeld is: <source src="MY_MOVIE.mp4" /> <source src="MY_MOVIE.webm" type='video/webm; codecs="VP8, vorbis"' /> –tag toegevoegd worden: <source src="MY_MOVIE.ogv" type='video/ogg; codecs="theora, vorbis"' />-tag.-tag.–tag. De twee belangrijkste mobiele apparaten maken gebruik van H.264 video, maar helaas is er nog geen ondersteuning op het mobiele Windows–platform. Qua ondersteunde codecs maken mobiele browsers dan ook geen verschil, omdat MP4/H.264 sowieso al aangeboden dient te worden voor desktopbrowsers. De eerder gepresenteerde code werkt daardoor ook op mobiele apparaten, voor zover die HTML5-video ondersteunen. Hierbij moet wel opgemerkt worden dat de H.264 video codec en de AAC audio codec niet met de meest geavanceerde opties ingesteld moeten worden tijdens het encoding proces. De meest complexe coderingen worden niet ondersteund op de mobiele platformen en zijn daar niet afspeelbaar. Daarom is het aan te bevelen H.264 met een profiel voor mobiele devices te coderen en AAC met het ‘low complexity’ profiel, wanneer ondersteuning voor het afspelen op mobiele devices gewenst is. Gebruik bijvoorbeeld het iPhone-profiel in Handbrake. (http://www.handbrake.fr/)-tag wordt gebruikt om video in een browser af te spelen zonder plug–in. Op dit moment zijn alleen de nieuwste browsers geschikt hiervoor. Als bezoekers met oudere browsers de video willen bekijken dan zal er een mechanisme moeten zijn waardoor alsnog een plug–in wordt gebruikt om de video af te spelen. Om een plug–in af te spelen als de -tag niet begrepen wordt kan er een -tag binnen de -tag worden geplaatst. Dit kan een willekeurig object zijn, zoals Silverlight of Flash. Het meest gebruikte object van het moment om video in een webpagina te tonen is Flash. Voordeel van het gebruik van Flash is dat binnen Flash een H.264 video afgespeeld kan worden. Er hoeft dus geen aparte encoding meer plaats te vinden, maar de H.264 kan hergebruikt worden om in het Flash object af te spelen. <source src="MY_MOVIE.mp4" /> <source src="MY_MOVIE.webm" type='video/webm; codecs="VP8, vorbis"' /> <script type='text/Javascript' src='http://player.vpcore.snkn.nl/swfobject– licensed.js'> This div will be replaced
<script type='text/Javascript'> var s1 = new SWFObject('http://player.vpcore.snkn.nl/player– licensed.swf','ply','352','308','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('wmode','opaque'); s1.addParam('flashvars','streamer=rtmp://wowstreaming.snkn.nl/vod&file=vpx/5/MY_MOVIE.mp 4'); s1.addVariable('type', 'mp4'); s1.write('mediaspace'); –element tracks met diverse vormen van gesynchroniseerde tekst toe te voegen. De rendering van de tekst wordt verder aan de browser overgelaten. Zo’n video–tag met ondertitels ziet er als volgt uit: <source src="MY_MOVIE.mp4" /> <source src="MY_MOVIE.webm" type='video/webm; codecs="VP8, vorbis"' /> –element, dat gebruikt kan worden om grafieken, plaatjes, of andere grafische elementen te tekenen. Dit heeft allerlei nuttige toepassingen voor webapplicaties in het algemeen, maar heeft ook toepassingen voor HTML5 Video.–tag.-tag kan worden gebruikt, zal deze moeten worden omgezet naar een formaat en codec die door de browser wordt ondersteund. Zoals we in Hoofdstuk 3 hebben uitgelegd, zijn de belangrijkst drie videoformaten die te gebruiken zijn met HTML5 video: – – ––element een probleem zal zijn.-tag in HTML5 is een nieuwe manier om video in een webpagina in te sluiten. Door gebruik te maken van deze technologie is het gebruik van video in webbrowsers vereenvoudigd. Het is mogelijk geworden video af te spelen zonder hulp van een plug–in in een -tag. Hierdoor zijn er theoretisch geen beperkingen meer in het gebruik van een videoformaat, container of codec. Waar eerst de plug–in verantwoordelijk was voor het correct afspelen van een video is met deze nieuwe technologie de webbrowser verantwoordelijk geworden. Door de verscheidenheid aan webbrowsers op diverse afspeelapparaten, zoals PC’s, laptops en mobiele apparaten, is er ook een diversiteit aan implementaties van de functionaliteit van de -tag. Niet iedere browser ondersteunt alle videoformaten. De drie audio en videoformaten die gebruikt worden zijn: 1. Een MP4 container met H.264 video en AAC audio; 2. Een Ogg container met Theora video en Vorbis audio; 3. WebM, een WebM-container met VP8 video en Vorbis audio. Uit dit onderzoek is gebleken dat er meerdere varianten van deze formaten gebruikt moeten worden om de video met gebruik van HTML5 op alle apparaten af te laten spelen. De combinatie van MP4 en Ogg of de combinatie van MP4 en WebM is toereikend. Aangezien de video-codec die bij WebM wordt gebruikt, VP8, moderner is en dus potentieel beter compressie toestaat, ligt het voor de hand voor WebM te kiezen. Merk echter wel op dat de huidige versie van Firefox, 3.6, nog geen WebM ondersteunt; die ondersteuning komt beschikbaar in versie 4, die in 2011 zal verschijnen. De -tag voorziet in een mechanisme om meerdere videoformaten aan één tag te koppelen. Daardoor zijn alle afspeelapparaten te bedienen met één stuk code. De HTML5 -tag is een nieuwe technologie die uiteindelijk moet concurreren met al bestaande methoden om video af te spelen zoals QuickTime, Silverlight (Windows Media) en Flash. Flash is op dit moment het meest verspreid en biedt een aantal geavanceerde functionaliteiten die (nog) niet in HTML5 ondersteund worden. In dit onderzoek is gekeken naar onder andere Digital Rights Management (DRM) en het kunnen afspelen van een video in een volledig scherm. Juist op deze twee terreinen is er voor HTML5 niet één generieke oplossing die wel in Flash voorhanden is. Dit zal een reden zijn om in de nabije toekomst toch Flash te blijven gebruiken. We verwachten echter dat vroeg of laat ook de deze geavanceerde video functionaliteiten in HTML5 ondersteund zullen worden. Door gebruik te maken van HTML5 zijn er ook geavanceerde functionaliteiten die juist weer makkelijker toe te voegen zijn. Dit heeft te maken met het feit dat de -tag onderdeel van de webpagina is, waardoor deze aangestuurd kan worden met Javascript en CSS. Hierdoor is het eenvoudig geworden om vanuit de webpagina bijvoorbeeld ondertiteling bij een video toe te voegen en aan te sturen. Ook kan de video bewerkt worden in een -tag om beeldbewerking mogelijk te maken. Omdat HTML5 onderdeel van een webpagina is, is ook de streaming technologie vereenvoudigd. Aan de serverkant is niet veel technologie nodig om een video in de browser te tonen. Omdat streaming over http gaat, is een video net zo te behandelen als een HTMLpagina of een image en kan de video vanaf een webserver geserveerd worden. Voor gebruik van geavanceerde streaming technieken worden door bestaande plug–ins andere protocollen gebruikt, zoals RTSP, MMS en RTMP. Deze protocollen voorzien in functionaliteiten zoals bandbreedte onderhandeling tussen server en plug–in. Ook maken deze protocollen het makkelijk om vooruit en achteruit te spoelen in een video. Vooruit en komt er aan. Daar is geen twijfel over mogelijk. In deze aanbevelingen volgen een aantal richtlijnen voor het inzetten van HTML5 video. We hebben gekeken naar de videoformaten die op dit moment gebruikt worden in verschillende browsers en naar de videoformaten die sterk in opkomst zijn. •-tag ondersteunt. Hiermee is de video voor iedereen afspeelbaar. Bij voorkeur kan direct een tweede codering in WebM toegevoegd worden. In de toekomst heeft het de voorkeur om WebM als basisformaat te gebruiken, en een MP4formaat aan te bieden als fallback voor Apple-platformen. Ook dient het aanbeveling om bestaande video in een propriëtair formaat zoals Windows Media of Flash om te gaan zetten naar WebM en H.264. Deze nieuwe video’s kunnen dan in dezelfde omgeving afgespeeld worden, met dezelfde players en bovendien ingezet worden als HTML5 video. Als Digital Rights Management (DRM) een issue is binnen de organisatie waar de video ingezet gaat worden, dan kan op dit moment alleen een propriëtair formaat, Windows Media of Flash, worden gebruikt. In dit geval is het zaak nog te wachten de video via HTML5 beschikbaar te stellen. Eventueel kan wel de stap naar MP4 gemaakt worden.
