Hoe je de juiste videocodec kiest voor afspelen op het web

De codec-keuze is een productbeslissing, niet alleen een compressiebeslissing

Videocodecs zijn makkelijk verkeerd te bespreken. Iemand vergelijkt AV1, H.264, VP9 en HEVC in een grafiek, wijst naar het kleinste bestand en roept de winnaar uit. Zo werkt webvideo in productie niet.

Een codec-keuze beïnvloedt opstarttijd, buffering, batterijduur, CDN-kosten, apparaatcompatibiliteit, encoderingsinfrastructuur, juridische blootstelling en supporttickets. De “beste” codec voor een streamingdienst met een grote encodingfarm is niet per se de beste codec voor een marketingsite met vijf productvideo’s.

De nuttige vraag is niet “welke codec is het beste?” Maar: welke codec geeft dit publiek goede weergave met het minste operationele risico?

De korte versie: wat je in 2026 gebruikt

Voor de meeste webteams ziet het praktische antwoord er zo uit:

• Gebruik H.264 als je basis. Het is oud, efficiënt genoeg, breed hardwarematig gedecodeerd en nog steeds de veiligste compatibiliteitslaag.
• Voeg AV1 toe wanneer videovolume of bandbreedtekosten dat rechtvaardigen. AV1 kan uitstekende compressie leveren, vooral bij lagere bitrates, maar encoderen is trager en oudere apparaten kunnen moeten terugvallen.
• Gebruik VP9 vooral wanneer je publiek en pipeline er al op zijn ingericht. Het blijft nuttig, met name in WebM-workflows en sommige Android-/desktopomgevingen, maar AV1 is de meer toekomstgerichte open codec.
• Gebruik HEVC voorzichtig op het web. Het kan aantrekkelijk zijn voor een publiek dat sterk op Apple leunt, maar browser-/platformondersteuning en licentiecomplexiteit maken het een slechte universele standaard.

Dat klinkt misschien conservatief. Dat is het ook. Videofouten zijn niet subtiel. Als afspelen stukloopt, bewonderen gebruikers je compressieverhouding niet.

Ken de vier belangrijkste webcodecs

H.264: de saaie standaard die nog steeds telt

H.264, ook bekend als AVC, blijft de veiligste videobasis van het web. Het speelt bijna overal af: desktopbrowsers, mobiele browsers, smart-tv’s, oudere apparaten, social embeds en webviews in native apps.

De sterke punten zijn eenvoudig:

• Zeer brede ondersteuning
• Volwassen encodingtools
• Betrouwbare hardwaredecodering
• Goed batterijgedrag op mobiel
• Voorspelbare streamingondersteuning

De zwakke punten zijn ook duidelijk. Het is niet zo compressie-efficiënt als AV1 of HEVC. Bij hetzelfde kwaliteitsniveau heeft H.264 meestal meer bits nodig. Als je grote hoeveelheden video serveert, wordt dat verschil echte CDN-kosten.

Toch is H.264 voor korte clips, productvideo’s, documentatievideo’s en sites met laag tot gemiddeld verkeer meestal de juiste eerste encode.

AV1: de efficiënte codec met echte afwegingen

AV1 is de sterkste open codec-keuze voor moderne weblevering. Het levert vaak betere kwaliteit dan H.264 en VP9 bij dezelfde bitrate, vooral voor gebruikers met minder bandbreedte. Dat maakt het aantrekkelijk voor streamingplatformen, mediagerichte uitgevers, onderwijssites en elk team dat serieus let op overdrachtskosten.

Maar AV1 is niet gratis. Encoderen is rekenintensief, al zijn moderne encoders en hardwareversnelling sterk verbeterd. Ook afspeelondersteuning hangt af van het apparaat. Nieuwere desktops, Android-apparaten en tv’s kunnen het steeds vaker goed aan; oudere telefoons en laptops hebben mogelijk geen efficiënte hardwaredecodering.

De praktische regel: AV1 is uitstekend als extra rendition, niet als je enige rendition. Combineer het met een H.264-fallback, tenzij je de afspeelomgeving strikt beheerst.

Deze beslissing lijkt op keuzes voor stilstaande beeldformaten: betere compressie is alleen nuttig wanneer ondersteuning, encodingtijd en kwaliteit in de echte wereld overeind blijven. Dezelfde afweging geldt bij beslissingen over beeldformaten zoals AVIF versus WebP.

VP9: nog steeds nuttig, minder spannend

VP9 was het belangrijkste open alternatief voordat AV1 volwassen werd. Het kan veel efficiënter zijn dan H.264 en heeft solide ondersteuning in veel Chromium-gebaseerde browsers, Firefox, Android-omgevingen en sommige tv-platformen.

