HTML5video, audio, canvas

Mirja Jaakkola

ICT1TN004 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: http://blog.assortedgarbage.com/2010/10/html5-video-anothe

r-take/

http://camendesign.com/ Videon muuttaminen toiseen tiedostomuotoon:

http://video.online-convert.com/convert-to-ogg http://video.online-convert.com/convert-to-mp4

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):http://tehosto.yle.fi

Firefoxia varten konvertoi äänet ogg-muotoon osoitteessa: http://audio.online-convert.com/convert-to-ogg

ÄÄNIPÄÄ - ääni-ilmaisun ja äänikerronnan erikoissivut: http://www.aanipaa.tamk.fi/index.html

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);konteksti.stroke();</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:

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

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: http://www.canvasdemos.com/type/tutorials/ https://developer.mozilla.org/En/Canvas_tutorial http://www.html5canvastutorials.com/ Piirtoalustoja: http://www.canvasdraw.comuf.com/ http://mugtug.com/sketchpad/

Esimerkki canvas-kirjastosta: Liekehtivä teksti löytyy osoitteesta:

http://www.ponticstar.com/projects/burning-words/