Audio en video toevoegen aan je Website Builder-site met behulp van code

Naast het gebruik van een van onze vele widgets kun je in Website Builder ook audio en video aan je site toevoegen met HTML en de codecomponent. In deze handleiding leggen we uit hoe dat werkt.

• Stap 1 - Upload het audio- of videobestand naar je webruimte
• Stap 2 - Open Websitebouwer
• Stap 3 - Voeg de code toe in Website Builder
• Stap 4 - Opslaan en publiceren

Opmerking: De codecomponent is een functie van Website Builder Premium en Business + E-commerce. Als je momenteel Starter gebruikt, kun je je abonnement upgraden of in plaats daarvan de widget YouTube gebruiken. 

Stap 1 - Upload het audio- of videobestand naar je webruimte

Upload eerst je audio- of videobestand naar je webruimte via Bestandsbeheer of FTP. Audiobestanden moeten in mp3-formaat zijn en videobestanden in mp4.

1. Log in op het one.com-configuratiescherm.
2. Open Bestandsbeheer onder Hosting-instellingen in het menu aan de linkerkant.
3. Klik op + Uploaden en selecteer het audio- (mp3) of videobestand (mp4) dat je in je site wilt insluiten.
4. Kopieer het volledige pad van je bestand en plak het in een tekstbestand voor later gebruik.

Stap 2 - Open Websitebouwer

1. Open Website Builder.
2. Klik op Widgets in het componentmenu aan de linkerkant.
3. Scroll naar beneden en selecteer Code.

Stap 3 - Voeg de code toe in Website Builder

1. Kopieer een van de onderstaande codevoorbeelden en plak deze in het codevak in Website Builder.
2. Vervang FULL PATH in het codevoorbeeld door het volledige pad naar je audio- of videobestand.
3. Klik op Opslaan.

Kies een van de onderstaande voorbeelden, of maak je eigen code met de tag hrefhttps://www.w3schools.com/tags/tag_audio.asphrefHTML <audio> en de tag hrefhttps://www.w3schools.com/tags/tag_video.asphrefHTML <video>. Vergeet niet om FULL PATH te vervangen door het volledige pad naar je audio- of videobestand.

Audio:

Een mp3-audiobestand insluiten:

<audio-bedieningselementen>
<source src="VOLLEDIG PAD" type="audio/mpeg">
</audio>

Een mp3-audiobestand insluiten dat automatisch begint af te spelen:

<audio controls autoplay>
<source src="VOLLEDIG PAD" type="audio/mpeg">
</audio>

Opmerking: Sommige browsers beperken het automatisch afspelen van audio of video, zelfs als je dit aan je code hebt toegevoegd.

Video:

Een mp4-videobestand insluiten:

<video width="640" height="480" controls>
<source src="VOLLEDIG PAD" type="video/mp4">
</video>

Een mp4-videobestand insluiten dat automatisch wordt afgespeeld:

<video width="640" height="480" controls autoplay>
<source src="VOLLEDIG PAD" type="video/mp4">
</video>

Tip: De standaardafmetingen van de video zijn 640x480. Je kunt de afmetingen aanpassen door de getallen voor de breedte en hoogte in de code te wijzigen. Je kunt de video ook aanpassen aan het scherm van de kijker door de breedte in te stellen op "100%" (width="100%") en de hoogte op "auto" (height="auto").

Stap 4 - Opslaan en publiceren

1. Het onderdeel is nu aan je werkruimte toegevoegd. Sleep het onderdeel naar de plek op je site waar het bestand moet komen te staan.
2. Klik op Voorbeeld om te kijken of het eruitziet zoals je wilt.
3. Als alles in orde is, klik je op ‘Opslaan en publiceren’ om je wijzigingen online zichtbaar te maken.

Tip: Voeg een box-component toe aan je site met dezelfde afmetingen als je video en koppel de codecomponent aan het vak. Zo kun je de plaatsing van de audio of video makkelijker regelen. De grootte van de video wordt bepaald door de hoogte en breedte in de HTML-code.

Gerelateerde artikelen:

• What kan ik een containercomponent gebruiken?
• De Mobiele weergave-editor in Website Builder gebruiken