html5 video-tag
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="https://www.quirksmode.org/html5/videos/big_buck_bunny.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).
Dat is nog eens een handige functie! Ga je dat nu ook gebruiken voor sitecheck i.p.v. YouTube?
Youtube blijf ik gebruiken. Bij Youtube kun je namelijk al instellen dat je html5 video gebruikt. Bij Vimeo kan dat ook trouwens.
Ja en je website dataverkeer word zo een stuk minder…
[quote]
Ja en je website dataverkeer word zo een stuk minder…
[/quote]
NOT…
Jawel, als hij op youtube zijn filmpjes post host hij ze zelf niet. Als elke user hetzelfde filmpje van de html-site server download kost dat dataverkeer, via youtube niet 🙂
Ja precies dat lijkt mij ook ja…
uuuh…
nee.
Want of je nou een html5 of flash youtube filmpje pakt. Blijft op de youtube server hoor.
=====
html5 video tag staat zo in zijn kinderschoenen, dat het nu gewoon TOTAAL ONBRUIKBAAR is.
1) Niet alle browsers ondersteunen het.
2) Je moet 2 verschillende soorten video’s uploaden, want anders kunnen verschillende html5 browsers het niet afspelen.
3) Je hebt alleen progressive download en geen stream mogelijkheden
4) Er is geen goede fullscreen functionaliteit
5) Er is geen geen kopieerbeveiliging ingebouwd. (DRM bijv)
6) En weet het niet zeker, maar als je een seperate audiotrack erbij wilt, moet je ook 2 soorten audio files uploaden, omdat verschillende browsers, verschillende formaten ondersteunen.
Dave bedoeld volgensmij het verschil tussen de filmpjes hosten op YouTube of op de eigen server. Bestandsformaat maakt dus niet uit. Op eigen server zal je extra dataverkeer krijgen, op de YouTube server niet.
Dus firefox ondersteund HTML 5 (nog) niet?
Dat is jammer, aangezien dit (volgens mij) de meest gebruikte browser is