HTML -video
Het HTML <video>-element wordt gebruikt om een video op een webpagina weer te geven.
Het HTML <video>-element
Gebruik het <video>element om een video in HTML weer te geven:
Voorbeeld
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Hoe het werkt
Het controlskenmerk voegt videobedieningen toe, zoals afspelen, pauzeren en volume.
Het is een goed idee om altijd widthen heightattributen op te nemen. Als hoogte en breedte niet zijn ingesteld, kan de pagina flikkeren terwijl de video wordt geladen.
Met <source>dit element kunt u alternatieve videobestanden specificeren waaruit de browser kan kiezen. De browser gebruikt het eerste herkende formaat.
De tekst tussen de <video>en tags wordt alleen weergegeven in browsers die het element </video>niet ondersteunen .<video>
HTML <video> automatisch afspelen
Gebruik het autoplaykenmerk om een video automatisch te starten:
Voorbeeld
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Opmerking: Chromium-browsers staan autoplay in de meeste gevallen niet toe. Gedempte autoplay is echter altijd toegestaan.
Voeg muteddaarna
autoplaytoe om je video automatisch te laten afspelen (maar gedempt):
Voorbeeld
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die het
<video>element volledig ondersteunt.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML-video-indelingen
Er zijn drie ondersteunde videoformaten: MP4, WebM en Ogg. De browserondersteuning voor de verschillende formaten is:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML-video - Mediatypen
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML-video - Methoden, eigenschappen en gebeurtenissen
De HTML DOM definieert methoden, eigenschappen en gebeurtenissen voor het <video>element.
Hiermee kunt u video's laden, afspelen en pauzeren, evenals de duur en het volume instellen.
Er zijn ook DOM-evenementen die u kunnen waarschuwen wanneer een video begint te spelen, wordt gepauzeerd, enz.
Ga voor een volledige DOM-referentie naar onze HTML Audio/Video DOM-referentie .
HTML-videotags
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |