Fronteers — vakvereniging voor front-end developers

HTML5 Video | Een overzicht

HTML5 introduceert verschillende nieuwe tools voor het bouwen van dynamische websites en applicaties. Eén hiervan is het <video> element. In theorie maakt dit het invoegen van video's in websites net zo simpel als het invoegen van afbeeldingen met het <img> element.

In de praktijk is HTML5 video nog volop in ontwikkeling. Belangrijke opties ontbreken nog, niet alle browsers herkennen <video> en de browsers die dat wel doen ondersteunen verschillende formaten. HTML5 video werkt echter uitstekend op smartphones en tablets (iOS en Android). Al met al kan het, met enig denkwerk, vandaag al gebruikt worden in productie.

Waarom HTML5 video?

Het invoegen van video gebeurt nu meestal met de Adobe Flash plugin. Dit werkt uitstekend, dus waarom moet het nu opeens in HTML? Er zijn twee praktische redenen:

  1. Flash wordt niet ondersteund op iOS, het populaire mobiele platform van Apple. HTML5 is de enige manier om webvideo af te spelen op de iPad/iPhone.
  2. Het invoegen van een HTML5 video is makkelijk. De video tag is kort en bondig, en ontwikkelaars kunnen hun bestaande CSS en JavaScript vaardigheden gebruiken.

Er is ook een belangrijkere, maar minder concrete reden. Om online video echt succesvol te laten zijn, moet het een First Class Web Citizen worden. Dit maakt het:

  • Toegankelijker, zowel voor (gehandicapte) personen als (exotische) apparaten.
  • Vindbaarder, bijvoorbeeld vinden via zoekmachines of archieven.
  • Stabieler en veiliger, omdat de plugin "laag" verdwijnt.
  • Beter presterend, zowel aan de browser (CPU/GPU) als aan de netwerk (TCP/HTTP) kant.

Browser ondersteuning

Wie ondersteunt HTML5 video vandaag? Hier is een overzichtje (oktober 2011), met daarin de desktop-browsers en mobiele apparaten gemixt:

Browser Marktaandeel HTML5 ondersteuning Flash ondersteuning
Internet Explorer 6/7/8 30% Nee Ja
Firefox 25% Ja (WebM) Ja
Chrome 20% Ja (MP4 + WebM)¹ Ja
Internet Explorer 9 10% Ja (MP4) Ja
Safari 4% Ja (MP4) Ja
iOS 3% Ja (MP4) Nee
Opera 2% Ja (WebM) Ja
Android 1% Ja (MP4) Ja²
Windows Phone 0% Ja (MP4) Nee
Overig ("dumbphones") 5% Nee Nee
  1. Chrome heeft afgelopen januari aangekondigd MP4 "binnenkort" te verwijderen. Tot dusver werkt het nog.
  2. Adobe is gestopt met het ontwikkelen van Flash voor mobiel. Android 4.0 is de laatste versie met Flash ondersteuning.

Tweederde van de markt kan dus HTML5 video afspelen. Uiteraard kunnen oude versies van IE (6/7/8) dit niet, maar zij draaien wel Flash (als fallback optie). Het aandeel van mobiele browsers (iOS en Android) is nog klein (5%), maar snel groeiend.

In de HTML5 kolom worden de ondersteunde video formaten vermeld. Sommige browsers ondersteunen MP4, anderen weer WebM. Alleen Chrome ondersteunt beide. Dit gebrek aan een standaard video formaat is het grootste probleem voor HTML5 video.

Het codec probleem

Eerst een korte uitleg van video formaten. Ze bestaan grofweg uit drie bouwstenen:

  1. De container bevat alle metadata inclusief de audio/video codec info, maar niet de frames/samples zelf.
  2. De video codec bevat de eigenlijke, gecodeerde video frames.
  3. De audio codec bevat de eigenlijke, gecodeerde audio samples.

Hoe beter de video en audio codecs zijn, hoe beter (kleinere bestanden, eenvoudiger te coderen) het video formaat is. Op dit moment worden er twee (uitstekende) formaten gebruikt in HTML5:

