Cursusinhoud
Ultimate HTML
Ultimate HTML
Audio en Video Insluiten voor Rijke Media-Inhoud
Audio Insluiten
Je kunt het <audio>
element gebruiken om audiobestanden op een webpagina op te nemen. Laten we een voorbeeld bekijken:
index.html
In dit voorbeeld:
Het
<audio>
element bevat een<source>
element, dat de URL en het bestandstype van het audiobestand specificeert. Veelvoorkomende ondersteunde formaten zijn MP3 en OGG;Het
controls
attribuut toont standaard afspeelbedieningen zoals afspelen, pauzeren en volume;Als de browser van de gebruiker het audio-element niet ondersteunt, wordt een terugvalbericht weergegeven.
Aanvullende attributen die vaak worden gebruikt met het HTML-audio-element zijn:
autoplay
: start het afspelen van het audiobestand zodra de pagina wordt geladen;loop
: zorgt ervoor dat het audiobestand continu wordt herhaald;muted
: dempt het audio standaard;volume
: specificeert het standaard volumeniveau voor het audiobestand, variërend van 0.0 (stil) tot 1.0 (volledig volume).
Hier is een voorbeeld dat het gebruik van al deze attributen demonstreert:
index.html
Video Insluiten
Je kunt videobestanden insluiten op een webpagina met behulp van het <video>
-element. Overweeg het volgende voorbeeld:
index.html
In dit voorbeeld:
Het
<video>
-element bevat een<source>
-element, dat de URL en het bestandstype van het videobestand specificeert. Veel ondersteunde formaten zijn WebM, MP4 en OGG;Het
controls
-attribuut toont standaard afspeelbedieningen;Als de browser van de gebruiker het video-element niet ondersteunt, wordt een terugvalbericht weergegeven.
Veelgebruikte attributen voor het HTML-video-element zijn onder andere:
autoplay
: start met het afspelen van het videobestand zodra de pagina laadt;loop
: zorgt ervoor dat het videobestand continu herhaalt;muted
: dempt het geluid standaard;volume
: specificeert het standaard volumeniveau voor het audiobestand, variërend van 0.0 (stil) tot 1.0 (volledig volume);poster
: specificeert de URL van een afbeelding om weer te geven als de videominiatuur voordat de video wordt afgespeeld;width
enheight
: specificeert de breedte en hoogte van de videospeler in pixels.
Hier is een voorbeeld dat het gebruik van al deze attributen demonstreert:
index.html
Opmerking
Daarnaast zijn er veel JavaScript-bibliotheken en API's beschikbaar die extra functionaliteit bieden voor het afspelen en manipuleren van videocontent op het web.
Bedankt voor je feedback!