HTML5 Multimedia. Produktion för Webb och Multimedia

Transkript

1 HTML5 Multimedia Produktion för Webb och Multimedia

2 Varför ska ni använda HTML5 för multimedia? HTML5 kommer att bli nästa multimediastandard Appar behövs för att köra flash på iphone, ipad HTML5 kommer ersätta Flash Koden är renare och lättare Jämfört med HTML4.01 och JavaScript Ingen plug-in behövs Som t.ex. Java behöver

3 Multimedia i HTML5 <video> <audio> <embed> <canvas> <svg> drag och drop geolocation

4 <video> <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <video>... </ video> Definierar en video Attribut AutoPlay = "Spela upp automatiskt Videon börjar spelas så snart som den är laddad controls = " controls Kontroller visas vid videon loop = "loop Loopar videon preload = "auto metadata none Bestämmer hur videon laddas och om den ska laddas direkt när sidan laddas src = "url Anger adressen till videon om den finns på en webbplats

5 <video> Attribut mute = mute Anger om ljudet ska stängasav automatiskt poster= src Anger bild som ska visas tills användaren klickar på Playknappen height = "bildpunkter Anger videons höjd width = "bildpunkter Anger videons bredd

6 <audio> <audio>... </audio> Definierar en ljudfil Attribut AutoPlay = "Spela upp automatiskt Ljudet börjar spela så snart som det är färdigladdat controls = " controls Kontroller visas vid ljudklippet loop = "loop Loopar ljudfilen preload = "auto metadata ingen Bestämmer hur ljudet ska laddas och om det ska laddas direkt när sidan laddas src = "url Anger mediefilens adress om den finns på en webbplats

7 Allmän media <source /> Ange flera medieresurser/medieelement Attribut Media = "media_query Anger typ av media src = "url Anger adressen till mediaobjektet type = "MIME_type Anger MIME-typ för mediaobjektet

8 <embed> Kan användas för att bädda in externa applikationer eller interaktiv multimedia <embed src= flashfilm.swf"> <embed type="video/quicktime" src= teknikhuset.mov" style="width:100%;"> bed_tag.cfm

9 <embed> src Vilken fil som används alternativt adress till filen type Vilken sorts fil det är height = "bildpunkter Anger objektets höjd width = "bildpunkter Anger objektets bredd

10 <canvas> Rita grafik via skript (vanligtvis JavaScript) Enbart en container för grafik Skript används för själva grafiken Det finns metoder för att rita enkla figurer Linjer, lådor, cirklar, tecken, lägga till bilder

11 <canvas> Skapa en canvas: Width Height Style id Border Behövs för att kunna rita i rätt område ( canvasdemo0 )

12 getcontext("2d") HTML5-objekt med egenskaper och metoder för att rita enkla objekt och lägga till bilder Används för att komma åt ytan i canvaselementet ( canvasdemo1 )

13 Skapa flera canvas använd id: <script> </script> function leftcanvas() { var c1=document.getelementbyid("mycanvas1"); var ctx=c1.getcontext("2d"); ctx.fillstyle="#ff0000"; ctx.fillrect(0,0,100,50); } function rightcanvas() { var c2=document.getelementbyid("mycanvas2"); var ctx=c2.getcontext("2d"); ctx.fillstyle="#0000ff"; ctx.fillrect(0,50,100,100); } ( canvasdemo2 )

14 Rita : beginpath() Börja rita closepath () Skapar en linje mellan aktuell punkt och startpunkten moveto() Flytta till punkt lineto() Rita linje till punkt arc() Skapar en båge/kurva/cirkel arcto() Rita en båge stroke() Rita ut allt på canvas-objektet fill () Fyller objektet med färg Färgegenskaper : fillstyle Objektets färg, övertoning eller ett mönster strokestyle Färg, övertoning eller mönster som används för kantlinjen shadowcolor Färg på skuggor shadowblur Skuggornas oskärpa (utsuddning) shadowoffsetx Horisontellt avstånd mellan skugga och objekt shadowoffsety Vertikalt avstånd mellan skugga och objekt canvasdemo3.html, canvasdemo9.html, canvasdemo10.html canvasdemo4.html, canvasdemo5.html, canvasdemo6.html

