KENNISBANK
Videobanner op je website
Een video als banner op je website zorgt voor meer interactie, maar hoe doe je dat?
Video automatisch laten afspelen
Bewegend beeld werkt sterk als je ergens de aandacht op wilt vestigen. Moderne browsers staan zowel voor mobiel als desktop toe om video’s automatisch te laten afspelen. Hiervoor moet het geluid van de video wel uitstaan. Deze voorwaarde is bedacht om ervoor te zorgen dat de gebruiker er geen overlast van ondervindt (zoals een reclame advertentie met geluid).
Onderstaand hebben we de HTML code uitgewerkt waarmee je een video op een website kunt plaatsen. Je ziet eerst de totale code. Hierna wordt regel voor regel uitgelegd wat alle opties betekenen, zodat je zelf kunt kiezen of je bepaalde zaken aan- of uitzet. Je kunt dit zelf op je site toepassen of door je website beheerder laten doen. Voor de meeste CMS systemen, zoals Joomla en Wordpress, zijn er ook plug-ins om dit te doen.
Voorbeeldcode
Met de onderstaande code kun je een video automatisch laten afspelen op mobiel én desktop.
1
2
3
4
5
6
7
<a href="https://example.com" target="_blank">
<video autoplay loop playsinline muted width="100%">
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
<p>Je browser ondersteunt geen HTML5 video</p>
</video>
</a>
Stap voor stap uitleg van de voorbeeldcode
1
<a href="https://example.com" target="_blank">
Je kunt aan de video een link toevoegen; als de bezoeker op de video klikt dan linkt deze door naar een website die je hebt opgegeven. Je kunt dit dus goed gebruiken om door te linken naar de viditour. Vervang https://example.com
door de link naar de viditour.
2
<video autoplay loop playsinline muted width="100%">
autoplay
zorgt ervoor dat de video automatisch gestart wordt.
loop
zorgt ervoor dat de video opnieuw start nadat deze aan het einde is gekomen. Bij een ronddraaiend panorama krijg je zo een naadloze overgang naar een nieuwe ronde.
playsinline
zorgt ervoor dat de video in de pagina geladen wordt in plaats van in een nieuw (pop-up)venster. Dit is noodzakelijk om video’s in een pagina te laten afspelen op bijvoorbeeld een iPhone. Verouderde browsers ondersteunen deze functie niet.
muted
zorgt ervoor dat de video wordt afgespeeld zonder geluid. Dit is vanuit de meeste browsers een vereiste om video’s automatisch af te laten spelen.
width="100%"
zorgt ervoor dat de video de pagina vult (of het element op de pagina waarin de video geplaatst is) over de volledige breedte.
Wil je een of meerdere bovenstaande functies niet gebruiken, laat dan het betreffende woord weg uit de code.
3
4
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
Niet alle browsers ondersteunen elk formaat video. Het is daarom belangrijk om verschillende bestandsformaten aan te bieden. Bij source src=
specificeer je de locaties van de video en de bestandstypes. De browser houdt vervolgens die volgorde aan. In het bovenstaande voorbeeld zal de browser eerst het het webm bestand en vervolgens het mp4 bestand proberen af te spelen. Bekijk hier een handige tabel met browserondersteuning
5
<p>Je browser ondersteunt geen HTML5 video</p>
Deze tekst wordt getoond aan bezoekers die een verouderde browser gebruiken en daarom de video niet af kunnen spelen.
Video met controls
In sommige situaties wil je de video misschien niet vanzelf laten starten. Of je wilt de bezoeker zelf de mogelijkheid geven om de video te pauzeren of door te spoelen.
Voorbeeldcode met controls
Met de onderstaande code kun je een video met controls weergeven op mobiel én desktop.
1
2
3
4
5
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
<p>Je browser ondersteunt geen HTML5 video</p>
</video>
Stap voor stap uitleg voorbeeldcode met controls
2
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.
poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
Met de onderstaande code kun je een video automatisch laten afspelen op mobiel én desktop.
|
|
Stap voor stap uitleg van de voorbeeldcode
1
<a href="https://example.com" target="_blank">
Je kunt aan de video een link toevoegen; als de bezoeker op de video klikt dan linkt deze door naar een website die je hebt opgegeven. Je kunt dit dus goed gebruiken om door te linken naar de viditour. Vervang https://example.com
door de link naar de viditour.
2
<video autoplay loop playsinline muted width="100%">
autoplay
zorgt ervoor dat de video automatisch gestart wordt.
loop
zorgt ervoor dat de video opnieuw start nadat deze aan het einde is gekomen. Bij een ronddraaiend panorama krijg je zo een naadloze overgang naar een nieuwe ronde.
playsinline
zorgt ervoor dat de video in de pagina geladen wordt in plaats van in een nieuw (pop-up)venster. Dit is noodzakelijk om video’s in een pagina te laten afspelen op bijvoorbeeld een iPhone. Verouderde browsers ondersteunen deze functie niet.
muted
zorgt ervoor dat de video wordt afgespeeld zonder geluid. Dit is vanuit de meeste browsers een vereiste om video’s automatisch af te laten spelen.
width="100%"
zorgt ervoor dat de video de pagina vult (of het element op de pagina waarin de video geplaatst is) over de volledige breedte.
Wil je een of meerdere bovenstaande functies niet gebruiken, laat dan het betreffende woord weg uit de code.
3
4
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
Niet alle browsers ondersteunen elk formaat video. Het is daarom belangrijk om verschillende bestandsformaten aan te bieden. Bij source src=
specificeer je de locaties van de video en de bestandstypes. De browser houdt vervolgens die volgorde aan. In het bovenstaande voorbeeld zal de browser eerst het het webm bestand en vervolgens het mp4 bestand proberen af te spelen. Bekijk hier een handige tabel met browserondersteuning
5
<p>Je browser ondersteunt geen HTML5 video</p>
Deze tekst wordt getoond aan bezoekers die een verouderde browser gebruiken en daarom de video niet af kunnen spelen.
Video met controls
In sommige situaties wil je de video misschien niet vanzelf laten starten. Of je wilt de bezoeker zelf de mogelijkheid geven om de video te pauzeren of door te spoelen.
Voorbeeldcode met controls
Met de onderstaande code kun je een video met controls weergeven op mobiel én desktop.
1
2
3
4
5
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
<p>Je browser ondersteunt geen HTML5 video</p>
</video>
Stap voor stap uitleg voorbeeldcode met controls
2
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.
poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
|
|
Je kunt aan de video een link toevoegen; als de bezoeker op de video klikt dan linkt deze door naar een website die je hebt opgegeven. Je kunt dit dus goed gebruiken om door te linken naar de viditour. Vervang https://example.com
door de link naar de viditour.
|
|
autoplay
zorgt ervoor dat de video automatisch gestart wordt.loop
zorgt ervoor dat de video opnieuw start nadat deze aan het einde is gekomen. Bij een ronddraaiend panorama krijg je zo een naadloze overgang naar een nieuwe ronde.playsinline
zorgt ervoor dat de video in de pagina geladen wordt in plaats van in een nieuw (pop-up)venster. Dit is noodzakelijk om video’s in een pagina te laten afspelen op bijvoorbeeld een iPhone. Verouderde browsers ondersteunen deze functie niet.muted
zorgt ervoor dat de video wordt afgespeeld zonder geluid. Dit is vanuit de meeste browsers een vereiste om video’s automatisch af te laten spelen.width="100%"
zorgt ervoor dat de video de pagina vult (of het element op de pagina waarin de video geplaatst is) over de volledige breedte.
Wil je een of meerdere bovenstaande functies niet gebruiken, laat dan het betreffende woord weg uit de code.
|
|
Niet alle browsers ondersteunen elk formaat video. Het is daarom belangrijk om verschillende bestandsformaten aan te bieden. Bij source src=
specificeer je de locaties van de video en de bestandstypes. De browser houdt vervolgens die volgorde aan. In het bovenstaande voorbeeld zal de browser eerst het het webm bestand en vervolgens het mp4 bestand proberen af te spelen. Bekijk hier een handige tabel met browserondersteuning
|
|
Deze tekst wordt getoond aan bezoekers die een verouderde browser gebruiken en daarom de video niet af kunnen spelen.
Video met controls
In sommige situaties wil je de video misschien niet vanzelf laten starten. Of je wilt de bezoeker zelf de mogelijkheid geven om de video te pauzeren of door te spoelen.
Voorbeeldcode met controls
Met de onderstaande code kun je een video met controls weergeven op mobiel én desktop.
1
2
3
4
5
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
<p>Je browser ondersteunt geen HTML5 video</p>
</video>
Stap voor stap uitleg voorbeeldcode met controls
2
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.
poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
In sommige situaties wil je de video misschien niet vanzelf laten starten. Of je wilt de bezoeker zelf de mogelijkheid geven om de video te pauzeren of door te spoelen.
Voorbeeldcode met controls
Met de onderstaande code kun je een video met controls weergeven op mobiel én desktop.
1
2
3
4
5
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
<source src="https://example.com/film.webm" type="video/webm">
<source src="https://example.com/film.mp4" type="video/mp4">
<p>Je browser ondersteunt geen HTML5 video</p>
</video>
Stap voor stap uitleg voorbeeldcode met controls
2
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.
poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
Met de onderstaande code kun je een video met controls weergeven op mobiel én desktop.
|
|
Stap voor stap uitleg voorbeeldcode met controls
2
<video controls poster="https://example.com/film.jpg" playsinline muted width="100%">
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.
poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
|
|
controls
zorgt ervoor dat er buttons op de video worden geplaatst waarmee de gebruiker zelf de video kan starten, pauzeren, doorspoelen etc. Als deze controls aanstaan, kan de video niet meer als klikbare link naar een andere website gebruikt worden.poster=
geeft aan welk beeld uit de video je als startbeeld wilt weergeven.
De andere functies werken hetzelfde als in het vorige voorbeeld zonder controls. De uitleg hierover kun je bij het vorige voorbeeld terugvinden.
Tot slot
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
Door video’s automatisch te laten afspelen kun je voor een hoge attentiewaarde zorgen. Houdt er wel rekening mee dat filmpjes redelijk grote bestanden zijn waardoor je site minder snel inlaadt. Zorg er daarom voor dat je de filmpjes zo efficiënt mogelijk en op de juiste resolutie opslaat.
Gebruik je een video die wij speciaal voor dit doel bij je hebben aangeleverd, dan is deze al geoptimaliseerd voor dit gebruik.
Over de auteur
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
Redmar is beeldmaker bij Viditour en tevens verantwoordelijk voor de technische realisatie van de viditours en alles daaromheen. Wil je op de hoogte blijven van nieuwe artikelen en projecten? Volg ons via Linkedin en/of Facebook.
Tips, vragen, aanvullingen of verbeteringen op dit artikel?
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl
We zouden het heel leuk vinden om deze van je te horen! Je kunt ons bellen: 0165 820 227 of rechtstreeks mailen: info@viditour.nl