HTMLhulp.nl logo
Hoe je een HTML5-video player implementeert met aangepaste controls

Hoe je een HTML5-video player implementeert met aangepaste controls

Hoe je een HTML5-video player implementeert met aangepaste controls

Video is tegenwoordig een van de krachtigste manieren om informatie en entertainment te delen op websites. Met de introductie van HTML5 is het mogelijk geworden om video’s direct in de browser af te spelen zonder dat er plugins zoals Flash nodig zijn. Het <video>-element maakt dit eenvoudig, maar de standaardcontrols die browsers tonen zijn beperkt en verschillen per browser. Daarom kiezen veel ontwikkelaars ervoor om een video player te maken met aangepaste controls. Dit biedt meer controle over de gebruikerservaring, consistentie in ontwerp en extra functionaliteiten zoals volume sliders, tijdsaanduiding of fullscreenknoppen. In dit artikel leer je hoe je een HTML5-video player bouwt met eigen controls, stap voor stap.

Het basis <video>-element

De eenvoudigste manier om een video op een webpagina te plaatsen is met het <video>-element.

<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Je browser ondersteunt geen video-element.
</video>

Met het attribuut controls voegt de browser automatisch een afspeelbalk toe. Dit is snel en handig, maar beperkt. De stijl verschilt tussen Chrome, Firefox en Safari, waardoor de ervaring inconsistent is.

Waarom aangepaste controls bouwen?

  • Consistente stijl: je bepaalt zelf hoe de player eruitziet.

  • Extra functies: denk aan snelheid instellen, skip-knoppen, of ondertiteling togglen.

  • Toegankelijkheid: je kunt eigen labels en ARIA-attributen toevoegen.

  • Integratie met design: de player past beter bij de huisstijl van je website.

HTML-structuur voor een custom player

Je begint met het <video>-element zonder standaardcontrols en voegt zelf knoppen toe met HTML.

<div class="video-player">
<video id="mijnVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Je browser ondersteunt geen video-element.
</video>
<div class="controls">
<button id="playPause">Play</button>
<input type="range" id="progress" value="0" step="1">
<button id="mute">Mute</button>
<input type="range" id="volume" min="0" max="1" step="0.1" value="1">
<button id="fullscreen">Fullscreen</button>
</div>
</div>

Hiermee heb je de basis: een video en een set knoppen die je zelf kunt stylen en bedienen met JavaScript.

CSS-styling voor de player

Je kunt de video en controls een professionele uitstraling geven met CSS.

.video-player {
max-width: 640px;
position: relative;
background: #000;
}
video {
width: 100%;
display: block;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.controls button,
.controls input[type="range"] {
margin: 0 5px;
}
.controls button {
background: #00bf63;
border: none;
color: #fff;
padding: 5px 10px;
cursor: pointer;
}
.controls button:hover {
background: #009f4c;
}

Nu ziet de player er strak en consistent uit, ongeacht de browser.

JavaScript om de controls werkend te maken

De knoppen moeten natuurlijk ook iets doen. Met JavaScript koppel je de acties aan de video.

const video = document.getElementById("mijnVideo");
const playPauseBtn = document.getElementById("playPause");
const muteBtn = document.getElementById("mute");
const progress = document.getElementById("progress");
const volumeSlider = document.getElementById("volume");
const fullscreenBtn = document.getElementById("fullscreen");

// Play en pause
playPauseBtn.addEventListener("click", () => {
if (video.paused) {
video.play();
playPauseBtn.textContent = "Pause";
} else {
video.pause();
playPauseBtn.textContent = "Play";
}
});

// Mute toggle
muteBtn.addEventListener("click", () => {
video.muted = !video.muted;
muteBtn.textContent = video.muted ? "Unmute" : "Mute";
});

// Volume slider
volumeSlider.addEventListener("input", () => {
video.volume = volumeSlider.value;
});

// Voortgang bijwerken
video.addEventListener("timeupdate", () => {
progress.value = (video.currentTime / video.duration) * 100;
});

// Voortgang aanpassen
progress.addEventListener("input", () => {
video.currentTime = (progress.value / 100) * video.duration;
});

// Fullscreen
fullscreenBtn.addEventListener("click", () => {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
});

Met dit script heb je de basisfunctionaliteiten: afspelen, pauzeren, volume instellen, mute/unmute, vooruit- en terugspoelen en fullscreen.

Extra functies toevoegen

Met wat extra code kun je je video player nog krachtiger maken.

  1. Afspelen op dubbele snelheid

video.playbackRate = 2.0;

  1. Ondertiteling toggle
    HTML5 ondersteunt <track> voor ondertiteling.

<track src="ondertitels.vtt" kind="subtitles" srclang="nl" label="Nederlands">

Met JavaScript kun je sporen aan- of uitzetten.

  1. Keyboard-navigatie
    Voeg toetsenbordshortcuts toe zoals spatiebalk voor pauze en pijltoetsen voor vooruit/achteruit.

document.addEventListener("keydown", (e) => {
if (e.code === "Space") {
e.preventDefault();
playPauseBtn.click();
}
if (e.code === "ArrowRight") {
video.currentTime += 5;
}
if (e.code === "ArrowLeft") {
video.currentTime -= 5;
}
});

  1. Buffering en laadstatus tonen
    Met het event progress kun je laten zien hoeveel van de video al gebufferd is.

Toegankelijkheid verbeteren

  • Gebruik duidelijke labels en aria-label voor knoppen.

  • Zorg dat alle controls focusbaar zijn met Tab.

  • Voeg beschrijvingen toe bij ondertitels of audiotracks.

Voorbeeld:

<button id="playPause" aria-label="Video afspelen of pauzeren">Play</button>

Veelgemaakte fouten bij custom video players

  1. Alleen muisinteractie bouwen en geen toetsenbordondersteuning.

  2. Geen fallback voor browsers die geen <video> ondersteunen.

  3. Ondertiteling vergeten, waardoor video’s ontoegankelijk zijn voor doven en slechthorenden.

  4. Controls verbergen zonder alternatief, waardoor gebruikers vastlopen.

  5. Overmatig gebruik van JavaScript waardoor de player traag wordt.

Best practices voor een goede video player

  • Begin met een simpel <video>-element en breid daarna uit.

  • Gebruik consistente stijlen die passen bij je website.

  • Zorg voor toetsenbord- en schermlezerondersteuning.

  • Voeg ondertiteling toe voor toegankelijkheid.

  • Optimaliseer video’s voor web (compressie, juiste formaten).

  • Test in meerdere browsers en apparaten.

Een eigen HTML5-video player met aangepaste controls biedt een consistente ervaring, meer functionaliteit en betere toegankelijkheid. Je hebt volledige controle over hoe je video’s worden gepresenteerd en hoe gebruikers ermee interageren.