Qua kwaliteit doen de twee formaten niet veel onder voor elkaar. Het grote verschil zit hem in hun IP:

In deze afweging tussen pragmatisme en patenten hebben sommige browsers gekozen voor het eerste (MP4) en anderen voor het laatste (WebM). Het resultaat is dat je nu je video twee keer moet encoderen om alle HTML5 browsers te ondersteunen. Als WebM op termijn meer tractie krijgt, zal dat veranderen, maar dit is een langzaam proces.

Er is trouwens nog een derde HTML5 formaat: Ogg. Het is kwalitatief stukken minder dan MP4/WebM, maar werd ondersteund door Firefox en Opera voordat Google WebM vrijgaf. De enige browser die nog Ogg vereist, is het snel verdwijnende Firefox 3.6.

Video en sources

Nu door naar de video tag zelf. Kort en bondig, als beloofd:

<video
controls
height="360"
poster="/files/bunny.jpg"
src="/files/bunny.mp4"
width="640">
</video>

De controls optie rendert een ingebouwde navigatiebalk, de height en width bepalen de dimensies van de video, de poster linkt naar een screenshot van de video en de src linkt naar de video zelf. Daarnaast zijn er nog de autoplay, preload en loop opties om het afspelen te controleren.

Om het twee-codec-probleem te faciliteren bevat HTML5 een tweede element: <source>. Meerdere source elementen kunnen worden genest in één video. HTML5 browsers inspecteren de source elementen en spelen de eerste die ze ondersteunen:

<video controls height="360" poster="/files/bunny.jpg" width="640">
<source src="/files/bunny.mp4" type="video/mp4" />
<source src="/files/bunny.webm" type="video/webm" />
</video>

De HTML5 specificatie beschrijft ook het toevoegen van de audio/video codecs aan de type optie. In de praktijk is dit niet nodig, omdat alle browsers deze waardes negeren en codecs detecteren tijdens het downloaden van de video.

Bovenstaand stukje HTML resulteert in theorie in een consistente video weergave in alle HTML5 browsers. In de praktijk zijn er echter nog allerlei bugs en gaten in implementatie. Het handmatig omzeilen van deze issues is een rotklus. Een HTML5 Video Player kan daarbij helpen.

HTML5 video players

Een HTML5 Video Player is een aparte JavaScript bibliotheek die zowel de video's op een pagina als de browser ondersteuning detecteert. De bibliotheek werkt vervolgens om de tekortkomingen van de browser heen. De term Video Player is dus enigszins misleidend, want het is nog steeds de browser die de video afspeelt.

Er zijn behoorlijk wat van deze bibliotheken in ontwikkeling. Ze bieden meestal:

  • Het corrigeren voor browser bugs. Vooral Android en iOS hebben kritieke bugs in hun parsing en rendering van video elementen.
  • Het terugvallen op de Flash-plugin. Dit is nodig voor oude browsers (IE 6/7/8), en voor Firefox/Opera als je alleen MP4 gebruikt.
  • Het renderen van een consistente navigatie. De ingebouwde navigatie van iedere HTML5 browser ziet er namelijk anders uit, en kan niet gestyled worden.
  • Het aanbieden van een pseudo-fullscreen-optie, door de video naar het volledig browservenster te vergroten. In tegenstelling tot Flash is er nog geen daadwerkelijk fullscreen in HTML5, maar daar wordt aan gewerkt.

Naast deze functies ondersteunen sommige Video Players zaken als afspeellijsten, ondertiteling of in-video adverteren. Eén belangrijke video functie kunnen ze niet via scripting ondersteunen: streaming. Dit zal ingebouwd moeten worden door de browsers zelf.

Video streaming

Het grootste obstakel voor snelle adoptie van HTML5 is het ontbreken van één enkel formaat. Dit heeft als direct gevolg dat HTML5 video's 2x geëncodeerd en 2x opgeslagen moeten worden. Dit heeft echter ook als gevolg dat er geen standaard streaming mechanisme is:

  • Video wordt dus altijd geleverd als een "download", waarbij veel data wordt gedownload maar niet bekeken.
  • Het aanpassen van de kwaliteit midden in een video is niet mogelijk, net nu dat zo belangrijk is voor mobiel.
  • Het live streaming van evenementen en kanalen is niet mogelijk, omdat dit geen te downloaden files zijn.
  • Beveiliging door middel van encryptie (meestal deel van het streaming protocol) bestaat niet in HTML5.

