HTML5 video, audio, canvas. Mirja Jaakkola

Transkriptio

1 HTML5 video, audio, canvas Mirja Jaakkola

2 Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu Applen Quicktime-formaattiin. Tuki IE9, Safari, Opera (Linux) Tiedostopäätteenä yleensä.mov,.mp4 tai.m4v Open Source, jota tuetaan Linux:ssa. Windows ja Mac-käyttäjät voivat asentaa tarvittavan koodekin. Firefox, Chrome ja Opera tukee Tiedostopäätteenä.ogv tai.ogx Flashin oma tiedostoformaatti, vaatii selaimeen plug-in. Tiedostomuoto.flv tai uudempi.f4v WebM Uusi googlen kehittä formaatti. Tuki tulossa: Chome, Firefox, Opera Tiedostomuoto.webm 2

3 Videon liittäminen webbisivulle <video> -elementti liittää videon sivulle <video src="video.mp4"/> Videoon voidaan liittää attribuutteja: <video src="video.mp4" width="400" height="300" autoplay="autoplay"/> Controls-attribuutilla saat kontrollipainikkeet Loop-attribuutilla video toistuu automaattisesti Preload-attribuutilla videon voi ladata vaikkei haluttaisi käynnistää sitä automaattisesti Poster-attribuutti sijoittaa kuvan videon mustan ruudun tilalle, jos videota ei haluta käynnistää heti. <video src="video.mp4" preload controls poster="kuva.png"/> 3

4 Erilaiset videoformaatit Lisää eri videotiedostoja source-elementin avulla. Jotta video näkyisi toistettaessa muista käyttää oikeaa MIME-tyyppiä sourcen yhteydessä. Vanhoja selaimia varten voit liittää myös flash-videon sivulle (ei käsitellä tässä). <video width="400" height="300" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogv" type="video/ogg"/> </video> Lisätietoa videosta ja selain tuesta: Videon muuttaminen toiseen tiedostomuotoon: 4

5 Audio Audio-elementillä voit upottaa sivulle ääntä erikseen ilman videota <audio src="musa.mp3"/> Jos liität mukaan controls-attribuutilla kontrollit, alkaa esitys vasta kun sivulla olija haluaa käynnistää äänen Jos mukana on autoplay-attribuutti, käynnistyy esitys automaattisesti Eri selaimia varten kannattaa tarjota eri formaatteja, joista selain käyttää ensimmäiseksi tunnistamaansa. <audio controls> <source="musa.mp3" type="audio/mpeg" > <source="musa.ogg" type="audio/ogg"> </audio> 5

6 Audio linkkejä Tehosteääniä löydät esim. ylen tehoste-arkistosta (mp3-muoto): Firefoxia varten konvertoi äänet ogg-muotoon osoitteessa: ÄÄNIPÄÄ - ääni-ilmaisun ja äänikerronnan erikoissivut: 6

7 Canvas <canvas> on bitmap-tyyppinen objekti, jolle voidaan dynaamisesti tuottaa kuvia, graafeja, animaatiota, peligrafiikkaa Piirtoalueena toimii suorakaiteen muotoinen alue Piirtäminen perustuu javascript-funtioihin, jotka käyttävät Canvas API 2D-sovellusta kuvioiden, viivojen, siirtymien ja liukuvärien piirtämiseen <img>-elementtiin verrattuna suurin ero on se, että <canvas>elementissä voidaan muokata pikseleitä ja kuva voidaan tallentaa. Kaikki muut selaimet tukevat Canvas-elementtiä paitsi IE8 (IE9 tukee). 7

8 Canvas vertailua Canvas vrt. SVG SVG perustuu vektorigrafiikkaa ja on siksi skaalattavissa rajattomasti XML-kielinen tiedosto Canvas on bittikarttakuva, jota voi zoomata mutta ei skaalata Toteutetaan javascriptillä, joten voidaan toteuttaa animaatioita ja pelejä 8

9 Piirtäminen Canvas-elementillä Määritä ensin canvas-elementillä piirtoalustan koko: <canvas id= "pohja" width="400" height="300"></canvas> Seuraavaksi viitataan kontekstiolioon, johon piirtäminen tulee: var konteksti = document.getelementbyid("pohja").getcontext("2d"); Piirtämisessä käytetään koordinaatteja, jotka lähtevät vasemman yläkulman (0,0) pisteestä. Siirrä kursori moveto(x,y)- metodilla piirtämisen aloituskohtaan : konteksti.moveto(20,10); 9

10 Viivan piirtäminen Canvas-elementillä Määritä seuraavaksi viivan loppupiste lineto(x,y)- metodilla: konteksti.lineto(120,70); Määritä vielä viivalle väri: konteksti.strokestyle= "#f00"; Anna lopuksi stroke()-metodi viivan piirtämiseksi: konteksti.stroke(); 10

11 Koodi punaiselle kolmiolle Voit jatkaa viivan piirtämistä kuvioksi lisäämällä lineto-lauseita <canvas id= "pohja" width="400" height="300"></canvas> <script> var konteksti = document.getelementbyid("pohja").getcontext("2d"); konteksti.moveto(20,10); konteksti.lineto(120,70); konteksti.lineto(100,150); konteksti.lineto(20,10); konteksti.strokestyle= "#f00"; konteksti.stroke(); </script> 11

