HTML5 video voor iedereen

Categorie: Coding and stuff
tags: 120

HTML5 is het buzzwoord, Flash is vies en de <video>-tag is de toekomst. Heel goed, Steve kreeg zijn zin. Nu de uitvoering nog. Die brengt vaak toch issues met zich mee. Zoals dat het ene platform/browser de ene codec ondersteund, het andere platform weer wat anders. Zoek maar eens op Google en je zult zien dat het een groot feest is.

Helaas ben ik er toch al meermaals tegenaan gelopen dat het allemaal net iets moeilijker gaat dan je zou verwachten. Dit wordt met name veroorzaakt door de aanwezigheid van mobiele devices en tablets. Reden dus om het eens verder uit te zoeken te te kijken waarom andere oplossingen zoals "Video for Everybody!" toch niet altijd werken.

Aan de slag

Aan de slag dan maar. Gelukkig is het meeste nu wel uitgedacht en geïmplementeerd (in HTML5). De video-tag in zijn simpelste vorm is als volgt:

<video src="hippevideo.mp4" controls />

Helaas, je bent er nog niet. Zo hebben met name mobieltjes nog wel eens moeite met bepalen hoe ze een MP4-bestand moeten afspelen, zelfs als de benodigde codes gewoon worden ondersteund. Dit is gelukkig eenvoudig op te lossen door zelf te benoemen welk type en vooral welke codes worden gebruikt:

<video src="hippevideo.mp4" type="video/mp4; codecs='avc1.42001E, mp4a.40.2'" controls />

Zijn we er dan? Nee. Een ander probleem is dat de verschillende browsers en devices verschillende formaten ondersteunen. Het formaat hierboven, MP4, maakt gebruik van gepatenteerde codecs. Om die reden wordt dit formaat niet ondersteund door Firefox en Opera. Ook Google geeft hier geen voorkeur aan.

Tot ongeveer een jaar geleden was het alternatief OGG. Deze codec werd wel door Chrome, Firefox en Opera ondersteund, maar over het algemeen is de mening dat de beeldkwaliteit bij dezelfde bestandsgrootte net wat minder is dan MP4. En nog wat diplomatieke redenen. Safari en Internet Explorer ondersteunen echter weer geen OGG.

Google heeft daar een oplossing voor gekocht en beschikbaar gesteld: WebM. Deze standaard doet niet onder voor MP4, maar er rusten geen patenten op. Helaas voor alle sitebouwers, Safari en Internet Explorer ondersteunen WebM (nog) niet. Net als verschillende mobiele devices.

Dus wat nu

Dus wat nu? Nu weten we dat er ten minste twee formaten nodig zijn: MP4 en WebM. Eventueel aangevuld met OGG. Hoe?

<video controls>
  <source src="hippevideo.mp4" type="video/mp4;  codecs='avc1.42001E, mp4a.40.2'"/>
  <source src="hippevideo.webm" type="video/webm; codecs='vp8.0, vorbis'"/>
  <source src="hippevideo.ogv" type="video/ogg;  codecs='theora, vorbis'"/>
</video>

Nu wordt het allemaal al een stuk completer. Ten eerste zijn er meerdere videoformaten beschikbaar. Praktisch hierbij is om als eerste MP4 aan te bieden. Met name de mobiele apparaten hebben hier profeit van. In sommige gevallen is dit zelfs noodzaak. In sommige gevallen kan het namelijk zijn dat de audio in het bestand wel wordt ondersteund en de video niet. In dat geval zal toch de video worden afgespeeld met slechts deels ondersteuning terwijl een ander format wellicht wel geheel wordt ondersteund.

Opleuken

Nu hebben we onze video's, we hebben ondersteuning voor meerdere platformen. Nu wil je natuurlijk nog dat er wat te zien is als er geen video is. Dat kan.

<video width="640" height="480" poster="hippevideosplashscreen.png" controls>
  <source src="hippevideo.mp4" type="video/mp4;  codecs='avc1.42001E, mp4a.40.2'"/>
  <source src="hippevideo.webm" type="video/webm; codecs='vp8.0, vorbis'"/>
  <source src="hippevideo.ogv" type="video/ogg;  codecs='theora, vorbis'"/>
</video>

Met de afbeelding hippevideosplashscreen.png wordt een plaatje getoond zolang de video niet wordt afgespeeld. En in dit geval is de video ook gelijk van een breedte en hoogte voorzien. Dit maakt het voor de browser een stuk makkelijker om te bepalen hoeveel ruimte er initieel moet worden gereserveerd voor de video.

Fallback voor oudere browsers

En wat als dit alles nou niet werkt? Dan moet je toch een fallback bieden. De meest voor de hand liggende methode is het gebruik van Flash. Er zijn meerdere tools beschikbaar die je kunnen helpen. Eentje waar ik al vaker gebruik van heb gemaakt is JWPlayer.

Alternatief is in de video-tag een tekst of iets anders aan te bieden. Bijvoorbeeld een download (lees: link) van het MP4-bestand.

<video width="640" height="480" poster="hippevideosplashscreen.png" controls>
  <source src="hippevideo.mp4" type="video/mp4;  codecs='avc1.42001E, mp4a.40.2'"/>
  <source src="hippevideo.webm" type="video/webm; codecs='vp8.0, vorbis'"/>
  <source src="hippevideo.ogv" type="video/ogg;  codecs='theora, vorbis'"/>
  <p>Sorry, je browser snapt het niet. <a href="hippevideo.mp4">Download de video</a>.<p/>
</video>

Als ander alternatief zou je gebruik kunnen maken van Flash. U weet wel, die 'standaard' die de nek is omgedraaid door Steve. Het mooie is weer, dat dit ook in de video-tag kan worden geplaatst. Als de browser niets kon met de overige elementen, dan komt het vanzelf ergens dat het wel iets mee kan: de Flash-variant. Met behulp van de player.swf van JWPlayer levert dit een oplossing voor de oudere IE (voor IE9) browsers.

<video width="640" height="480" poster="hippevideosplashscreen.png" controls>
  <source src="hippevideo.mp4" type="video/mp4;  codecs='avc1.42001E, mp4a.40.2'"/>
  <source src="hippevideo.webm" type="video/webm; codecs='vp8.0, vorbis'"/>
  <source src="hippevideo.ogv" type="video/ogg;  codecs='theora, vorbis'"/>
  <object width="640" height="360" type="application/x-shockwave-flash" data="player.swf">
    <param name="movie" value="player.swf" />
    <param name="flashvars" value="autostart=false&amp;controlbar=over&amp;image=hippevideosplashscreen.png&amp;file=hippevideo.mp4" />
    <img src="hippevideosplashscreen.png" width="640" height="360" alt="Hippe Video" title="No video playback capabilities, please download the video below" />
</video>
<p><a href="hippevideo.mp4">Download de video</a></p>

Getest op

De hierboven genoemde code is vanzelfsprekend ook door mijzelf getest. Om specifiek te zijn op:

  • Nokia N9
  • Nokia N8
  • Nokia Lumia 800
  • HTC Sensation
  • iPhone 4
  • Firefox 14.0a1 (nightly channel)
  • Firefox 11
  • Internet Explorer 9
  • Internet Explorer 8
  • Chrome
  • Chromium
  • Opera 11.51

Verder lezen

Laadtijd: