HTML5 video, audio , canvas
-
Upload
malachi-lindsey -
Category
Documents
-
view
72 -
download
3
description
Transcript of HTML5 video, audio , canvas
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/