Webtip: Video met HTML5

Webtip: Video met HTML5

De opvolger van het huidige HTML4 is in aantocht en biedt vele nieuwe functies. In de webtip van vandaag nemen we een kijkje wat er allemaal mogelijk is met HTML5 en wel het embedden van video's. Normaal embed je video's door middel van de '<object>' en/of '<embed>' tags, waarna je een videospeler (bijv. een flash-player) invoegt. In HTML5 gaat dit allemaal een stuk makkelijker. Daar wordt namelijk de '<video>' tag geïntroduceerd, waarmee je op een kinderlijk eenvoudige manier video's in je website kunt plaatsen. Let wel op dat deze webtip een browser vereist dat HTML5 ondersteunt. Dit zijn o.a. de Firefox 4 bèta, Google Chrome, Opera 10.6+, Apple Safari 4+, Internet Explorer 9 en Internet Explorer 6,7,8 met Google Chrome Frame.

Hoe werkt het?

Het werkt zeer eenvoudig. Je plaatst de tag, zoals je dat normaal gewend bent. Laten we maar direct eens naar een voorbeeldje kijken:

<video src="movie.wmv" controls="controls" preload="preload" autoplay="autoplay" width="640" height="480">
Je browser ondersteunt dit (nog) niet!
</video>

En zo simpel is het! We zullen nog even de verschillende opties doornemen:

  • src: Dit bevat de URL naar het filmpje
  • controls: Dit bepaald of de controls (zoals een play-knop etc.) wordt weergegeven
  • preload:  Dit bepaald of het filmpje direct geladen wordt bij het openen van de betreffende pagina. Werkt niet als 'autoplay' aanstaat.
  • autoplay: Het filmpje speelt direct af, zodra deze er klaar voor is.
  • width: Breedte van het filmpje
  • height: Hoogte van het filmpje

Demo

Een demo van deze webtip vind je hier.

Reacties