<video> object uitgelegd

Een paar jaar geleden was de enige mogelijkheid om video te tonen via Flash of hem ter download aan te bieden zodat de gebruikers het in hun eigen speler konden afspelen.
Flash was niet mijn ding. Het ontwikkelplatform was gigantisch groot en wanneer je een video had aangepast moest je het hele project weer opnieuw compileren. Herinner je die grote 'foutmeldingen' op websites nog "You need Flash to display this website"? Dat was pas een irritante webervaring!
Toendertijd was het het beste om je video ter download aan te bieden.

Toen kwam Vimeo (en later YouTube) waar je je videos kon uploaden en laten zien aan andere. Toen het embedden van deze filmpjes stabiel genoeg was was het een droom om mee te werken. Het was snel en je hoefde niet zelf de videos te hosten.
Het enige nadeel, je gaf alle rechten op voor je filmpjes en dat is waarschijnlijk niet wat je wilt.

Recentelijk (HTML5, om exact te zijn) kun je simpelweg HTML tags gebruiken om een video in je website inline weer te geven, zonder libraries of externe websites. Dit geeft je eindelijk de mogelijkheid om een video op je eigen server te hosten en op een makkelijke manier te tonen aan je gebruikers. Klinkt simpel, nietwaar? Nou, ja, zolang je weet wat je doet...

<video> element

Nadat ik het beloofde <video> element in een project heb gebruikt liep ik tegen een aantal "problemen" aan die het je wel moeilijk kunnen maken.

De specificaties voor dit <video> element lijken simpel, gewoonweg een <video> element en verschillende <source> elementen om de video in verschillende formaten aan te bieden:

<video>
  <source src="video.mp4">
  <source src="video.webm">
  <img src="video.jpg" alt="Look a this image of a cat since your browser doesn't support video">
</video>

Een duidelijk aanpak: specificeer meerdere bronnen voor je video. Op het moment dat je browser een versie "ziet" die hij ondersteund zal hij deze gebruiken. Wanneer een browser niets ondersteund, zal er een afbeelding worden getoond.
Je wil hier waarschijnlijk een download link invoegen zodat die bezoekers de video kunnen downloaden.

Video attributen

Het <video> element kan de volgende attributen hebben:

• poster: Word gebruikt als "laad" afbeelding, gebruik een frame van je video
• height: De gewenste hoogte voor de speler (kan leeggelaten worden voor automatische bepaling)
• width: De gewenste breedte voor de speler (kan leeggelaten worden voor automatische bepaling)
• controls: Of er video controls getoond worden (play, pause et cetera)
• preload: Of de video niet automatisch geladen moet worden ("none"), alleen de meta data opgehaald word ("metadata") of de hele video ("auto")
• autoplay: Of de video gelijk begint met afspelen
• loop: Of de video in een loop afspeelt

Alles goed en wel, maar de meeste artikelen over het <video> element ^{[die ik ben tegengekomen]} stoppen hier, zonder uit te leggen:

• Waarom werkt dit wel op server A, niet op server B?
• Wat is dat .mp4 en .webm formaat?
• Wat maakt het verschil in de volgorde van sources uit?
• Kunnen we meer browser ondersteunen?

Ik probeer deze vragen hier te beantwooorden. Blijf dus lekker lezen, of ga direct naar de code die ik schreef die mijns inziens het beste cross-browser werkt.

De webserver

Op het moment dat er een bestand word opgevraagd, stuurt de server niet alleen het bestand terug maar ook extra HTTP headers die o.a. het bestand specificeren. Op deze manier kan bestandsinformatie worden gegeven zonder het hele bestand te downloaden. Deze zelfde headers worden gebruikt om aan te geven dat een bestand inline word weergegeven of gedownload dient te worden (hoewel de browser anders kan besluiten).

Bij sommige webservers — voornamelijk de kleinere, low-budget hosters — staan deze headers niet goed geconfigureerd voor video-bestanden.
Controleer dus de headers en wanneer nodig geef de juiste MIME-type specificaties op in het .htaccess bestand (in de map waar je videos staan) of in het configuratiebestand van Apache.

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Dit zorgt ervoor dat de juiste headers voor je video bestanden worden meegegeven.

Video formaten

Tot mijn grote verbazing schrijven de meeste artikelen hele essays over het <video> element zonder het woord "codec" in de mond te nemen.

Ik moet toegeven, het is niet sexy en veel mensen weten het niet eens, maar codecs zijn een belangrijk onderdeel van videos. Het zijn voornamelijk de mensen die je de video aangeven die zich hier zorgen over moeten maken, maar je moet tenminste de basis beheersen.

Voor web video zijn er kortweg twee belangrijke dingen die je moet weten. Het ene zijn containers, het andere zijn codecs.

Een container (verwarrende genoeg ook wel "video format" genoemd) is gewoonweg een opslag voor één of meerdere geluid en/of beeld streams. De container word vaak in de het bestandsnaam weergegeven (.mp4, .webm, .ogv).

