Mijn-eigen-website.nl

Websitebouw voor doe-het-zelvers (zonder WordPress)

Zo zet je een video op je website:

Met deze html5-code zet je (zonder YouTube of plugins) een video op je website.

Er zijn meerdere manieren waarop je een video op je website plaatsen kunt. Je kunt bijvoorbeeld je video uploaden naar You­Tube, en deze vervolgens op je eigen website laten zien door de insluitcode te gebruiken die je op YouTube onder je video ziet staan (onder Delen – Insluiten).

Maar je kunt je video ook uploaden naar de server van je eigen webhosting provider, en hem vanaf die plaats laten afspelen. Hoe je dat doet, leg ik op deze pagina uit.

Om dit filmpje weer te kunnen geven, heb ik niets anders hoeven te doen dan de volgende code in de pagina te zetten:

<video width="320" height="240" controls poster="images/video-abstract.png">
<source src="video/abstract.mp4" type="video/mp4">
Installeer een nieuwere versie van je browser als je deze video wilt bekijken.
</video>

Zoals je ziet, is de video in mp4-formaat (H.264). Dat is het formaat dat het beste wordt ondersteund. De enige browsers waarin dit videoformaat niet werkt, zijn Opera Mini en oudere versies van Internet Explorer (8 en eerder).

Uitleg van deze html-codering:

  • De openings- en sluit-tags voor een video zijn <video> en </video>

  • Aan de openings-tag kun je nog wat extra instructies toevoegen. De drie meestgebruikte zijn:

    • width en height: met de waarden achter deze eigenschappen bepaal je hoe groot de video moet worden weergegeven op je website. Dit hoeft niet heel groot te zijn; bezoekers kunnen altijd op de button voor full screen klikken om de video groter te laten weergeven (tenminste – als je ook controls opneemt).

      Bij de video die ik in het voorbeeld laat weergeven, is de verhouding tussen breedte en hoogte 4:3. In plaats van 320x240 zou ik dus ook kunnen kiezen voor 640x480, 800x600 of 1024x768 bijvoorbeeld.

      Wil je een breedbeeld-video laten zien, dan is de verhouding tussen breedte en hoogte 16:9. Dit ‘vertaalt’ zich o.a. naar formaten als 640x360, 800x450, 960x540, 1024x576, 1280x720 en 1920x1080.

    • controls: door dit aan de openings-tag toe te voegen, zorg je ervoor dat er bedieningsknoppen zichtbaar zijn, waarmee je bezoekers de video kunnen starten, stopzetten, groter kunnen laten weergeven, en het afspeelvolume kunnen bijstellen. Hoe die controls eruitzien, hangt van de browser af waarmee je video wordt bekeken.

    • poster: hiermee kies je een afbeelding die je bezoekers te zien krijgen als de video nog niet geladen is, of als ze nog niet op de afspeelknop hebben geklikt. Standaard zie je namelijk altijd het eerste beeld van de video, maar als je iets anders wilt, dan doe je dat zo:
      poster="images/video-abstract.png".

  • Behalve de drie hierboven genoemde eigenschappen voor de weergave van de video op je website, zijn er nog een paar, die je ook in de openings-tag neerzetten kunt:

    • autoplay: de video begint automatisch af te spelen, zodra de browser hem geladen heeft.

    • loop: als de video het einde heeft bereikt, begint hij vanzelf weer opnieuw.

    • muted: het geluidsniveau staat daarmee op 0 (je bezoekers moeten het geluidsniveau zelf verhogen als ze geluid bij je video willen horen).

    • preload: hiermee geef je aan wat de browser van een bezoeker moet doen als de webpagina met de video erop wordt geladen: moet de browser de video alvast inladen (auto), moet de browser de video niet inladen (none) of moet de browser alleen bepaalde gegevens over de video (metadata) laden (metadata)? Standaard staat de waarde op auto, en als dat precies is wat je wilt, dan hoef je de preload-eigenschap dus niet op te nemen.

  • Binnen de video-tag staat de source-tag. Deze heeft maar één tag – er is dus geen bijbehorende sluit-tag. Binnen die tag geef je tussen de set dubbele aanhalingstekens van src=""aan waar de video die je op je website wilt laten zien, precies te vinden is en wat de naam is van het videobestand. Dus in het geval van dit voorbeeld: de video staat in een map die ‘video’ heet, en het is een mp4-bestand: ‘abstract.mp4’.

  • En ten slotte kun je nog een regel toevoegen die je bezoekers te zien krijgen als hun browser de video niet kunnen afspelen. Dat is bijvoorbeeld het geval met Internet Explorer 8 (en eerdere versies). In dat geval geef je je bezoeker bijvoorbeeld aan waarom de video niet te zien is (een verouderde browser-versie) en geef je hem het advies een nieuwere versie te installeren als hij de video op je website wil bekijken.

NB:
de bovenstaande code is html5, dus om deze code te kunnen gebruiken, moet je pagina wel in html5 zijn geschreven. Als je niet weet of dat het geval is, kijk dan even helemaal bovenaan je pagina. Staat daar <!DOCTYPE html>, dan zit je goed.

Staat daar een veel langere regel (die begint met: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"), dan is je pagina nog in html4 geschreven en moet je een flash player gebruiken om je video op je website te laten weergeven (bijvoorbeeld de gratis flash-videospeler van Flowplayer.)

(De loop van het voorbeeldfilmpje is afkomstig van Neo’s Clip Archive en de muziek van ccMixter.org.)