Moderne webpagina’s maken vaak gebruik van beeld en/of geluid. In HTML5 zijn speciaal daarvoor 2 nieuwe elementen bedacht. Voor beeld is dat het element video. Voor geluid is dat het element audio.
Video
De HTML-code voor het gebruik van een film of video op een webpagina is niet heel erg ingewikkeld.
<video src="film.mp4"></video>
Het element video heeft een begintag en een eindtag. De inhoud van het element wordt getoond in het geval de browser het element video niet kent. Het is daarom handig om tussen de begin- en de eindtag een mededeling te plaatsen. Het element video werkt overigens in alle moderne browsers.
<video src="film.mp4"> ondersteunt het element video niet</video>
Aan het element video kunnen diverse attributen worden toegevoegd:
In het voorbeeld heeft de film en/of video de extensie mp4. Andere extensies die voor beeld gebruikt kunnen worden, zijn mov, flv of avi. Een extensie zegt normaal iets over het bestandstype dat gebruikt wordt. Bij een film ligt dat echter iets gecompliceerder. Een film is meestal opgebouwd uit meerdere tracks. De extensie van een filmbestand zegt dus niet iets over één bestand maar eigenlijk over een verzameling van tracks.
De extensie van een filmbestand kan vergeleken worden met wat ook wel een container wordt genoemd. Het fungeert als een omhulsel voor één of meerdere tracks. Het probleem dat zich nu voordoet, is dat deze tracks van verschillende typen kunnen zijn.
Er bestaan vaste afspraken voor het coderen van tracks. Als een film wordt afgespeeld, moeten de tracks ook weer gedecodeerd worden. De gemaakte afspraken voor het coderen en decoderen worden codecs genoemd. Er zijn heel veel verschillende soorten codecs in omloop, maar drie codecs worden het meest gebruikt. Dat zijn H.264 , Theora en VP8. H.264 voor de extensie mp4. Theora voor ogv-bestanden en VP8 voor bestanden met de extensie webm.
Als je er zeker van wilt zijn dat je film de meeste kans heeft om te worden afgespeeld, moet het filmbestand met alle drie de vermelde codes worden gedecodeerd. Daarvoor is een oplossing bedacht. Kijk maar eens naar de onderstaande HTML-code:
<video width="640" heigth="480" controls preload="none">
<source src="film.mp4" type="video/mp4">
<source src="film.ogv" type="video/ogg">
<source src="film.webm" type="video/webm">
De gebruikte browser ondersteunt het element video niet.
</video>
Aan het element video worden meerdere elementen source toegekend. Elk element source bevat de attributen src en type. Het komt er dus op neer dat het element video meerdere bronnen bevat.
Bij het verwerken van het element video gaat de browser een lijstje af. Kan de browser de eerste bron niet afspelen, kijkt de browser vervolgens naar de tweede en de derde bron. Mislukt het decoderen alsnog dan wordt de tekst “De gebruikte browser ondersteunt het element video niet” afgebeeld.
Audio
We hebben gezien dat het afspelen van een filmfragment nog niet zo eenvoudig is. Het afspelen van een geluidsfragment is gelukkig iets eenvoudiger. Toch lijkt het gebruik van het element audio wel op het gebruik van het element video. Voor audio worden vooral de bestandstypen mp3 en ogg gebruikt. De belangrijkste attributen voor audio zijn src en controls.
<audio controls preload="none">
<source src="geluid.mp3" type="audio/mp3">
<source src="geluid.ogg" type="audio/ogg">
De gebruikte browser ondersteunt het element audio niet.
</audio>