banner

9.2: Video opnemen in je website

§ 9.2.1: Een lokale video in je website

Als "een plaatje al meer zegt dan 1000 woorden" dan kun je je voorstellen hoe krachtig een video op je website kan zijn.
Hieronder zie je een voorbeeld:

De code voor het weergeven van een video-element is als volgt:

<video width="breedte" height="hoogte" controls>
          <source src="media/html5_tutorial.mp4" type="video/mp4">
         De Browser ondersteunt deze video niet.
</video>

Let op de volgende zaken:

  • Alle moderne Browsers ondersteun dit <video> element
  • MP4 wordt door alle (moderne) Browsers ondersteund
  • Let op het juiste path (relatieve link) naar het videobestand
  • Als de website geopend wordt met een verouderde Browser dan ziet de bezoeker de mededeling
Er zijn 3 videoformaten toegestaan:
  1. MP4: <source src="path/bestand.mp3" type="video/mp4">
  2. WEBM: <source src="path/bestand.webm" type="video/webm">
  3. OGG: <source src="path/bestand.ogg" type="video/ogg">

§ 9.2.2: Een video embedden vanuit YouTube

Een gemakkelijke manier om een video in je website te laten zien is via YouTube. Volg hiervoor de volgende stappen:

  1. Ga naar YouTube
  2. Zoek de video die je in je website wilt embedden
  3. Onder de vide staat een Delen knop
  4. Je vindt hier de optie insluiten
  5. Je krijft dan code te zien van een iframe
  6. Kopieer de code en plak hem in jouw website

Hieronder zie je een voorbeeld van een embedded video vanuit youTube. Je kunt natuurlijk ook in de broncode van deze pagina kijken om te zien hoe de code eruit ziet.

NB: Als je later in hoofdstuk 10 van deze cursus de pagina met de embedded video van YouTube laat valideren dan zul je zien dat dit fouten oplevert. Je kunt opzoeken hoe je aanpassingen aan de iframe-code kunt soen zodat de code van de video alsnog valide is.

Opdracht 23: Video

  • Open één van je webpagina's en zorg dat hierin een YouTube-video van jouw keuze embed wordt.
  • Heb je een eigen video? Bijvoorbeeld op je telefoon? Weet je waar dat bestand staat? Kun je het downloaden naar je computer zodat je het kunt gebruiken op je website? Laat dan de video zien zoals in de eerste manier van deze pagina aangegeven is.