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.

<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>


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.
  • 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".

WMV en QuickTime

Wil je specifiek Windows Media video's of een QuickTime video plaatsen dan kan dit met de onderstaande code's maar dit wordt eigenlijk afgeraden om zo te doen.

WMV

Er zijn een aantal parameters beschikbaar. Als je wilt dat de video automatisch start verander dan False in de regel van autoStart naar True. De parameter eronder showControls zorgt voor het tonen van de knoppen zoals Play en Stop onder de video.

<object width=400 height=350
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsm p2inf.cab#Version=6,4,7,1112">
        <param name="filename" value="HET ADRES NAAR JE FILMPJE.wmv">
        <param name="autoStart" value="false">
        <param name="showControls" value="true">
        <param name="ShowStatusBar" value="false">
         <param name="ShowDisplay" value="false">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="HET ADRES NAAR JE FILMPJE.wmv" width="493" height="350" AutoStart="false" InvokeURLs="0"></embed>
</object>


QuickTime

Ook in dit geval zijn er een aantal parameters beschikbaar voor het afspelen van de video. De eerste is "autoplay". Hiermee bepaal je of de video automatisch gestart moet worden als een bezoeker de pagina opent. In de code staat dit op False, wijzig dit indien gewenst naar True. Eronder staat nog het volume, 100 is het maximum, hieronder ingesteld op 20.

<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABddC6B" width="200" height="260" type="video/quicktime" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
        <param name="src" value="HET ADRES NAAR JE FILMPJE.mov">
        <param name="autoplay" value="false">
        <param name="volume" value="20">
<embed src="HET ADRES NAAR JE FILMPJE.mov" width="200" height="260" type="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="false" VOLUME="20"></embed>
</object>