Code gebruiken om audio en video toe te voegen aan een Website Builder site

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 code-component. In deze handleiding leggen we uit hoe.

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

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

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

Upload eerst het audio- of videobestand naar de webruimte met File Manager of FTP. Audio moet in mp3-formaat zijn en video in mp4.

1. Log in op het one.com Configuratiescherm.
2. Open File Manager op de tegel Bestanden & beveiliging.
3. Klik op + Uploaden en selecteer het audio- (mp3) of videobestand (mp4) dat je in de site wilt insluiten.
4. Kopieer het volledige pad van het bestand en plak deze in een tekstbestand voor later gebruik.

Stap 2 - Open Website Builder

1. Open Website Builder.
2. Klik op Widgets in het menu met componenten aan de linkerkant.
3. Scrol naar beneden en selecteer Code.

Stap 3 - Sluit de code in Website Builder in

1. Kopieer een van de onderstaande codevoorbeelden en plak deze in de code-component in Website Builder.
2. Vervang VOLLEDIG PAD in het codevoorbeeld door het volledige pad naar het audio- of videobestand.
3. Klik op Opslaan.

Kies een van de onderstaande voorbeelden of maak je eigen code met de HTML <audio> tag en HTML <video> tag. Vergeet niet VOLLEDIG PAD te vervangen door het volledige pad naar het audio- of videobestand.

Audio:

Een mp3-audiobestand insluiten:

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

Een mp3-audiobestand insluiten dat automatisch begint met afspelen:

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

Let op: 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 begint met afspelen:

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

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

Stap 4 - Opslaan en publiceren

1. De component is nu toegevoegd aan de werkruimte. Sleep de component naar de plek waar het bestand op de site moet staan.
2. Klik op Voorbeeld om te controleren of het eruit ziet zoals je wilt.
3. Als alles goed is, klik je op Opslaan en Publiceren om de wijzigingen online zichtbaar te maken.

Tip: Voeg een container-component toe aan de site met dezelfde afmetingen als de video en voeg de code-component toe aan de container. Dit maakt de plaatsing van de audio of video gemakkelijker te beheren. De grootte van de video wordt bepaald door de hoogte en breedte in de HTML-code.

Gerelateerde artikelen:

• Waarvoor kan ik een container-component gebruiken?
• De editor voor Mobiele weergave in Website Builder gebruiken