Een codec is een manier om geluid of beeld op te slaan in een digitaal formaat. Sommige codecs zijn gemaakt om een zo klein mogelijk bestand te krijgen, de andere voor de beste kwaliteit maar de meeste proberen een optimale balans tussen deze twee te vinden. Verschillende codecs hebben hun eigen voor- en nadelen. Sommigen zijn heel, heel erg ingewikkeld.

Voor nu is het belangrijk om te weten welke container, geluid codec en beeld codec je kunt gebruiken voor je website.
Meld dit aan degene die verantwoordelijk is voor de digitalisering van de video, of converteer je videos zelf naar de volgende regels:

• .mp4: video codec H.264, audio codec AAC
• .webm: video codec VP8, audio codec Vorbis
• .ogv: video codec Theora, audio codec Vorbis

In dit artikel is geen ruimte om deze codecs tot in detail uit te leggen, wanneer je het leuk vind moet je zeker via je favoriete zoekmachine op zoek gaan. Ga, en wees versteld bij het grote aanbod van codecs en specificaties..

Source attributen

Elk <source> element kan het type en codec specificeren voor de browser. Dit geeft de browser de mogelijkheid om een overwogen keuze te maken welke video hij gebruikt, alvorens deze gedownload worden. De juiste specificaties die je wilt gebruiken zijn als volgt:

  <source src="movie.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
  <source src="movie.webm" type="video/webm" codecs="vp8, vorbis">
  <source src="movie.ogv" type="video/ogg" codecs="theora, vorbis">

Er zitten echter twee addertjes onder het gras:

1. De .mp4 codecs specificatie is nogal venijnig, omdat je de exacte en juiste codec dient aan te geven
2. Wanneer je een codec specificeert zullen sommige apparaten (*kuch* iPad *kuch*) de video niet afspelen

De oplossing is simpel, specificeer niet de type and codec attributen voor de .mp4 source en het probleem is opgelost.

The volgorde van <source>

We weten dus al dat de volgorde van <source> bepalend is welke afgespeeld word. Het is verleidelijk om een ongemodificeerde, exotisch formaat als eerste op te geven. De browser zal immers naar de volgende gaan als deze niet ondersteund word, niet waar?
Nou, ze moeten terugvallen op de volgende. Echter bestaat er een apparaat (genaamd iPad) dat door een bug niet verder zal kijken en dus falen. De volgorde is dus niet van belang, zolang je geen iPad support wenst. Wil je wel support bieden voor iPad, geef altijd als eerste het .mp4 formaat. Zo zorg je ook voor blije gezichtjes op de iPad. Hou dat dus in de smiesen!

Meer browsers

De oplossing zo ver zorgt voor video op IE 9.0+, Firefox 4+, Chrome 3+ and Opera 10.5+ op de desktop. Ook zal dit werken op verschillende mobiele apparaten (Android 2.1+, Blackberry 4.6+, Firefox Mobile 4+, Chrome Mobile 18+, IE Mobile 9+ and Safari Mobile 3.2+).

Door een .ogv video toe te voegen kunnen we ook de kleine groep gebruikers tussen versie 3.5 en versie 4 bedienen. Dit is welliswaar een kleine groep, maar een extra formaat is zo gemaakt dus een kleine moeite om te doen.

Voor IE8 en andere browsers die (nog) geen ondersteuning bieden voor het <video> element wil je waarschijnlijk Flash gebruiken als fallback. Ik weet het, ik weet het, in de introductie gaf ik aan geen fan te zijn van Flash, maar wanneer je een videospeler gebruikt die niet met de video zelf gecompileerd dient te worden is het een kleine moeite.

In mijn project heb ik de Flash speler gebruikt van MediaElement.js welke zijn werk goed lijkt te doen. Door simpelweg een bestandsnaam in een parameter op te geven is het zeer gemakkelijk te intergreren. Zo kan een nog grotere groep genieten van je video inline.

The uiteindelijke code

De uiteindelijke code die ik in mijn project heb gebruikt is als volgt:

<video width="480" height="270" poster="/video/video.png" controls="controls" preload="none">
  <source src="/video/video.mp4" type="video/mp4" />
  <source src="/video/video.webm" type="video/webm" codecs="vp8, vorbis"  />
  <source type="video/ogg" src="/video/video.ogv" codecs="theora, vorbis" />
  <object width="480" height="270" type="application/x-shockwave-flash" data="/mediaelement/flashmediaelement.swf">
    <param name="movie" value="/mediaelement/flashmediaelement.swf" />
    <param name="flashvars" value="controls=true&file=/video/video.mp4" />
    <img src="/video/video.png" width="480" height="270" title="No video playback capabilities" />
  </object>
</video>

Nadat ik dit artikel had geschreven kwam ik een tutorial over video on webplatform.org (Engels) tegen, alsmede een beschrijving van het <video> element (Engels). Veel van mijn conclusies kunnen ook in deze artikelen gevonden worden (dus ik sla de plank niet volledig mis) dus die zijn wellicht ook nog interessant om te lezen.