Een van de meest interessante nieuwe onderdelen voor html5 wordt wel de video tag. Met dit element moet het in theorie mogelijk zijn om zonder gebruik te maken van plugins alle video te laten zien op je website.
Momenteel moet je allerlei uitgebreide code schrijven om een video te tonen met html. Er zijn allerlei verschillende video plugins op de markt die met name voor de ‘gewone’ gebruiker nauwelijks te begrijpen zijn.
Meerdere regels code
De meeste code voor een simpele video beslaat toch snel enkele regels. De tag video moet dit probleem gaan oplossen.
Attributen van video
Het element moet verschillende attributen krijgen die het hele gebeuren nog interessanter moeten maken. Hier komen de belangrijkste attributen.
autoplay – Zodra het mogelijk is zal de video automatisch starten met afspelen.
controls – Hiermee kun je controleknoppen toevoegen, zoals de play-button en de pauzeknop.
height – Met dit attribuut bepaal je de hoogte van de speler.
loop – Wanneer je de loop activeert zal de video zodra het einde bereikt is weer opnieuw beginnen met spelen
reload – De video laadt met het laden van de webpagina en zal klaar zijn om te spelen, wordt genegeerd als autoplay aanstaat.
src – Hiermee wordt de bron van de video aangeduid in een URL.
width – Hiermee bepaal je tenslotte de breedte van de speler.
Een voorbeeld
Even een voorbeeld van de code om te illustreren hoe dit in zijn werk gaat. Merk hierbij op dat je tussen de begintag en de eindtag tekst kunt plaatsen die door oudere browsers zal worden weergegeven.
<video src="http://medias.jilion.com/sublimevideo/dartmoor.mp4" controls="controls">Helaas ondersteunt deze browser geen video!</video>
Met hier het voorbeeld in werkelijkheid (als je tenminste een browser hebt die html5 ondersteunt – Google Chrome, Safari, Opera en Internet Explorer met een Chrome frame):
We zijn er nog niet!
Natuurlijk is alles niet zo simpel als het lijkt. Er is namelijk sprake van verschillende belangen. De ene browser ontwikkelaar wil een andere codec gebruiken dan de andere en zo is een eenduidige manier om video te implementeren wellicht toch nog ver weg.
De twee belangrijkste codecs zijn Ogg Theora (Firefox, Chrome en Opera) en H.264 (IE9, Chrome en Safari).
Het bericht html5 video-tag verscheen eerst op HTML-site.nl.