Ääni- ja videotiedostojen lisääminen Zoner Kotisivukone -sivustolle koodin avulla

Ääni- ja videotiedostoja voi Zoner Kotisivukoneessa lisätä kotisivuille widgettien lisäksi myös HTML-koodin ja koodikomponentin avulla. Tässä oppaassa kerromme, miten se onnistuu.

Huomaa: Koodikomponentti on Zoner Kotisivukoneen Premium- ja Business-pakettien ominaisuus. Jos käytät Starter-pakettia, voit päivittää sen suurempaan, tai vaihtoehtoisesti käyttää Youtube-widgettiä.

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. Avaa File Manager.
2. Napsauta + Lataa ja valitse ääni- (mp3) tai videotiedosto (mp4), jonka haluat upottaa sivulle.
3. Kopioi tiedoston koko polku ja liitä se talteen tekstitiedostoon, jotta voit käyttää sitä myöhemmin.

2. Lisää koodi-komponentti sivulle

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

3. Upota tiedoston koodi

1. Valitse ja kopioi yksi alla olevista koodiesimerkeistä ja liitä se Zoner Kotisivukoneen koodikomponenttiin.
2. Korvaa koodissa FULL PATH ääni- tai videotiedostosi koko 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.

Äänitiedosto:

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: Jotkut 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 640×480. Voit säätää kokoa muuttamalla koodissa olevia leveys- ja korkeuslukuja. Jos haluat sovittaa videon koon katsojan näytön mukaan, muuta leveyden arvoksi ”100%” (width=”100%”) ja korkeuden arvoksi ”auto” (height=”auto”).

4. Tallenna ja julkaise

1. Komponentti on nyt lisätty työtilaan. Vedä se haluamaasi kohtaan sivulla.
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.