15 Linjeegenskaper linecap Still på hörnen linejoin Typ av hörn som används mellan två linjer linewidth Linjebredd miterlimit Det maximala mitervärdet Rektanglar (Lådor) rect () Skapa en rektangel fillrect () Rita en "fylld" rektangeln strokerect () Rita en rektangel utan fyllning clearrect Radera angivna pixlar i en given rektangel canvasdemo7.html

16 Transformationer scale() rotate() Skala om bilden Rotera bilden translate() Flytta position för bilden Flyttar egentligen (0,0) till ett annat ställe på canvas-objektet transform() Ersätter transformationsmatrisen för det aktuellaobjektet settransform() Nollställ transformationsmatrisen och kör transform() canvasdemo12.html Textfunktioner font Teckensnitt textalign Textjustering textbaseline Baslinje för text filltext () Fylld text stroketext () Enbart textkonturer measuretext () Mät textens bredd canvasdemo12.html

17 Bildfunktioner drawimage () Rita upp en bild eller video på canvas-objektet createimagedata () Skapa ett tomt bildobjekt (imagedata objekt) getimagedata () Hämta ett bildobjekt från ett angivet område på canvas-objektet putimagedata () Rita ett bildobjekt på ett angivet område på canvas-objektet Pixeloperationer width Ta reda på bildobjektets bredd height Ta reda på bildobjektets höjd data Hämta bilddata för ett bildobjekt

18 Övriga funktioner globalalpha Bildens alpha-värde globalcompositeoperation save() Hur ritas en ny bild ovanpå en gammal? Spara den aktuella bildens utseende i minnet restore() Återgå till den sparade bilden todataurl() Spara bilden som fil canvasdemo14.html

19 Animation i canvas function animate(){ pattern.src = 'us.jpg'; setinterval(drawshape, 100); } function drawshape() <body onload="animate();"> <canvas id="mycanvas" width="500 height="500"> </canvas> animationdemo.html

20 <svg> Scalable Vector Graphics SVG används för att definiera vektorbaserad grafik för webben SVG definierar grafiken i XML-format SVG-grafik förlorar inte kvalitet om de zoomas eller skalas Varje del och varje attribut i SVG kan animeras

21 <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>

22 Skillnader mellan canvas och svg SVG är ett språk för att beskriva 2D-grafik i XML Canvas ritar 2D-grafik med Javascript SVG är XML-baserad, vilket innebär att varje element är tillgängligt inom SVG DOM I SVG är varje ritad form ett objekt. Om attributen för ett SVG-objekt ändras kan webbläsaren automatiskt rita om objektet Canvas ritar grafik pixel för pixel Pixelbaserat (bitmappat) Om positionen ska ändras måste hela scenen ritas igen Även sånt som har täckts av bilden

23 Skillnader mellan canvas och svg Canvas Upplösningsberoende Inget stöd för händelsehantering Den ritade bilden kan sparas (.png eller.jpg) SVG UpplösningsOberoende Stöd för händelsehanterare

24

25 Drag/drop Flytta objekt och lämna det inom ett visst område Räknar som multimedia eftersom det är interaktivt Vilket objekt som helst kan vara flyttbart Text, bild, grafik, osv.

26 demo

27 Geolocation Position Liknande GPS men inte lika exakt Kan enkelt användas med en karta getcurrentposition() Ger den aktuella positionen watchposition() Ger kontinuerlig position clearwatch() Avslutar watchposition()

28 Geolocation coords.latitude Latitiud coords.longitude Longitud coords.accuracy Nogrannhet coords.altitude Altitud (höjd) coords.altitudeaccuracy Nogrannhet för höjden coords.heading Riktning coords.speed Hastighet timestamp Tid för mätningen

29 Infogad ram Kallas också flytande ram Bäddar in en webbsida i en annan sida i ett scrollbart område Ett av sätten att bädda in video från YouTube <iframe>... </ iframe> <iframe src=" width="640" height="385"> Visa <a href=" videon från YouTube</ a> </ iframe>