<video> — HTML element uitgelegd

Attributen

Zoals alle andere HTML-elementen ondersteunt dit element de globale attributen.

`autoplay`	Een booleaans attribuut; indien opgegeven, begint de video automatisch met afspelen zodra dit mogelijk is, zonder te wachten tot het laden van de gegevens volledig is voltooid. Opmerking Moderne browsers blokkeren het automatisch afspelen van audio (of video's met een niet-gedempt audiospoor), omdat sites die automatisch audio afspelen een onprettige ervaring kunnen zijn voor gebruikers. Zie onze handleiding voor automatisch afspelen voor aanvullende informatie over het juiste gebruik van autoplay. Om automatisch afspelen van video uit te schakelen, werkt `autoplay="false"` niet; de video speelt automatisch af zolang het attribuut aanwezig is in de `<video>`-tag. Om autoplay te verwijderen, moet het attribuut volledig worden verwijderd. Opmerking Video's met het `loading="lazy"`-attribuut ingesteld, beginnen pas met downloaden en automatisch afspelen zodra het element zich in of nabij het viewport bevindt.
`controls`	Als dit attribuut aanwezig is, biedt de browser bedieningselementen waarmee de gebruiker de videoweergave kan bedienen, waaronder volume, spoelen en pauzeren/hervatten van de weergave.
`controlslist`	Het `controlslist`-attribuut helpt, indien opgegeven, de browser bij het bepalen welke bedieningselementen worden getoond voor het `video`-element wanneer de browser zijn eigen set bedieningselementen toont (dat wil zeggen, wanneer het `controls`-attribuut is opgegeven). De toegestane waarden zijn `nodownload`, `nofullscreen` en `noremoteplayback`. Gebruik het `disablepictureinpicture`-attribuut als je de Picture-in-Picture-modus (en het bijbehorende bedieningselement) wilt uitschakelen.
`crossorigin`	Dit opgesomde attribuut geeft aan of CORS moet worden gebruikt om de bijbehorende video op te halen. CORS-geactiveerde bronnen kunnen worden hergebruikt in het `<canvas>`-element zonder tainted te raken. De toegestane waarden zijn: `anonymous` : Verzendt een cross-origin verzoek zonder credential. Met andere woorden, het verzendt de `Origin:`-HTTP-header zonder cookie, X.509-certificaat, of het uitvoeren van HTTP Basic-authenticatie. Als de server geen credentials aan de oorspronkelijke site verstrekt (door de `Access-Control-Allow-Origin:`-HTTP-header niet in te stellen), wordt de bron tainted en is het gebruik ervan beperkt. `use-credentials` : Verzendt een cross-origin verzoek met een credential. Met andere woorden, het verzendt de `Origin:`-HTTP-header met een cookie, een certificaat, of het uitvoeren van HTTP Basic-authenticatie. Als de server geen credentials aan de oorspronkelijke site verstrekt (via de `Access-Control-Allow-Credentials:`-HTTP-header), wordt de bron tainted en is het gebruik ervan beperkt. Indien niet aanwezig, wordt de bron opgehaald zonder een CORS-verzoek (dat wil zeggen, zonder het verzenden van de `Origin:`-HTTP-header), waardoor niet-tainted gebruik in `<canvas>`-elementen wordt voorkomen. Bij een ongeldige waarde wordt dit behandeld alsof het opgesomde sleutelwoord `anonymous` werd gebruikt. Zie CORS-instellingsattributen voor aanvullende informatie.
`disablepictureinpicture`	Voorkomt dat de browser in bepaalde gevallen een Picture-in-Picture-contextmenu voorstelt of automatisch Picture-in-Picture aanvraagt.
`disableremoteplayback`	Een booleaans attribuut dat wordt gebruikt om de mogelijkheid van externe weergave uit te schakelen op apparaten die zijn aangesloten via bekabelde (HDMI, DVI, enz.) en draadloze technologieën (Miracast, Chromecast, DLNA, AirPlay, enz.). In Safari kun je `x-webkit-airplay="deny"` als fallback gebruiken.
`height`	De hoogte van het weergavegebied van de video, in CSS-pixels (alleen absolute waarden; geen percentages).
`loading` Experimenteel	Geeft aan hoe de browser de video (inclusief eventuele poster-afbeelding) moet laden: `eager` : Laadt de video onmiddellijk, ongeacht of de video zich momenteel in het zichtbare viewport bevindt (dit is de standaardwaarde). `lazy` : Stelt het laden van de video uit totdat deze een berekende afstand tot het viewport bereikt, zoals bepaald door de browser. Lazy loading voorkomt het netwerk- en opslagverbruik dat nodig is om de video te verwerken totdat redelijkerwijs zeker is dat deze nodig zal zijn. Dit verbetert de prestaties in de meeste typische gebruikssituaties. Hoewel expliciete `width`- en `height`-attributen worden aanbevolen voor alle video's om layout shift te voorkomen, zijn ze vooral belangrijk voor video's met lazy loading. Video's met lazy loading worden nooit geladen als ze geen zichtbaar deel van een element overlappen, zelfs niet als het laden ervan dit zou veranderen, omdat niet-geladen video's een `width` en `height` van `0` hebben. Dit zorgt voor een nog storender gebruikerservaring wanneer de inhoud die zichtbaar is in het viewport herschikt terwijl deze gelezen wordt. Video's met lazy loading die zich in het zichtbare viewport bevinden, zijn mogelijk nog niet zichtbaar wanneer de `load`-gebeurtenis van Window wordt geactiveerd. Dit komt doordat deze gebeurtenis is gebaseerd op eager-loaded video's — video's met lazy loading worden niet meegeteld, zelfs niet als ze zich bij het eerste laden van de pagina binnen het zichtbare viewport bevinden. Het laden wordt alleen uitgesteld wanneer JavaScript is ingeschakeld. Dit is een anti-tracking-maatregel, want als een user-agent lazy loading zou ondersteunen wanneer scripting is uitgeschakeld, zou het voor een site nog steeds mogelijk zijn om de ongeveer positie van de gebruiker in de pagina gedurende een sessie te volgen, door strategisch video's in de opmaak van een pagina te plaatsen zodat een server kan bijhouden hoeveel video's worden aangevraagd en wanneer. Opmerking Het `loading="lazy"`-attribuut heeft ook invloed op de attributen `autoplay`, `poster` en `preload`, zoals beschreven in de betreffende secties van deze pagina.
`loop`	Een booleaans attribuut; indien opgegeven, zoekt de browser automatisch terug naar het begin zodra het einde van de video is bereikt.
`muted`	Een booleaans attribuut dat de standaard audio-demp-instelling van de video aangeeft. Indien ingesteld, wordt de audio in eerste instantie gedempt. De standaardwaarde is `false`, wat betekent dat de audio hoorbaar is wanneer de video wordt afgespeeld. Opmerking Om het dempen op te heffen, werkt het instellen van `muted="false"` niet; de audio wordt gedempt zodra het attribuut aanwezig is, ongeacht de waarde. Om het dempen op te heffen, moet het attribuut volledig worden verwijderd.
`playsinline`	Een booleaans attribuut dat aangeeft dat de video "inline" moet worden afgespeeld, dat wil zeggen binnen het weergavegebied van het element. Merk op dat de afwezigheid van dit attribuut niet betekent dat de video altijd op volledig scherm wordt afgespeeld.
`poster`	Een URL voor een afbeelding die wordt getoond terwijl de video wordt gedownload. Als dit attribuut niet is opgegeven, wordt er niets weergegeven totdat het eerste frame beschikbaar is; daarna wordt het eerste frame getoond als posterframe. Opmerking Video's met het `loading="lazy"`-attribuut ingesteld, downloaden de `poster`-bron pas zodra de video zich in of nabij het viewport bevindt.
`preload`	Dit enumerated attribuut is bedoeld om de browser een hint te geven over wat volgens de auteur zal leiden tot de beste gebruikerservaring wat betreft welke inhoud wordt geladen voordat de video wordt afgespeeld. Het kan een van de volgende waarden hebben: `none`: Geeft aan dat de video niet vooraf moet worden geladen. `metadata`: Geeft aan dat alleen metadata van de video (bijv. de lengte) wordt opgehaald. `auto`: Geeft aan dat het volledige videobestand kan worden gedownload, zelfs als de gebruiker het naar verwachting niet zal gebruiken. lege string: Een synoniem van de waarde `auto`. De standaardwaarde verschilt per browser. De specificatie adviseert deze in te stellen op `metadata`. Opmerking Video's met het `loading="lazy"`-attribuut ingesteld, passen het `preload`-gedrag pas toe zodra de video zich in of nabij het viewport bevindt. Het `autoplay`-attribuut heeft voorrang op `preload`. Als `autoplay` is opgegeven, moet de browser uiteraard beginnen met het downloaden van de video om deze te kunnen afspelen. De specificatie dwingt de browser niet om de waarde van dit attribuut te volgen; het is slechts een hint.
`src`	De URL van de in te sluiten video. Dit is optioneel; je kunt in plaats daarvan het `<source>`-element binnen het video-blok gebruiken om de in te sluiten video te specificeren.
`width`	De breedte van het weergavegebied van de video, in CSS-pixels (alleen absolute waarden; geen percentages).

Gebeurtenissen

`audioprocess` Verouderd	De invoerbuffer van een `ScriptProcessorNode` is klaar om verwerkt te worden.
`canplay`	De browser kan de media afspelen, maar schat in dat er nog niet genoeg gegevens zijn geladen om de media tot het einde af te spelen zonder te moeten stoppen voor verdere buffering van de inhoud.
`canplaythrough`	De browser schat in dat de media tot het einde kan worden afgespeeld zonder te stoppen voor het bufferen van inhoud.
`complete`	Het renderen van een `OfflineAudioContext` is beëindigd.
`durationchange`	Het `duration`-attribuut is bijgewerkt.
`emptied`	De media is leeg geraakt; deze gebeurtenis wordt bijvoorbeeld verzonden als de media al (gedeeltelijk) was geladen, en de `load()`-methode wordt aangeroepen om deze opnieuw te laden.
`ended`	De weergave is gestopt omdat het einde van de media is bereikt.
`error`	Er is een fout opgetreden tijdens het ophalen van de mediagegevens, of het type van de bron is geen ondersteund mediaformaat.
`loadeddata`	Het eerste frame van de media is klaar met laden.
`loadedmetadata`	De metadata is geladen.
`loadstart`	Wordt geactiveerd wanneer de browser is begonnen met het laden van de bron.
`pause`	De weergave is gepauzeerd.
`play`	De weergave is begonnen.
`playing`	De weergave is klaar om te starten nadat deze was gepauzeerd of vertraagd door gebrek aan gegevens.
`progress`	Wordt periodiek geactiveerd terwijl de browser een bron laadt.
`ratechange`	De afspeelsnelheid is gewijzigd.
`seeked`	Een seek-bewerking is voltooid.
`seeking`	Een seek-bewerking is begonnen.
`stalled`	De user-agent probeert mediagegevens op te halen, maar de gegevens komen onverwacht niet binnen.
`suspend`	Het laden van mediagegevens is opgeschort.
`timeupdate`	De tijd aangegeven door het `currentTime`-attribuut is bijgewerkt.
`volumechange`	Het volume is gewijzigd.
`waiting`	De weergave is gestopt vanwege een tijdelijk gebrek aan gegevens.

Gebruiksnotities

Niet alle browsers ondersteunen dezelfde videoformaten; je kunt meerdere bronnen opgeven binnen geneste <source>-elementen, en de browser gebruikt dan de eerste die hij begrijpt.

HTML

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4" download="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

Bij het gebruik van <source>-elementen probeert de browser elke bron achtereenvolgens te laden. Als een bron mislukt (bijvoorbeeld door een ongeldige URL of niet-ondersteund formaat), wordt de volgende bron geprobeerd, enzovoort. Er wordt een error-gebeurtenis geactiveerd op het <video>-element nadat alle bronnen zijn mislukt; er worden geen error-gebeurtenissen geactiveerd op elk afzonderlijk <source>-element.

We bieden een uitgebreide en grondige handleiding voor mediabestandstypen en de handleiding voor codecs die worden ondersteund voor video. Ook beschikbaar is een handleiding voor audiocodecs die hiermee kunnen worden gebruikt.

Overige gebruiksnotities:

Als je het controls-attribuut niet opgeeft, bevat de video niet de standaardbedieningselementen van de browser; je kunt je eigen aangepaste bedieningselementen maken met JavaScript en de HTMLMediaElement-API. Zie Een cross-browser videospeler maken voor meer details.
Om nauwkeurige controle over je video- (en audio-)inhoud mogelijk te maken, activeren HTMLMediaElements veel verschillende gebeurtenissen. Naast het bieden van bestuurbaarheid, laten deze gebeurtenissen je de voortgang van zowel het downloaden als het afspelen van de media volgen, evenals de afspeelstatus en -positie.
Je kunt de object-position-eigenschap gebruiken om de positionering van de video binnen het kader van het element aan te passen, en de object-fit-eigenschap om te bepalen hoe de grootte van de video wordt aangepast om binnen het kader te passen.
Om ondertitels/bijschriften bij je video te tonen, kun je wat JavaScript gebruiken samen met het <track>-element en het WebVTT-formaat. Zie Ondertitels en bijschriften toevoegen aan HTML-video voor meer informatie.
Je kunt audiobestanden afspelen met een <video>-element. Dit kan bijvoorbeeld nuttig zijn als je audio moet weergeven met een WebVTT-transcript, aangezien het <audio>-element geen bijschriften met WebVTT toestaat.
Om de fallback-inhoud te testen op browsers die het element wel ondersteunen, kun je <video> vervangen door een niet-bestaand element zoals <notavideo>.

Een goede algemene informatiebron over het gebruik van HTML <video> is de HTML-video en -audio-beginnershandleiding.

Opmaken met CSS

Het <video>-element is een vervangen element (replaced element) — de display-waarde is standaard inline — maar de standaardbreedte en -hoogte binnen het viewport worden bepaald door de ingesloten video.

Er gelden geen bijzondere overwegingen voor het stylen van <video>; een veelgebruikte strategie is om het een display-waarde van block te geven, zodat het gemakkelijker te positioneren, te schalen, enzovoort is, en vervolgens de gewenste opmaak- en lay-outinformatie toe te voegen. Basisprincipes voor het stylen van een videospeler biedt enkele nuttige stylingtechnieken.

Ondertitels en andere getimede teksttracks toevoegen

Getimede teksttracks voor ondertitels, closed captions, hoofdstuktitels enzovoort kunnen declaratief worden toegevoegd door het <track>-element te nesten. De tracks worden gespecificeerd in het Web Video Text Tracks File Format (WebVTT) (.vtt-bestanden).

De onderstaande HTML bevat bijvoorbeeld het bestand "captions.vtt", dat wordt gebruikt om closed captions over de video te leggen als de gebruiker bijschriften inschakelt.

HTML

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

Getimede teksttracks kunnen ook programmatisch worden toegevoegd met de WebVTT-API.

Toevoegen en verwijderen van tracks detecteren

Je kunt detecteren wanneer tracks aan een <video>-element worden toegevoegd of daaruit worden verwijderd met de gebeurtenissen addtrack en removetrack. Deze gebeurtenissen worden echter niet rechtstreeks naar het <video>-element zelf verzonden. In plaats daarvan worden ze verzonden naar het track list-object binnen de HTMLMediaElement van het <video>-element dat overeenkomt met het type track dat aan het element is toegevoegd:

`HTMLMediaElement.audioTracks`	Een `AudioTrackList` met alle audiotracks van het media-element. Voeg een listener voor `addtrack` toe aan dit object om op de hoogte te worden gesteld wanneer nieuwe audiotracks aan het element worden toegevoegd.
`HTMLMediaElement.videoTracks`	Een `VideoTrackList` met alle videotracks van het media-element. Voeg een `addtrack`-listener toe aan dit object om op de hoogte te worden gesteld wanneer videotracks aan het element worden toegevoegd.
`HTMLMediaElement.textTracks`	Een `TextTrackList` met alle teksttracks van het media-element (die worden gebruikt voor ondertitels, closed captions, enzovoort). Voeg een `addtrack`-listener toe aan dit object om op de hoogte te worden gesteld wanneer teksttracks aan het element worden toegevoegd.

Om bijvoorbeeld te detecteren wanneer audiotracks worden toegevoegd aan of verwijderd uit een <video>-element, kun je code als deze gebruiken:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Deze code houdt in de gaten wanneer audiotracks worden toegevoegd aan en verwijderd uit het element, en roept een hypothetische functie aan op een trackeditor om de track te registreren en te verwijderen uit de lijst met beschikbare tracks van de editor.

Je kunt ook addEventListener() gebruiken om te luisteren naar de gebeurtenissen addtrack en removetrack.

Serverondersteuning voor video

Als het MIME-type voor de video niet correct is ingesteld op de server, wordt de video mogelijk niet getoond, of wordt een grijs vak met een X getoond (als JavaScript is ingeschakeld).

Als je Apache Web Server gebruikt om WebM-video's te serveren, kun je dit probleem oplossen door de bestandsextensies van het videotype toe te voegen aan het video/webm-MIME-type (de meest voorkomende WebM-bestandsextensie is .webm). Bewerk hiervoor het bestand mime.types in /etc/apache, of gebruik de configuratie-instructie AddType in httpd.conf:

PLAIN

AddType video/webm .webm

Je webhost biedt mogelijk een eenvoudige interface voor het wijzigen van MIME-type-configuraties voor nieuwe technologieën, totdat er op natuurlijke wijze een algemene update plaatsvindt.

Toegankelijkheid

Video's moeten zowel bijschriften als transcripten bieden die de inhoud nauwkeurig beschrijven (zie Ondertitels en bijschriften toevoegen aan HTML-video voor meer informatie over de implementatie hiervan). Bijschriften stellen mensen met gehoorverlies in staat de audio-inhoud van een video te begrijpen terwijl de video wordt afgespeeld, terwijl transcripten mensen die extra tijd nodig hebben, in staat stellen audio-inhoud te bekijken in een tempo en formaat dat voor hen comfortabel is.

Het is de moeite waard om op te merken dat je alleen bijschriften kunt toevoegen aan audio-only media wanneer je de audio afspeelt binnen een <video>-element, aangezien het videogebied van het element wordt gebruikt om de bijschriften weer te geven. Dit is een van de bijzondere scenario's waarin het nuttig is om audio af te spelen in een video-element.

Als automatische ondertitelingsdiensten worden gebruikt, is het belangrijk om de gegenereerde inhoud te controleren om te zorgen dat deze de bronvideo nauwkeurig weergeeft.

Naast gesproken dialoog moeten ondertitels en transcripten ook muziek en geluidseffecten identificeren die belangrijke informatie overbrengen. Dit omvat emotie en toon:

PLAIN

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Bijschriften mogen het hoofdonderwerp van de video niet belemmeren. Ze kunnen worden gepositioneerd met behulp van de align-VTT-cue-instelling.

Voorbeelden

Enkele bron

Dit voorbeeld speelt een video af zodra deze wordt geactiveerd, waarbij de gebruiker de standaard videobediening van de browser krijgt om de weergave te regelen.

HTML

<!-- Basic video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

Resultaat

Resultaat in de browser

Totdat de video begint met afspelen, wordt de afbeelding die is opgegeven in het poster-attribuut op die plek weergegeven. Als de browser geen videoweergave ondersteunt, wordt de fallback-tekst weergegeven.

Meerdere bronnen

Dit voorbeeld bouwt voort op het vorige en biedt drie verschillende bronnen voor de media; hierdoor kan de video worden bekeken ongeacht welke videocodecs door de browser worden ondersteund.

HTML

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

Resultaat

Resultaat in de browser

Eerst wordt AVI geprobeerd. Als dat niet kan worden afgespeeld, wordt MP4 geprobeerd. Er wordt een fallback-bericht weergegeven als het video-element niet wordt ondersteund, maar niet als alle bronnen mislukken.

Bij sommige mediabestandstypen kun je specifiekere informatie opgeven met behulp van de codecs-parameter als onderdeel van de type-string van het bestand. Bijvoorbeeld, video/webm; codecs="vp8, vorbis" geeft aan dat het bestand een WebM-video is die VP8 gebruikt voor de video en Vorbis voor audio.

Technische samenvatting

Inhoudscategorieën	Flow content, phrasing content, embedded content. Als het een `controls`-attribuut heeft: interactive content en palpable content.
Toegestane inhoud	Als het element een `src`-attribuut heeft: nul of meer `<track>`-elementen, gevolgd door transparante inhoud die geen media-elementen bevat–dat wil zeggen geen `<audio>` of `<video>`. Anders: nul of meer `<source>`-elementen, gevolgd door nul of meer `<track>`-elementen, gevolgd door transparante inhoud die geen media-elementen bevat–dat wil zeggen geen `<audio>` of `<video>`.
Weglaten van tags	Niet toegestaan, zowel de begin- als de eindtag zijn verplicht.
Toegestane oudertags	Elk element dat embedded content accepteert.
Impliciete ARIA-rol	Geen overeenkomstige rol
Toegestane ARIA-rollen	`application`
DOM-interface	`HTMLVideoElement`

Zie ook

<audio>

Het element `<video>`

Attributen

Gebeurtenissen

Gebruiksnotities

Opmaken met CSS

Ondertitels en andere getimede teksttracks toevoegen

Toevoegen en verwijderen van tracks detecteren

Serverondersteuning voor video

Toegankelijkheid

Voorbeelden

Enkele bron

HTML

Resultaat

Meerdere bronnen

HTML

Resultaat

Technische samenvatting

Zie ook

Verwante elementen

Het element <video>

Attributen

Gebeurtenissen

Gebruiksnotities

Opmaken met CSS

Ondertitels en andere getimede teksttracks toevoegen

Toevoegen en verwijderen van tracks detecteren

Serverondersteuning voor video

Toegankelijkheid

Voorbeelden

Enkele bron

HTML

Resultaat

Meerdere bronnen

HTML

Resultaat

Technische samenvatting

Zie ook

Verwante elementen

Het element `<video>`