Met HTML of
YouTube een video op
je website plaatsen

Externe videoplatformen en HTML5 maken video’s integreren eenvoudiger

Audiovisuele inhoud trekt de aandacht en wordt niet alleen door de bezoekers van je website gewaardeerd. Ook zoekmachines zien de meerwaarde van multimedia-content. Video’s maken het mogelijk om informatie te verstrekken op een originele manier. Bovendien kunnen producten en diensten gedetailleerder worden gepresenteerd dan met enkel teksten en foto’s. Een video op je website plaatsen werd lange tijd gezien als een ingewikkelde klus. Om de multimedia-inhoud te kunnen tonen, moesten de juiste browserplug-ins (bijvoorbeeld Adobe Flash Player) en tools handmatig op de computer worden geïnstalleerd en regelmatig worden geactualiseerd, wat vaak incompatibiliteit en gaten in de beveiliging tot gevolg had. Aanbieders van video’s werden bovendien met ingewikkelde insluitingscodes geconfronteerd en hadden moeite om de video’s in de benodigde formats (bijvoorbeeld SWF) te converteren. Echter, de vijfde versie van de Hypertext Markup Language (afgekort HTML) biedt een native element waarmee video’s als volwaardige webinhoud in de websitecode kunnen worden geïntegreerd. Het is ook mogelijk de videohosting, naast de website hosting, aan aanbieders als YouTube of Vimeo uit te besteden. Op deze pagina leggen we uit hoe je met HTML een video op je website plaatst, en hoe je dit doet via een extern videoplatform.


Een video plaatsen met HTML5

Met HTML5 is een video op je website plaatsen kinderspel. Alles wat je daarvoor 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 website 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 website 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. Websitebeheerders met een eigen site gebruiken deze functie normaal gesproken om een alternatieve beschrijving en een downloadlink naar de bron aan te bieden.


HTML5-video-element: Optionele attributen

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 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 grafische 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 website 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 website 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

Browser zonder HTML5-support

De actuele versies van de meest gebruikte webbrowsers ondersteunen HTML5. Om de video-inhoud op je website 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 website te downloaden en in de eigen lokale mediaplayer te bekijken.


De HTML5-codec-chaos

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 websitemakers 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 websitemakers 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 formats 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 website 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 video op je website 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 website 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. Websitebeheerders moeten zich wel eerst verdiepen in de gebruiksvoorwaarden van de videohosting en de insluitingscode op basis hiervan aanpassen.

Wanneer je bijvoorbeeld een YouTube-video op je website wilt plaatsen, open je de betreffende clip in het platform en neem je de code over van het insluitingsmenu. Hier kunnen ook de centrale instellingen worden ingevoerd om de afmeting van de video te definiëren en besturingselementen en de videotitel te activeren. Om te voorkomen dat ongewenste inhoud op je eigen website verschijnt, is het bovendien raadzaam om de previewfunctie voor andere video’s uit te zetten. Anders toont YouTube in de video-player op je website inhoud van andere gebruikers met vergelijkbare keywords; in het ergste geval de video’s van een directe concurrent.

  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany