220 likes | 369 Views
HTML5 video, audio , canvas. Mirja Jaakkola. 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)
E N D
HTML5video, audio, canvas Mirja Jaakkola
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
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" preloadcontrolsposter="kuva.png"/> ICT1TN004
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" /> <sourcesrc="video.ogv" type="video/ogg"/></video> • Lisätietoa videosta ja selain tuesta: • http://blog.assortedgarbage.com/2010/10/html5-video-another-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
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. <audiocontrols> <source="musa.mp3"type="audio/mpeg" > <source="musa.ogg" type="audio/ogg"> </audio> ICT1TN004
Audio linkkejä • Tehosteääniä löydät esim. ylen tehoste-arkistosta (mp3-muoto):http://tehosto.yle.fi • Firefoxiavarten 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
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
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
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
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
Koodi punaiselle kolmiolle • Voit jatkaa viivan piirtämistä kuvioksi lisäämällä lineTo-lauseita <canvas id= "pohja" width="400" height="300"></canvas> <script> varkonteksti = 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
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
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
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
Belize-käyrä • Malli: context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); • esim. canvasid="kurvi" width="400" height="200"></canvas> <script> varcanvas = 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
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
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
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
Kuvan lataus • konteksti.drawImage(kuva, 10, 50); • Esim. <canvasid="kuvat" width="300" height="345"></canvas><script>varcanvas = 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
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';vari=50; varaika;functionliike(){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
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/ ICT1TN004