HTML5 video, audio, canvas

Esitys aiheesta: "HTML5 video, audio, canvas"— Esityksen 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 Perustuu Applen Quicktime-formaattiin. Tuki IE9, Safari, Opera (Linux) Tiedostopäätteenä yleensä .mov, .mp4 tai .m4v Ogg 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 Flash Flashin oma tiedostoformaatti, vaatii selaimeen plug-in. Tiedostomuoto .flv tai uudempi .f4v WebM Uusi googlen kehittä formaatti. Tuki tulossa: Chome, Firefox, Opera Tiedostomuoto .webm ICT1TN004

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"/> ICT1TN004

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: ICT1TN004

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> ICT1TN004

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: ICT1TN004

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). ICT1TN004

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ä ICT1TN004

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); ICT1TN004

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(); ICT1TN004

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> ICT1TN004

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> ICT1TN004

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); ICT1TN004

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); </script> ICT1TN004

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> ICT1TN004

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: var liukuvari=konteksti.createRadialGradient(70,100,50,70,100,10); liukuvari.addColorStop(0,"#000"); liukuvari.addColorStop(1,"#fcc"); konteksti.fillStyle=liukuvari; ICT1TN004

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); ICT1TN004

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); ICT1TN004

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> ICT1TN004

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> ICT1TN004

21 Canvas lähteitä Esimerkkejä: http://www.canvasdemos.com/ Tutoriaaleja:
Piirtoalustoja: Esimerkki canvas-kirjastosta: Liekehtivä teksti löytyy osoitteesta: ICT1TN004