Hierdoor is HTML5 video geen optie voor media bedrijven. Zij hebben Flash (of Silverlight) nodig tot een HTML5 video streaming protocol is gestandaardiseerd.

Op iOS is er echter wél een streaming protocol, volledig door Apple bedacht en geïmplementeerd bovenop HTML5. Het heet HTTP Live Streaming (HLS) en wordt ondersteund door alle iPads en iPhones. Een HLS stream kan worden geladen in een video-tag, net als een MP4-of WebM video:

<video controls height="360" poster="/files/bunny.jpg" width="640"> 
<source src="/files/bunny.m3u8" type="application/vnd.apple.mpegurl" />
<source src="/files/bunny.mp4" type="video/mp4" />
<source src="/files/bunny.webm" type="video/webm" />
</video>

Door de populariteit van iOS (en de afwezigheid van alternatieven) is het HLS protocol flink gegroeid:

  • Alle pro video op de iPad gebruikt HLS (voor in-app video is HLS zelfs vereist).
  • Alle streaming servers (Adobe, Microsoft, Real, Wowza) ondersteunen tegenwoordig HLS.
  • Alle IPTV set-top boxes (XBox, PS3, Apple TV, Roku, Boxee) ondersteunen tegenwoordig ook HLS.
  • Zelfs Android doet HLS, vanaf versie 3.0 (Honeycomb).

Ondanks dit succes is HLS (nog) niet deel van een web-standaard. Bredere ondersteuning, bijvoorbeeld door Internet Explorer, zou nuttig zijn, maar is onzeker. Betekent dit dan dat HTML5 video vooral leuk is voor korte clipjes en iPads? Absoluut niet. Hoewel streaming nog niet is gefixt, is er een andere ontwikkeling die HTML5 een groot voordeel geeft ten opzichte van Flash.

Track en WebVTT

Naast <video> en <source> definieert de HTML5 video specificatie een derde nieuwe element: <track>. Met dit element is het mogelijk om verschillende soorten data te synchroniseren met de video:

  • Ondertiteling van dialogen in andere talen.
  • Ondertitels van de audio, zowel spraak als anders. Dit voor slechthorenden, of situaties zonder geluid.
  • Audio descripties van de visuele elementen. Bedoeld voor audio synthese voor slechtzienden, of situaties zonder beeld.
  • Hoofdstuk markeringen, voor het snel navigeren door langere videos.
  • Metadata, zelf in te vullen data voor gebruik in scripts.

De data van deze tracks wordt opgeslagen in het nieuwe WebVTT bestandsformaat, een eenvoudige tekst formaat vergelijkbaar met SRT. Hier is een fragment, met twee ondertitels:

1
00:13:45.250 -> 00:13:48.000
Hello world!

2
00:13:49.910 -> 00:13:56.500
Well, hello to you too!
- Thanks. Any coffee left?

Deze WebVTT bestanden worden ingeladen in de <track> elementen net als videos in <source> elementen:

<video controls height="360" poster="/files/bunny.jpg" width="640">
<source src="/files/bunny.mp4" type="video/mp4" />
<source src="/files/bunny.webm" type="video/webm" />
<track label="Closed Captions" kind="captions" src="/files/bunny-cc.vtt" />
<track label="Auf Deutsch" kind="subtitles" src="/files/bunny-de.vtt" />
</video>

Met tracks en WebVTT kan HTML5 video eenvoudig toegankelijk gemaakt worden, voor zowel buitenlandse sprekers als mensen met een beperking. In Flash was dit altijd erg lastig, doordat een standaard methode ontbrak. Daarnaast zullen andere toepassingen profiteren van de metadata in WebVTT bestanden. Denk aan video SEO en in-video search, het targeten van advertenties op bepaalde scènes, of de interactie tussen de webpagina en video tijdlijn.