VP9 is nog steeds logisch als:

• Je al een VP9-encodingpipeline hebt
• Je publiek vooral Chrome, Firefox, Android of smart-tv gebruikt
• Je WebM-levering nodig hebt
• AV1-encodingkosten nog niet acceptabel zijn

Voor een nieuwe pipeline in 2026 is VP9 echter moeilijker te rechtvaardigen als de geavanceerde codec voor de lange termijn. Als je verder gaat dan H.264, is AV1 meestal de betere strategische keuze.

HEVC: technisch sterk, operationeel lastig

HEVC, ook bekend als H.265, is efficiënt en wordt in sommige ecosystemen breed gebruikt. Het is vooral relevant op Apple-apparaten, waar hardwareondersteuning gebruikelijk is.

Het probleem is niet de kwaliteit. Het probleem is praktische toepasbaarheid op het web. Browserondersteuning is historisch gefragmenteerd geweest, licenties zijn ingewikkelder dan bij open codecs en gedrag over platformen heen kan ongelijk zijn. HEVC kan een slimme toevoeging zijn voor een publiek dat sterk op Apple leunt of voor workflows dicht bij native apps, maar het is zelden de schoonste universele webstandaard.

Als je analytics een sterk Safari-/iOS-/macOS-publiek laten zien, kan HEVC het testen waard zijn. Als je één geavanceerde codec nodig hebt voor het brede web, geef dan de voorkeur aan AV1.

Begin bij je publiek, niet bij de codectabel

Beantwoord vóór je formaten kiest drie vragen op basis van je eigen analytics:

1. Welke browsers en apparaten bekijken je video daadwerkelijk? Desktop Chrome is niet hetzelfde als low-end Android, Safari op iPhone, in-app browsers of smart-tv’s.
2. Hoe lang zijn de video’s? Een hero-loop van 12 seconden en een les van 90 minuten hebben heel andere economische verhoudingen.
3. Hoeveel video consumeren gebruikers echt? Pageviews zijn geen kijktijd. Bandbreedtebesparing is het belangrijkst wanneer mensen genoeg seconden kijken om de codec ertoe te laten doen.

Als je videoverkeer licht is, kan een goed gecomprimeerde H.264 MP4 genoeg zijn. Als video centraal staat in het product, gebruik dan meerdere renditions en moderne codecs.

Stem de codec-keuze af op het leveringsmodel

Eenvoudig ingesloten video

Voor een kleine site met een paar video’s begin je met:

• H.264-video
• AAC-audio
• MP4-container
• Redelijke resolutie en bitrate
• Posterafbeelding
• Lazy loading waar passend

Deze combinatie is niet glamoureus, maar werkt. Je kunt optioneel AV1 of VP9 toevoegen als WebM-bron vóór de MP4-fallback:

<video controls preload="metadata" poster="poster.jpg">
  <source src="demo-av1.webm" type="video/webm; codecs=av01.0.05M.08">
  <source src="demo-h264.mp4" type="video/mp4; codecs=avc1.4d401f, mp4a.40.2">
</video>

De browser kiest de eerste bron die hij kan afspelen. Test dit op echte apparaten, niet alleen op je ontwikkellaptop.

Streaming en long-form afspelen

Voor langere content is adaptive bitrate streaming belangrijker dan welke afzonderlijke codec ook. HLS en MPEG-DASH laten de player schakelen tussen kwaliteitsniveaus op basis van netwerk- en apparaatomstandigheden.

Een praktische streamingladder kan bestaan uit:

• H.264-renditions voor brede compatibiliteit
• AV1-renditions voor geschikte moderne clients
• Meerdere resoluties en bitrates
• Afzonderlijke audio-renditions waar nuttig
• Segmentgroottes afgestemd op opstart- en schakelgedrag

Codec-keuze en ontwerp van de bitrate ladder moeten samen worden getest. Een prachtige AV1-encode op één bitrate helpt niet als het opstarten traag is, segmenten te groot zijn of midrange apparaten moeite hebben met decoderen.

Negeer hardwaredecodering niet

Een codec die in software wordt ondersteund, is niet hetzelfde als een codec die goed wordt ondersteund. Softwaredecodering kan CPU-gebruik verhogen, batterij leegtrekken en dropped frames veroorzaken. Dit is vooral belangrijk voor mobiele gebruikers, laptops op batterij en 4K-weergave.

Let bij het testen op:

• CPU- en GPU-gebruik
• Batterijverbruik
• Dropped frames
• Ventilatorgeluid op laptops
• Warmte op telefoons
• Opstartvertraging
• Responsiviteit bij zoeken

