4.9 Videot ja animaatiot
Videot ja animaatiot
Verkkosivuille voidaan linkittää tai luoda videosisältöä. Usein elementeissä on myös erilaisia animaatioita, joita voidaan toteuttaa esimerkiksi CSS-koodauksella.
Videosisältö
Videosisältö kannattaa tavallisesti tuoda (embed) sivuille esimerkiksi Youtubesta. Videotiedostojen koko vie helposti palvelimelta tilaa ja kuormittavat turhaa palvelinta. Jos kuitenkin haluat näyttää videoklipin sivustolla lataamalla sen palvelimelle, tarvitset videosta kaksi tiedostomuotoa, joska Opera-selain ei tue mp4-videotiedostomuotoa. Mp4-videotiedostoa tukevat kaiki muut selaimet mutta Operan tiedostomuoto on .Ogg.
WordPressiin löytyy lukuisia lisäosia, joiden avulla voi sivustoille tuoda videosisältöä, joko yksittäisen videon muodossa tai luoda sivulle videogallerian, joka sisältää useita videoita Vimeosta, Youtubesta.
Oman Youtube-kanavan sisällön jakaminen sivustoilla käy kätevästi lisäosan avulla. Ohessa lisäosan avulla jaettu Youtube kanavan sisältöä klikattavien videoiden muodossa. Myös yksittäisten videoiden jakamiseen löytyy luonnollisesti useita käteviä lisäosia.
Cannot collect videos from this channel. Please make sure this is a valid channel ID.
Videon upottaminen (harjoitus)
Youtube-video voidaan luonnollisesti upottaa sivulle myös ilman lisäosaa, sillä Youtuve tarjoaa mahdollisuuden generoita ns. embed koodin. Embed-koodi löytyy Youtuben videon jaa-valikosta valinnan Upota-kohdasta (Embed). Harjoitellaan videon upottamista sivulle ilman lisäosaa. Valitse jokin video Youtubesta ja hae leikepöydälle videon embed-koodi. Liitä se sivulle sopivalla sivueditorin elementillä. Jos käytät editoria tavallinen tekstibokki soveltuu erittäin hyvin. Editoreissa on usein myös html-koodin lisäämiseen tarkoitettu elementti. Jos käytät WordPressin classic-editoria, lisää koodi editorin Teksti-puolelle. Sama koskee luonnollisesti myös Tekstiblokkeja editoreissa.
Upota-valikossa on painikkeiden alla myös videon osoite (kuvassa https://youtu.be/x3S2Oz1cVvU), jota voidaan käyttää linkkinä videon sivulle. Varsinaisen upotuskoodin saa esiin painamalla Upota-painiketta ja avautuvassa ikkunassa löytyy upetukseen tarvittava html-koodi. Kopioidaan siis upotuskoodi ja liitetään se haluamaan kohtaan sivustolla.
Upota video-näkymässä voit tarkastella myös muita asetuksia videolle. Voit määrittää mistä kohdasta video alkaa Aloitusaika-kohdasta tai valita näytetäänkö videon ohjaimet sivulla. Videon koko on koodissa määritelty oletuksena leveys (width) 560px ja korkeus (height) 315px. Arvoja voi muuttaa koodiin mutta koska kyseessä on html-koodiin muokattavat arvot tulee molemmat arvot asettaa. Lisäksi arvot tulee olla oikeassa kuvasuhteessa, jotta videokuva ei vääristy. Videon koon voi määrittää myös CSS-muotoilulla, jolloin poistetaan koon määritykset html-koodista ja lisätään CSS-luokka koodiin ja asetetaan CSS-tiedostossa videon leveys. CSS-määrittelyssä on se etu, että korkeus määrittyy automaattisesti ja voimme käyttää määritteenä myös prosentuaalisia arvoja.
Koodimuutokset kannattaa luonnollisesti lisätä vasta WordPressin puolella eikä Upota video-kohdassa Youtubessa.
Video palvelimella
Jos aiot kuitenkin käyttää videoa suoraan omalta palvelimelta videosta täytyy tehdä kaksi versioa. Mp4-videon voi muuntaa .ogg formaattiin verkossa esimerkiksi osoitteessa https://convertio.co/mp4-ogg/.
Kannattaa googlettaa palveluja, sillä niitä on verkossa useampia. Kun olet muuntanut videot, voit ladata ne WordPressin mediakirjastoon ja kopioida videon osoitteet koodiin. Video liitetään sivuille oheisenlaisella koodilla. Lisätietoja videon asettamisesta sivuille löytyy w3school -sivustolta
<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
Animaatiot painikkeissa ja elementeissä
Verkkosivun elementtejä, kuten painikkeita yms. voidaan myös animoida, jolloin verkkosivuun saadaan elävyyttä. Se, kuinka paljon liikkuvia elementtejä sivuille kannattaa laittaa, riippuu paljolti sivujen sisällön luonteesta. Liiallinen animointi sivustoilla saattaa myös tehdä sivustolla sekavan vaikutelman. Animointia tulee siis käyttää vain mausteena sopivissa määrin.
Animaatiot voidaan toteuttaa esimerkiksi animoituna gif-kuvana. Animoitu gif-kuva perustuu peräkkäisiin kuviin, joita näytetään peräkkäin nopeaan tahtiin. Näin katsojalle tulee vaikutelma liikkuvasta kuvasta. Animoidun gif-kuvan voi toteuttaa useilla kuvankäsittelyohjelmilla, kuten Photopea.
CSS animaatiot
Elementtejä voidaan animoida CSS:n avulla. CSS:llä toteutettua animointia käytetään sivustoilla suhteellisen paljon, sillä se säästää sivun latausaikaa verrattuna kuva-animaatioon. CSS-animaatiolla toteutettuja elementtejä on tarjolla verkossa todella paljon ja niitä voi kätevästi käyttää pohjina ja muokata ne omalle sivulle sopiviksi. Luonnollisesti muokaaminen vaatii ymmärrystä html- ja CSS-verkkokielistä.
Esimerkkilähteitä
