Websites met stijl

Naslag: audio/video-elementen

Het element audio

Functie

Met het element audio kunnen geluidsbestanden worden afgespeeld. In principe kunnen de volgende bestandstypen worden afgespeeld: mp3, ogg, wave.
Helaas wordt niet elk bestandstype door alle browsers ondersteund.

Vorm

Om een audiobestand af te spelen is behalve het element audio ook het element source nodig. Het onderstaande voorbeeld geeft aan hoe dit gaat: audio-voorbeeld 1: afspelen audiobestand: <audio controls> <source src="img/mijn-audiobestand.mp3" type="audio/mpeg">
Dit audiobestand kan niet worden afgespeeld. Sorry! </audio>

Toelichting

• Het audio-element in voorbeeld 1 bevat het attribuut controls.
  Dit zorgt ervoor dat de bedieningsknoppen getoond worden.
• Het source-element bevat het attribuut src met plaats en naam van het audio bestand.
  In het voorbeeld is aangenomen dat het bestand mijn-audiobestand.mp3 is opgeslagen in de submap img.
• Als de browser het gebruikte bestandstype niet ondersteunt wordt de tekst tussen <audio> en <audio> afgebeeld: 'Dit audiobestand kan niet worden afgespeeld. Sorry!'

Het audio-element: attributen

Het audio element kent een aantal speciale attributen. Het zijn allemaal attributen zonder waarde.
(Is het attribuut aanwezig, dan is de eigenschap ingeschakeld; is het attribuut afwezig, dan is die eigenschap uitgeschakeld)

• autoplay
  Het audiobestand wordt bij het openen van de pagina meteen gestart.
• controls
  Maakt de bedieningsknoppen (play/pause, volume) zichtbaar.
• loop
  Het audio-bestand wordt steeds herhaald.
• muted
  Het geluid is gedempt (volume uit)

Opmerkingen

• Meestal is het handig om het attribuut controls te gebruiken, anders is het geluid niet te bedienen (start/pauze)
• <audio autoplay loop>...</audio> speelt achtergondmuziek. De muziek begint als de pagina wordt geopend en wordt steeds herhaald.
• tag><audio muted>...</audio> is geen handige keuze. Het volume staat op 0 en de bedieningsknoppen zijn niet zichtbaar. Je hoort en ziet niets.

Hoe je de kans vergroot dat een geluidbestand kan worden afgespeeld

Omdat de verschillende geluidstypen niet door alle browsers worden ondersteund, bestaat de kans dat je geluidsbestand niet is af te spelen op sommige computers. Je kan de kans dat een audio kan worden afgespeeld vergroten door het bestand te converteren naar alle ondersteunde audio-formaten: mp3, ogg en wav.

Daarvoor zijn talloze gratis conversie programma's te vinden op internet. Zoek op 'audio convertor' of 'free audio convertor'.
Je zou bijvoorbeeld online-audio-converter.com kunnen proberen. Daarmee kan je audio-bestanden online omzetten, zonder dat je een programma hoeft te downloaden en installeren. (Volgens mij is de website safe, maar ik kan uiteraard geen garantie geven.)

Stel dat je je audio-bestand hebt geconverteerd tot mijn-audioprogramma.mp3, mijn-audioprogramma.ogg en mijn-audioprogramma.wav, dan kun je die als volgt allemaal in het audio-element plaatsen: audio-voorbeeld 2: alternative audiobestanden: <audio controls> <source src="img/mijn-audiobestand.mp3" type="audio/mpeg">
<source src="img/mijn-audiobestand.ogg" type="audio/ogg">
<source src="img/mijn-audiobestand.wav" type="audio/wav">
Dit audiobestand kan niet worden afgespeeld. </audio> De browser kiest nu een van de drie aangeboden bestanden. En alleen als geen van de 3 formaten wordt ondersteund komt de medeling 'Dit audiobestand kan niet worden afgespeeld' in beeld.

Het element video

Functie

Met het element video kunnen fimpje/videos worden afgespeeld. In principe kunnen de volgende bestandstypen worden afgespeeld: mp4, ogg, WebM.
Helaas wordt niet elk bestandstype door alle browsers ondersteund.

Vorm

Om een videobestand af te spelen is behalve het element audio ook het element source nodig. Het onderstaande voorbeeld geeft aan hoe dit gaat: Video-voorbeeld 1 : afspelen videobestand: <video controls> <source src="img/mijn-video.mp4" type="video/mp4">
Deze video kan niet worden afgespeeld. Sorry! </video>

Toelichting

• Het video-element in voorbeeld 1 bevat het attribuut controls.
  Dit zorgt ervoor dat de bedieningsknoppen getoond worden.
• Het source-element bevat het attribuut src met plaats en naam van het video bestand.
  In het voorbeeld is aangenomen dat het bestand mijn-video.mp4 is opgeslagen in de submap img.
• Als de browser het gebruikte bestandstype niet ondersteunt wordt de tekst tussen <video> en </video> afgebeeld: 'Dit videobestand kan niet worden afgespeeld. Sorry!'

De attributen autoplay, controls, loop, muted

Het video element kent een aantal speciale attributen zonder waarde.
(Is het attribuut aanwezig, dan is de eigenschap ingeschakeld; is het attribuut afwezig, dan is die eigenschap uitgeschakeld)

• autoplay
  Het videobestand wordt bij het openen van de pagina meteen gestart.
• controls
  Maakt de bedieningsknoppen (play/pause, volume) zichtbaar.
• loop
  Het videobestand wordt steeds herhaald.
• muted
  Het geluid is gedempt (volume uit)

Opmerking

• Als de bedieningsknoppen verborgen zijn, krijg je door op de film te rechtsklikken een menu in beeld waarmee je de film kunt bedienen.

De attributen height en width

Met de attributen height en width kan je de afmetingen van de video instellen.

• Vorm: height="200" width="300" geeft een hoogte van 200px en een breedte van 300px.
  Opmerkingen:
• Je kunt de afmetingen ook instellen in het stijlblad met de eigenschappen height en width.

Hoe je de kans vergroot dat een video kan worden afgespeeld

Omdat de verschillende video typen niet door alle browsers worden ondersteund, bestaat de kans dat je video niet is af te spelen op sommige computers. Je kan die kans dat een video kan worden afgespeeld vergroten door het bestand te converteren naar alle formaten die worden ondersteund: mp4, ogg en WebM.

Daarvoor zijn talloze gratis conversie programma's te vinden op internet. Zoek op 'audio convertor' of 'free audio convertor'.
Je zou bijvoorbeeld onlinevideoconverter.com/nl kunnen proberen. Daarmee kan je video-bestanden online omzetten, zonder dat je een programma hoeft te downloaden en installeren. (Volgens mij is de website safe, maar ik kan uiteraard geen garantie geven.

Stel dat je je audio-bestand hebt geconverteerd tot mijn-audioprogramma.mp3, mijn-audioprogramma.ogg en mijn-audioprogramma.wav, dan kun je die als volgt allemaal in het audio-element plaatsen: video-voorbeeld 2: alternative videobestanden: <video controls> <source src="img/mijn-video.mp4" type="video/mp4">
<source src="img/mijn-video.ogg" type="video/ogg">
Deze video kan niet worden afgespeeld. </video> De browser kiest nu een van de drie aangeboden bestanden. En alleen als geen van de 3 formaten wordt ondersteund komt de medeling 'Dee video kan niet worden afgespeeld' in beeld.

Het element source

Het element source staat altijd binnen een element audo of een element video. Het heeft één verplicht attribuut src, met de URL van het audio- of video-bestand dat moet worden afgespeeld. Voorbeeld: