Audio/Video

HTML/CSS

HTML Audio element

Audio/Video

Met het audio element kunnen we de gebruiker audio (bv. mp3) laten afspelen.

 

 

<audio src="/media/cc0-audio/t-rex-roar.mp3"></audio>

Audio

Standaard is het audio element niet zichtbaar.
Voeg je controls toe, dan zal het wel zichtbaar zijn met een play knop, tijdsindicatie, ...
Hoe dit er visueel uit ziet zal verschillend zijn per browser/OS en is niet aanpasbaar.

<audio controls src="/media/cc0-audio/t-rex-roar.mp3"></audio>

Controls

Voeg je geen controls toe maar wil je het audio element wel afspeelbaar maken?
Dan kan je zelf een knop toevoegen en via JavaScript de audio starten

<audio id="audio" src="/media/cc0-audio/t-rex-roar.mp3"></audio>

Custom UI?

const $audio = document.getElementById("audio");
const $btn = document.getElementById("btn-play");

$btn.addEventListener("click", () => {
    $audio.play();
});

Naast controls zijn er nog enkele unieke attributen voor het audio element:

  • loop: zal de audio steeds opnieuw afspelen
  • muted: de audio zal gedempt afspelen

Attributen

Daarnaast zijn er enkele unieke events waarnaar je kan luisteren via JavaScript:

Events

HTML Video element

Audio/Video

Met het video element kunnen we de gebruiker video (bv. mp4) laten afspelen.

 

 

<video>
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>

Video

Standaard is het video element zichtbaar zonder controls (play knop, ...).
Voeg je controls toe, dan zullen deze wel zichtbaar zijn met een play knop, tijdsindicatie, ...
Hoe dit er visueel uit ziet zal verschillend zijn per browser/OS en is niet aanpasbaar.

<video controls>
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
</video>

Controls

Voeg je geen controls toe maar wil je het video element wel afspeelbaar maken?
Dan kan je zelf een knop toevoegen en via JavaScript de audio starten

Custom UI

const $video = document.getElementById("video");
const $btn = document.getElementById("btn-play");

$btn.addEventListener("click", () => {
    $video.play();
});

Naast controls zijn er nog enkele unieke attributen voor het video element:

  • loop: zal de video steeds opnieuw afspelen
  • muted: de video zal gedempt afspelen
  • poster: een image die getoond wordt zolang de video aan het laden is

Attributen

Daarnaast heeft een video element ook het autoplay attribuut.

Hiermee kan je zorgen dat de video automatisch afspeelt zonder dat de gebruiker een interactie uitvoert.

 

MAAR: om de gebruiker te beschermen, kan dit enkel indien de video ook muted is!
Je kan dus enkel video met audio (geluid) automatisch afspelen indien de gebruiker een actie uitvoert.

Autoplay

Daarnaast zijn er net zoals bij het audio element enkele unieke events waarnaar je kan luisteren via JavaScript:

Events

HTML Audio/Video

By Lecturer GDM

HTML Audio/Video

HTML Audio/Video

  • 261

More from Lecturer GDM