12 Silmukan hyödyntäminen Voit käyttää for-lausetta ja kasvattaa muuttujan arvoa. Esim. <canvas id= "pohja" width="400" height="300"></canvas> <script> var konteksti = document.getelementbyid("pohja").getcontext("2d"); konteksti.moveto(10,10); for(var i=10;i<200;i+=30){ konteksti.moveto(i,10); konteksti.lineto(i+30,30); konteksti.lineto(i+30,150); konteksti.lineto(i,10); } konteksti.strokestyle= "#f00"; konteksti.stroke(); </script> 12

13 Suorakulmio Suorakulmion piirtämiseen käytetään strokerect(x,y,leveys,korkeus) - metodia. konteksti.strokerect(20,10,80,60); Voit tehdä täytetyn (oletusväri musta) suorakulmion fillrect- metodilla. konteksti.fillrect(120,10,60,120); 13

14 Ympyrä & kaari Ympyrän ja kaaren saat arc(x, y, säde, alkukulma, loppukulma, kierto vastapäivään) -metodilla. Antamalla loppukulmalle arvon 2*Math.PI saat täyden ympyrän. linewidth määrittää viivan paksuuden beginpath-metodilla pystyt aloittamaan uuden ympyrän. Ilman tätä metodia piirrokseen tulee ympyrät yhdistävä viiva. konteksti.linewidth=10; konteksti.arc(70,100,50,0,2*math.pi,false); konteksti.stroke(); konteksti.beginpath(); konteksti.linewidth=1; konteksti.arc(70,100,20,0,2*math.pi,false); konteksti.stroke(); </script> 14

15 Belize-käyrä Malli: context.beziercurveto(controlx1, controly1, controlx2, controly2, endx, endy); esim. canvas id="kurvi" width="400" height="200"></canvas> <script> var canvas = document.getelementbyid('kurvi'); var konteksti = canvas.getcontext('2d'); konteksti.beginpath(); konteksti.moveto(150, 110); konteksti.beziercurveto(150, 20, 350, 20, 340, 180); konteksti.strokestyle = 'navy'; konteksti.linewidth = 5; konteksti.stroke(); </script> 15

16 Täyte Edellisen tehtävän ympyrän tai muun kuvion täytät fill-metodilla: konteksti.arc(70,100,50,0,2*math.pi,false); konteksti.stroke(); konteksti.fillstyle= #fcc ; konteksti.fill(); Liukuvärin saat määrittelemällä liukuvärin seuraavasti: konteksti.arc(70,100,50,0,2*math.pi,false); var liukuvari=konteksti.createradialgradient(70,100,50,70,100,10); liukuvari.addcolorstop(0,"#000"); liukuvari.addcolorstop(1,"#fcc"); konteksti.fillstyle=liukuvari; konteksti.fill(); 16

17 Liukuväri laatikkoon Linear-muotoisen liukuvärin saat seuraavasti: var liukuvari=konteksti.createlineargradient(70,100,50,70); liukuvari.addcolorstop(0,"#000"); liukuvari.addcolorstop(1,"#fcc"); konteksti.fillstyle=liukuvari; konteksti.fill(); konteksti.fillrect(20,50,50,70); 17

18 Teksti Voit lisätä tekstiä esim. laatikon sisälle: konteksti.strokerect(20,10,160,130); konteksti.font="26px Arial"; konteksti.filltext("kokeilua",30,50); konteksti.stroketext("kokeilua",30,100); 18

19 Kuvan lataus konteksti.drawimage(kuva, 10, 50); Esim. <canvas id="kuvat" width="300" height="345"></canvas> <script> var canvas = document.getelementbyid('kuvat'); var konteksti = canvas.getcontext('2d'); var kuva = new Image(); kuva.onload = function() { konteksti.drawimage(kuva, 10, 50); }; kuva.src = 'kuva.jpg'; </script> 19

20 Animaatio Suoraviivainen liike tehdään javascriptin ajastimen avulla. Alla olevassa esimerkissä setinterval(x,y) käynnistää funktion, jonka nimi on x:n paikalla, y:n ilmoittaman ajan kuluttua (millisekunnin). Ajastimen voi kumota komennolla clearinterval(z), missä z on ajastimen tunnistenimi. <canvas id= "pallo" width="400" height="200"> </canvas> <script> var konteksti = document.getelementbyid("pallo").getcontext("2d"); konteksti.fillstyle='#fcc'; var i=50; var aika; function liike(){ i++; if(i>100) {clearinterval(aika);} konteksti.clearrect(0,0,100,100); konteksti.beginpath(); konteksti.arc(i,50,15,0,2*math.pi,false); konteksti.fill();} aika=setinterval(liike,50); </script> 20

21 Canvas lähteitä Esimerkkejä: Tutoriaaleja: Piirtoalustoja: Esimerkki canvas-kirjastosta: Liekehtivä teksti löytyy osoitteesta: 21