De komende jaren zal HTML5 een steeds belangrijkere rol op het web gaan innemen. Een aantal nieuwe mogelijkheden spelen zich hierbij 'onder water' af en zullen dus niet direct zichtbaar zijn voor de bezoeker. Andere onderdelen zijn wel direct zichtbaar en dan hebben we het vooral over multimedia, waar we nu doorgaans nog plugins voor gebruiken. Laten we daarom eens gaan kijken naar het nieuwe Video element.

De komende jaren zal HTML5 een steeds belangrijkere rol op het web gaan innemen. Een aantal nieuwe mogelijkheden spelen zich hierbij 'onder water' af en zullen dus niet direct zichtbaar zijn voor de bezoeker. Andere onderdelen zijn wel direct zichtbaar en dan hebben we het vooral over multimedia, waar we nu doorgaans nog plugins voor gebruiken. Laten we daarom eens gaan kijken naar het nieuwe Video element.
Ondersteuning
Waarom is het zo interessant om video zonder plugins af te kunnen spelen? Ten eerste kun je er niet zeker van zijn dat gebruikers een bepaalde plugin geinstalleerd hebben. Daarnaast kan het zijn dat de gebruiker ook geen rechten heeft om de plugin te installeren. En op sommige platformen zijn de plugins misschien niet eens beschikbaar. Zo heeft Apple besloten om geen Flash plugin toe te laten op iPhones en iPads. Aangezien dit een steeds groter wordende doelgroep is, wil je ze toch graag voorzien van je video.
Oke, oke. Ook nog niet alle gebruikers zullen op dit moment internet browsers gebruiken die HTML5 ondersteunen, maar dat is een kwestie van tijd. Maar tot het zover is, zullen we multimedia op meerdere manieren moeten aanbieden. Bijvoorbeeld HTML5 video én Sliverlight én Flash video.
Codecs en bestandsformaten
Video’s kunnen op verschillende manieren worden opgeslagen. Zo hebben we het bestandsformaat, bijvoorbeeld  Ogg of MP4. Dit zijn over het algemeen “containers”, ofwel: het beschrijft wat er in het bestand zit, maar niet hoe de video-inhoud gecodeerd is. We hebben het dan over een CODEC (het COderen en DECoderen). Een MP4 bestand kan bijvoorbeeld video’s bevatten die met een DivX, Quicktime of H.264 codec zijn gecodeerd.
Standaard.. of toch niet
En nu beginnen de problemen. In de HTML specificatie staat wel precies beschreven hoe het <video> element gebruikt moet worden en hoe het aan te sturen moet zijn, maar helaas niets over de Codec of het bestandsformaat. En hier gaat het mis. De bekendste browsers kunnen het niet eens worden over welke formaten en codecs nu gebruikt zouden moeten worden. Hierdoor is een situatie ontstaan waarin er geen enkel formaat is, dat door alle browsers ondersteund wordt. Zie onderstaande tabel:
HTML5
! = ondersteuning zal verdwijnen
* = alleen na installatie
De enige oplossing is dus om je video’s op meerdere manieren aanbieden. Gelukkig is dat niet zo heel moeilijk. Hieronder een voorbeeld:
<video width="400px" height="300px">
<source src="vid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
<source src="vid.ogg" type='video/ogg; codecs="theora, vorbis"'>
Fall-back content voor browsers die geen video-element ondersteunen..
</video>
Ik heb 2 verschillende video’s in de aanbieding. De eerste is een video in MP4 formaat en als tweede een Ogg. Tevens zijn de Codecs voor de video en audio gespecificeerd. De browser zal bekijken of hij het eerst bestand kan afspelen, zoniet dan probeert hij de volgende optie.
Browsers die het <video> element niet ondersteunen (zoals Internet Explorer 8 en eerder) krijgen de te zien wat er onder de <source> elementen staat. In dit geval dus “fall-back content voor browsers die geen video-element ondersteunen”. Je begrijpt dat je hier een betere inhoud aan kunt geven. Bijvoorbeeld download links naar de video bestanden, een Flash-video of een YouTube film die je daar embed.
Attributen
Het video element kent ook een aantal attributen. Hier onder zie je een lijst met de betekenis ervan.
<video
src= url naar het audio of video bestand
width= breedte van de video
height= hoogte van de video
poster= url naar thumbnail afbeelding. Deze zie je tijdens het laden van de video.
preload= (none/metadata/auto) direct starten met het downloaden van de video.
autoplay direct beginnen met afspelen
loop blijven herhalen vanaf het begin
controls toon start/stop/pause knoppen, een tijdlijn en volume regelaar.
>
...
</video>
Stylesheets en Javascript
Het <video> element kan net als andere HTML elementen door middel van Javascript en Stylesheets gemanipuleerd worden. Mocht je browser HTML5 video ondersteunen, dan kun je door op onderstaande afbeelding te klikken het voorbeeld bekijken (de video opent nieuw venster).
HTML5
Mime-types
Een probleem waar je tegenaan kunt lopen is dat de video niet getoond wordt, ondanks dat je browser het wel ondersteund. Vaak ligt het dan aan de instellingen van de webserver. De webserver krijgt namelijk een verzoek om een video bestand op te halen, maar hij moet het dan wel herkennen als een bestandsformaat dat hij kan en mag afleveren. De meeste webservers zullen standaard nog niet bekend zijn met formaten als webm, ogg, mp4, enz. Deze dien je dus toe te voegen!
HTML5
In IIS7 ga je naar "MIME Types" en vul je de volgende gegevens in.
File name extension MIME type
.webm “video/webm”
.ogg “application/ogg”
.ogv “video/ogg”
.mp4 “video/mp4″
.m4v “video/m4v”
IIS Express
Mocht je gebruik maken van ASP.Net, dan is het ook mogelijk om het in je Web.config aan te geven. Echter werkt dit dan alleen met IIS of IIS express en niet met je standaard "ASP.NET Development server" a.k.a. "Cassini". Meer info over IIS express vind je hier: http://www.master-it.nl/blog00177/IIS_Express_goed_nieuws_voor_developers.htm
In de web.config kun je de volgende gegevens plaatsen:
<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".ogg" mimeType="application/ogg"/>
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
    </staticContent>
  </system.webServer>
Conclusie
Het is dus mogelijk om zonder plugins videobestanden in je HTML pagina te plaatsen. Deze zijn ook nog eens te manipuleren via Javascript. Het is alleen even puzzelen rondom de bestandsformaten en Codecs en je zult nog een alternatief moeten aanbieden voor bezoekers met oudere browsers. Wil je meer weten over Video & HTML5, lees dan vooral ook mijn blog Showcase: bouw een Video editor in HTML5.