1 / 21

HTML5 video, audio , canvas

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)

malachi-lindsey
Download Presentation

HTML5 video, audio , canvas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5video, 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" preloadcontrolsposter="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" /> <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

  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. <audiocontrols> <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 • 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

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

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

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

  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';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

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

More Related