Met HTML een video op je site insluiten of voor een embedded YouTube video kiezen?

---

HTML5: video plaatsen made easy

Met HTML5 is een video op je site plaatsen kinderspel. Alles wat je voor een embedded video nodig hebt, is het native element video, dat met optionele attributen kan worden uitgebreid. De volgende programmacode toont hoe je videobronnen aan de broncode van je site toevoegt:

<video src="voorbeeld.mp4" width="320"  height="240" controls poster="miniatuurafbeelding.jpg">
Deze video kan niet worden weergegeven in uw browser.<br>
Een downloadversie staat klaar onder <a href="URL">linkadres</a>.
</video>

Het video-element in het voorbeeld bevat de URL naar de videobron (src="voorbeeld.mp4") en de optionele attributen width, height, controls en poster, die definiëren hoe de video op je site wordt weergegeven. De tekst die tussen de inleidende en de afsluitende tag van het video-element staat, wordt alleen getoond als een browser de video niet kan weergeven. Sitebeheerders gebruiken deze functie normaal gesproken om een alternatieve beschrijving en een downloadlink naar de bron aan te bieden.

---

Optionele attributen van het HTML5-video-element

Wanneer een bron met het video-element wordt ingesloten, moet deze de link naar de bron bevatten; ofwel als src-attribuut, ofwel in een kindelement source. Bovendien kan het video-element worden uitgebreid met de volgende attributen:

Attribuut	Functie
width/height	De attributen width en height maken het mogelijk om de afmetingen van je embedded video precies aan te geven. Wanneer deze informatie ontbreekt, maakt het video-element gebruik van de afmeting van het videobestand. Als je slechts een van beide attributen instelt, past de browser bij vertoning de beeldverhouding automatisch aan.
controls	Met het attribuut controls activeer je het native controlepaneel van de webbrowser. Eventueel kunnen ook eigen besturingselementen met JavaScript worden gedefinieerd.
poster	Het attribuut poster gebruik je om naar een afbeelding te verwijzen die als miniatuurafbeelding voor de video wordt getoond. Wanneer dit attribuut ontbreekt, wordt het eerste frame van de video gebruikt voor de miniatuurafbeelding.
autoplay	Met het attribuut autoplay geef je de webbrowser de opdracht om video’s na het openen van de site automatisch te starten.
loop	Wanneer je het attribuut loop gebruikt, wordt de video steeds herhaald.
muted	Met het attribuut muted wordt de video zonder geluid afgespeeld.
preload	Het attribuut preload geeft aan de browser door in hoeverre het videobestand bij het downloaden van de site moet worden geladen. Je hebt de keuze uit drie waarden: bij auto wordt het hele bestand geladen, bij metadata worden alleen metabestanden geladen en de waarde none verhindert het laden van videobestanden.

---

Browser zonder HTML5-support

De actuele versies van de meest gebruikelijke webbrowsers ondersteunen HTML5. Om de video-inhoud op je site ook toegankelijk te maken voor gebruikers die technisch niet up-to-date zijn, maken tekstlinks in het video-element het mogelijk om afzonderlijke downloadgegevens aan een video te koppelen. Wie in plaats van de video de alternatieve tekst te zien krijgt, kan er zo voor kiezen om de video op je site te downloaden en in de eigen lokale mediaplayer te bekijken.

---

De HTML5-codec-chaos

De HTML5-specificatie definieert het video-element en de bijbehorende programmeerinterface (application programming interface, API), maar maakt geen criteria voor videocodering. Bij het kiezen van het videoformaat stuiten sitemakers daarom op problemen. De gangbare videoformaten WebM, OggTheora en H.264/MPEG4 hebben allemaal voor- en nadelen; daarom kunnen de ontwikkelaars van marktleidende webbrowsers het tot op heden niet eens worden over een gemeenschappelijke standaard. Terwijl Internet Explorer en Safari zich in de eerste plaats richten op het formaat H.264/MPEG4, een formaat waarvoor sitemakers moeten betalen en dat sinds 2013 bijna overal beschikbaar is, ondersteunen de webbrowsers Firefox, Chrome en Opera ook gratis formaten zoals Ogg Theora en WebM.

Browser	MP4 (MPEG4-bestanden met H.264-videocodec + AAC-audiocodec)	WebM (WebM-bestanden met VP8/VP9-videocodec + Vorbis-audiocodec)	Ogg (Ogg-bestanden met Theora-videocodec + Vorbis-audiocodec)
IE 9+	ja	nee	nee
Firefox	ja	ja	ja
Chrome	ja	ja	ja
Safari	ja	nee	nee
Opera	ja	ja	ja

Om incompatibiliteit te voorkomen, is het raadzaam om video’s in verschillende formaten te maken. Het video-element staat hiervoor verschillende videobronnen toe, door het kindelement source in te sluiten en het met het attribuut type voor de webbrowser te onderscheiden:

<video width="320"  height="240" controls poster="miniatuurafbeelding.jpg">
<source src="voorbeeld.webm" type="video/webm">
<source src="voorbeeld.ogg"  type="video/ogg">
<source src="voorbeeld.mp4" type="video/mp4">
</video>

Wanneer alternatieve source-elementen met een type-attribuut in het video-element worden geplaatst, kiest een browser tijdens het laden van een site automatisch het juiste videoformaat. Let er daarbij op dat het video-element bij deze wijze van insluiten geen src-attribuut met bron mag bevatten.

---

Via platformen als YouTube een embedded video op je site plaatsen

Wie video’s niet via de eigen server wil aanbieden maar de videohosting aan een externe dienstverlener wil uitbesteden, heeft bij platformen zoals YouTube en Vimeo de mogelijkheid om het videomateriaal gratis te uploaden en clips met een insluitingscode in de eigen site te integreren.

Omdat populaire videoplatformen garanderen dat je inhoud compatibel is met de gebruikelijke webbrowsers, worden de formaten van deze aanbieders op de meeste computers ondersteund. Outsourcing van video’s heeft bovendien het voordeel dat de eigen server niet extra wordt belast door het streamen. Sitebeheerders moeten zich wel eerst verdiepen in de gebruiksvoorwaarden van de videohosting en de insluitingscode op basis hiervan aanpassen.

---