Er is nog één probleempje: zowel <track> als WebVTT bestaan nog niet in browsers. De specificatie is wel zo goed als af en browser-implementaties komen eraan. Waarschijnlijk zullen alle browsers dit eind 2012 ondersteunen.

Wanneer HTML5?

Op de lange termijn vervangt HTML5 Flash voor het afspelen van video. Momenteel biedt Flash echter nog een betere gebruikservaring op de desktop. Dus op welk punt heeft het zin om HTML5 first te gaan? Dat hangt af van de manier waarop je video gebruikt:

  • Als video een core business is en je afhankelijk bent van streamen en beveiliging, wordt het wachten totdat er een streaming mechanisme komt. Dat kan nog jaren duren.
  • Als video gebruikt wordt voor marketing/educatie en bereik, gebruiksgemak en toegankelijkheid belangrijk zijn, wordt het wachten op een hogere dekking (90%) en de beschikbaarheid van <track>. Beiden zitten er aan te komen in 2012.
  • Als video geen core business is, maar webdesign wel, kun je vandaag al aan de slag met HTML5. Je moet wel je video's dubbel encoderen en je HTML regelmatig bijwerken voor nieuwe features en bugs. Je kunt echter ook meteen met CSS en JavaScript aan de slag om eigen video players te maken.

Voor mobiele apparaten is het sowieso nu het best om HTML5 te gebruiken (hetzij integraal, hetzij als fallback). Android en iOS ondersteunen beide HTML5, terwijl Flash op Android aan het verdwijnen is. Bovendien ondersteunen ze, in tegenstelling tot desktop browsers, beiden één formaat (MP4).

Reacties

1 Mallory op 02-12-2011 om 13:19 uur:
Hm, dus poster attributes kwamen wel binnen HTML5 zonder alt-achtige text fallback.

https://www.w3.org/Bugs/Public/show_bug.cgi?id=10642

: (

De stukje over streaming video was ook echt nieuw voor mij.

Leuke artikel, Fronteers blog kan meer van deze artikelen hebben! (ik kan deze artikelen sturen naar Nederlandse-talige mensen die ook meer over front-end issues willen weten!)
2 Sander Aarts op 03-12-2011 om 18:29 uur:
Goed artikel. Bedankt!
3 Larix Kortbeek op 05-12-2011 om 09:36 uur:
Goed stuk. Voor audio lopen wij tegen dezelfde beperkingen aan:
- Geen eenduidig bestandsformaat
- Geen (veilige) manier van streamen

Daarom is het nog naïef om te denken dat Flash is ingehaald door HTML5. (een idee dat zelfs onder frontenders soms leeft)

Voor het af-en-toe plaatsen van een video op een site of weblog is HTML5 prima. Voor het bouwen van een online media-player die duizenden luisteraars tegelijk moet doen, is de techniek te beperkt.
4 Denver op 05-12-2011 om 12:22 uur:
Bedankt Jeroen! Verhelderend artikel.
5 Jeroen Wijering op 06-12-2011 om 15:47 uur:
@Mallory: de poster hoeft inderdaad geen alt te hebben, omdat deze zelf al een alternatief is voor de video. De video zelf moet wél toegankelijk gemaakt worden, met zowel captions als descriptions.

@Larix: Helemaal mee eens. Op audio vlak heb je dezelfde problemen als video: meerdere codecs, geen streaming, geen encryptie. Misschien is het zelfs nog erger, aangezien AAC niet overal werkt (IE9) en naast Flash/RTMP ook Shoutcast nog steeds populair is.
6 Mark de Jong op 05-10-2012 om 11:05 uur:
Cool artikel Jeroen! Goed overzicht van pros en cons van HTML5. Jammer dat het alleen in Nederlands is, denk dat veel andere mensen het ook heel interessant hadden gevonden, wordt tijd dat Fronteers internationaal gaat ;)
7 Laurens Masereeuw op 16-10-2012 om 16:46 uur:
Duidelijk stuk.
Ook hebben nu html5 player. Ik heb alleen probleem dat ik de video;s niet op een ipad oif iphone kan afspelen in een beveligde https omgeving.

Heb je daar nog tips voor?

Groet Laurens
Plaats een reactie