Hier kan “beste compressie” verliezen van “goed genoeg en hardwarematig gedecodeerd”. Een groter H.264-bestand dat soepel afspeelt, kan beter zijn dan een kleiner AV1-bestand dat op oudere hardware de batterij van de gebruiker leegtrekt.

Bitrate is nog steeds belangrijker dan teams toegeven

Codec-keuze redt geen slordige bitrate ladder. Veel webvideo’s zijn verspilling omdat ze worden geëxporteerd met instellingen voor productiemasters en geüpload zonder verstandig leveringsplan.

Als grove startpunten voor H.264 SDR-weergave op het web:

• 720p: ongeveer 2–4 Mbps
• 1080p: ongeveer 4–8 Mbps
• 4K: ongeveer 12–25 Mbps

AV1 en HEVC kunnen vaak lager bij vergelijkbare waargenomen kwaliteit, maar de content doet ertoe. Talking-head-beelden comprimeren anders dan gamecapture, schermopnames, animatie, sport of korrelige film.

Test altijd visueel. Compressiemetrieken helpen, maar menselijke waarneming bepaalt of de video acceptabel is.

Containers en MIME-types horen bij het werk

Een codec is geen bestandsformaat. H.264 wordt vaak geleverd in MP4. AV1 kan worden geleverd in WebM of MP4, afhankelijk van doelondersteuning en pipeline. VP9 is vaak WebM. Audiocodec-keuzes doen er ook toe: AAC blijft de veilige standaard voor MP4-audio, terwijl Opus uitstekend is in WebM-workflows.

Serveer correcte MIME-types. Zorg dat range requests werken. Configureer caching bewust. Kapotte headers kunnen zoeken in video laten mislukken of onnodige herdownloads afdwingen. Als video zich in productie anders gedraagt dan lokaal, inspecteer dan de daadwerkelijke HTTP-respons; de aanpak in redirects en HTTP-headers debuggen in productie is rechtstreeks van toepassing op medialevering.

Meet afspelen, niet alleen pagespeed

Generieke prestatiescores kunnen zware pagina’s signaleren, maar ze verklaren de video-ervaring niet volledig. Volg videospecifieke signalen:

• Time to first frame
• Opstartvertraging
• Rebuffering ratio
• Gemiddeld geleverde bitrate
• Dropped frames
• Foutpercentage per browser en apparaat
• Kijktijd en afhaakpunten

Een pagina-audit blijft nuttig voor omliggende problemen: te grote posters, render-blocking scripts, slechte lazy loading en layout shifts rond de player. Als je team Lighthouse als eerste controle gebruikt, lees het dan als prioriteringstool in plaats van als oordeel; Lighthouse-rapporten vragen om interpretatie, vooral op mediagerichte pagina’s.

Een praktische beslisboom

Gebruik dit als startpunt:

1. Maximale compatibiliteit nodig? Gebruik H.264 MP4.
2. Serveer je veel minuten video per gebruiker? Voeg AV1-renditions toe waar ondersteund.
3. Publiek vooral Apple-apparaten? Overweeg HEVC als extra rendition, niet als je enige.
4. Al geïnvesteerd in VP9? Houd het als het goed presteert; migreer niet dringend zonder bewijs.
5. Long-form of variabele netwerken? Gebruik adaptive streaming voordat je je blindstaart op één codec.
6. Low-end mobiel publiek? Geef de voorkeur aan hardwarematig gedecodeerde formaten en conservatieve bitrates.
7. Korte decoratieve video? Overweeg of het überhaupt video moet zijn. Een statische afbeelding, animatie of kortere loop kan beter zijn.

<!-- tool-cta:start -->

💡 Probeer dit: Test hoe verschillende codecs uitpakken voor je content met Video Converter, zodat je beslissing is gebaseerd op daadwerkelijke uitvoer en niet op algemene benchmarks.

<!-- tool-cta:end -->

De verstandige standaardaanbeveling

Als je vandaag een webvideopipeline bouwt of vernieuwt, begin dan hier:

• Encodeer een betrouwbare H.264/AAC MP4-fallback.
• Voeg AV1 toe voor browsers en apparaten die ervan profiteren.
• Gebruik adaptive streaming voor long-form content.
• Test op echte apparaten, inclusief oudere en lagere hardware.
• Monitor afspeelfouten en buffering na lancering.

Codec-selectie is geen eenmalige verklaring. Het is een onderhoudskeuze. Browserondersteuning verbetert, hardware verandert, encodingtools worden sneller en je publiek verschuift. Herzie de beslissing periodiek, maar jaag niet op elke nieuwe codecaankondiging. De juiste codec is degene die je gebruikers soepel kunnen afspelen, met acceptabele kwaliteit, zonder bandbreedte te verspillen of je leveringsstack kwetsbaar te maken.