Skip to content

HTML: multimedia elementen

Buiten de <img> tag zijn er nog een aantal andere multimedia elementen.

<figure> & <figcaption>

Een groepering van afbeelding(en) en een beschrijving.

Voorbeeld:

html
<figure>
  <img src="media/elephant.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

Audio en video

<audio> wordt gebruikt voor audio.

Deze zelfsluitende tag heeft de volgende attributen:

  • src: zoals een afbeelding heeft een audio tag ook een bronbestand nodig
  • controls: wordt gebruikt zonder waarde, als deze aanwezig is worden de afspeelknoppen getoond

Bekijk alle attributen op Audio: The Embed Audio element

Voorbeeld:

html
<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="media/t-rex-roar.mp3"></audio>
  <a href="media/t-rex-roar.mp3"> Download audio </a>
</figure>

<video> en <source> wordt gebruikt voor video

Deze tweeledige tag heeft de volgende attributen:

  • src: zoals een afbeelding heeft een audio tag ook een bronbestand nodig
  • controls: wordt gebruikt zonder waarde, als deze aanwezig is worden de afspeelknoppen getoond

Daarbij kunnen binnenin de video meerdere <source> tags gebruikt worden. Met deze tag kan je meerdere bestandsformaten meegeven. De browser selecteert automatisch welk bestand hij afspeelt.

Bekijk alle documentatie op Video: The Video Embed element

Voorbeeld:

html
<video controls width="250">
  <source src="media/flower.webm" type="video/webm" />
  <source src="media/flower.mp4" type="video/mp4" />

  Download the
  <a href="media/flower.webm">WEBM</a>
  or
  <a href="media/flower.mp4">MP4</a>
  video.
</video>