Ääni- ja videotiedostojen lisääminen Website Builder -sivustolle koodin avulla

Sen lisäksi, että ääni- ja videotiedostoja voi lisätä Website Builder -sivustolle widgeteillä, niitä voi lisätä myös HTML-koodin ja koodikomponentin avulla. Tässä oppaassa kerromme, miten se onnistuu.

• Vaihe 1 - Lataa ääni- tai videotiedosto verkkotilaasi
• Vaihe 2 - Avaa Website Builder
• Vaihe 3 - Upota koodi Website Builderiin
• Vaihe 4 - Tallenna ja julkaise

Huomaa: Koodikomponentti on Website Builder Premium- ja Business + Verkkokauppa -pakettien ominaisuus. Jos käytät tällä hetkellä Starter-pakettia, voit päivittää sen suurempaan, tai vaihtoehtoisesti käyttää Youtube-widgettiä. 

Vaihe 1 - Lataa ääni- tai videotiedosto verkkotilaasi

Lataa ensin ääni- tai videotiedosto verkkotilaasi File Managerin tai FTP:n avulla. Äänen on oltava mp3-muodossa ja videon mp4-muodossa.

1. Kirjaudu sisään one.com-ohjauspaneeliin.
2. Avaa File Manager otsikon Tiedostot ja suojaus alta.
3. Napsauta + Lataa ja valitse ääni- (mp3) tai videotiedosto (mp4), jonka haluat upottaa sivustoosi.
4. Kopioi tiedoston koko polku ja liitä se tekstitiedostoon, jotta voit käyttää sitä myöhemmin.

Vaihe 2 - Avaa Website Builder

1. Avaa Website Builder.
2. Napsauta vasemmalla olevasta komponenttivalikosta Widgetit.
3. Vieritä alaspäin ja valitse Koodi.

Vaihe 3 - Upota koodi Website Builderiin

1. Kopioi yksi alla olevista koodiesimerkeistä ja liitä se Website Builderin koodikomponenttiin.
2. Korvaa FULL PATH koodiesimerkissä ääni- tai videotiedostosi täydellisellä polulla.
3. Napsauta Tallenna-painiketta.

Valitse jokin alla olevista esimerkeistä tai luo oma koodisi käyttämällä HTML <audio> -tagia ja HTML <video> -tagia. Muista korvata FULL PATH ääni- tai videotiedoston koko polulla.

Audio:

Upota mp3-äänitiedosto:

<audio controls>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Upota mp3-äänitiedosto, jonka toisto alkaa automaattisesti:

<audio controls autoplay>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Huomaa: Jotkin selaimet rajoittavat äänen tai videon automaattista toistoa, vaikka olisit lisännyt sen koodiin.

Video:

Upota mp4-videotiedosto:

<video width="640" height="480" controls>
<source src="FULL PATH" type="video/mp4">
</video>

Upota mp4-videotiedosto, jonka toisto alkaa automaattisesti:

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

Vinkki: Videon oletuskoko on 640x480. Voit muuttaa kokoa muuttamalla koodissa olevia leveys- ja korkeuslukuja. Voit myös sovittaa videon koon katsojan näytön mukaan muuttamalla leveyden arvoksi "100%" (width="100%") ja korkeuden arvoksi "auto" (height="auto").

Vaihe 4 - Tallenna ja julkaise

1. Komponentti on nyt lisätty työtilaasi. Vedä komponentti siihen kohtaan, jossa sen pitäisi sijaita sivustossasi.
2. Napsauta esikatselua tarkistaaksesi, näkyykö komponentti oikein.
3. Jos kaikki on kunnossa, napsauta Tallenna ja julkaise, jotta muutokset näkyvät verkossa.

Vinkki: Lisää sivustoosi laatikko-komponentti, jonka mitat ovat samat kuin videon, ja kiinnitä koodikomponentti laatikkoon. Sen avulla äänen tai videon paikkaa on helpompi hallita. Videon koko määräytyy HTML-koodin korkeuden ja leveyden mukaan.

Aiheeseen liittyviä artikkeleita:

• Mitä säilökomponentilla voi tehdä?
• Mobiilinäkymäeditorin käyttö Website Builderissä