HTML - Video's plaatsen

Met HTML5 is het bijzonder eenvoudig om een video in te voegen op een website met behulp van de video tag. Vrijwel alle moderne browsers ondersteunen deze tag zoals Google Chrome, Firefox en Safari. Wat betreft Internet Explorer is er ondersteuning vanaf Internet Explorer 9, de oudere versies van Internet Explorer ondersteunen de tag niet.

Gezien het marktaandeel van zowel Internet Explorer 7 als Internet Explorer 8 is het niet noodzakelijk om specifiek voor deze twee oude browsers een fallback in te bouwen. Hieronder zie je een voorbeeld van een korte video die is geplaatst met de video tag.

Video plaatsen

Een video plaatsen kan met de onderstaande code. Je ziet dat er twee verschillende formaten worden gebruikt, .webm en .mp4. Op dit moment is het zo dat Google Chrome, Firefox, Safari en Internet Explorer .mp4 ondersteunen maar Opera doet dit niet. Voor browser Opera kan zodoende .webm gebruikt worden, .ogg gebruiken kan overigens ook. Wat betreft .webm is er verder ondersteuning van alleen Google Chrome en Firefox.

In de onderstaande code zie je de twee videobestanden die worden aangeroepen. In de openingstag staat de breedte en de hoogte en de toevoeging 'controls'. Dit zorgt ervoor dat er knoppen worden getoond. Standaard zal de video worden afgespeeld in de speler van de browser. De tekst over ondersteuning die onderaan staat zal worden getoond in de browser als deze de video niet kan afspelen, bijvoorbeeld dus in Internet Explorer 7 en 8.


Algemeen
<video width="575" height="300" controls="controls">
        <source src="video/video.webm" type="video/webm" />
        <source src="video/video.mp4" type="video/mp4" />
        Je browser heeft geen ondersteuning voor video.
</video>
Video hierboven
<video width="600" controls="controls" poster="ichwarsnicht.jpg">
<source src="ichwarsnicht.mp4">
Je browser heeft geen ondersteuning voor video.
</video>

Aanvullende mogelijkheden

Er zijn nog een aantal aanvullende mogelijkheden betreffende het afspelen van video's. Hieronder een klein overzicht.

  • Automatisch afspelen
    Door autoplay="autoplay" toe te voegen aan de openingstag zal de video na het openen van de pagina automatisch worden afgespeeld. Handig indien de controls worden uitgeschakeld.
  • Herhalen
    Met de toevoeging loop="loop" aan de openingstag zal de video worden telkens opnieuw worden afgespeeld nadat deze is afgelopen.
  • Control
    De menu-balk kan toevoegd worden met controls="controls"
  • Geluid
    Standaard het geluid van de video uitschakelen kan met muted="muted".
  • Afbeelding
    Om een afbeelding in te stellen die zal worden getoond voor het afspelen van de video plaats je de volgende toevoeging: poster="/pad/afbeelding.jpg".