Aan de slag met HTML5: Video basics

Christian Peeters
·
24/05/2011

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

File name extensionMIME 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: 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.

Bij Master IT leer je alleen wat je echt nodig hebt.
Certificeringen Trainingen
Beste lesmethode
Kleine klassen
Flexibel inplannen
Leer wat jij nodig hebt
Gerelateerde trainingen