Multimedia Kirsten Ribu Hio Webpublisering LO130A 18.10.04 1
I dag Om lyd, animasjon og video og (X)HTML koden som trengs på sidene for å legge inn multimediafiler 2
Multimedia Gjør websidene dine mer levende med lyd, grafikk, animasjoner og videosnutter I dag er det lettere å legge til multimediaeffekter: båndbredden er større Nye teknologier: Flash og Shockwave 3
Shockwave 4
Flash dyr programvare 5
Plugins og spillere Brukerne ønsker å se tusenvis av ulike filer i nettleseren I stedet for å inkludere støtte for alle disse ulike filtypene finnes det programmer som viser MIME typen Feks spillere og plugins et hjelpeprogram 6
Å bruke multimedia på websiden Flere måter å gjøre det på: Som en enkel lenke, med <EMBED>-tagg, eller med <OBJECT>-taggen (denne taggen er en del av HTML 4, men ikke alle nettlesere støtter den) 7
Embed taggen Netscape lagde embed elementet Brukes sammen med en plugin et spesialprogram Gjør det mulig å vise multimediafiler i nettleservinduet Andre nettlesere som IE fulgte etter Netscape og la til støtte for embed taggen og plugins 8
W3C W3C la til object elementet Meningen var å lage en mer generell tag Det var tenkt som et kraftigere verktøy for å legge inn (embed) mutlimediafiler på websidene Microsoft utviklet Active X som støtter object elementet 9
OBJECT <OBJECT>...innhold... </OBJECT> Setter inn et objekt i HTML filen. Et objekt kan for eksempel være en javaapplett eller en multimediafil 10
Store filer Multimediafilene er store Synes å bli større med forbedret teknologi 10 sekunder med lyd av medium kvalitetet tar opp mer enn 200KB Det tar ett minutt å laste ned 10 sek med video i et lite vindu er omtrent 3 ganger større Tenk på dettte når du legger til multimediafiler på web-en din! 11
Eksempel på video http://www.cookwood.com/html5ed/exam ples/multimedia/madmax.html 12
Windows media player http://www.cookwood.com/html5ed/exampl es/multimedia/madma xwmp.html 13
Merk: Classid for mediaplayer Lag lyden eller videoen Skriv i HTML dokumentet: <object classid="clsid:22d6f312- B0F6-11D0-94AB-0080C74C7E95 codebase= http://activex.microsoft.com/activex /controls/mplayer/en/nsmp2inf.cab #Version=6,4,5,715> 14
Koden <html> <head> <title>madmax Movie</title> </head> <body> <object id="mediaplayer1" width="240" height="252" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/ controls/mplayer/en/nsmp2inf.cab#version=6,4, 5,715" 15
Forts... type="application/x-oleobject"> <param name="autostart" value="false"> <param name="filename" value="madmax.avi"> <param name="showcontrols" value="true"> <param name="showstatusbar" value="true"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/windows/media Player/" src="madmax.avi" width="240" height="252" autostart="0" showcontrols="1" showstatusbar="1"> </embed> </object> </body> </html> 16
Quick time 17
Quick time <html> <head> <title>madmax Movie</title> </head> <body> <p>here's my movie:</p> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="240"height="196" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="madmax.mov"> <param name="autoplay" value="false"> <param name="controller" value="true"> <embed src="madmax.mov" width="240" height="196" autoplay="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </body> </html> 18
Gjør filene tigjengelige Internettbrukerne er en heterogen gruppe Sørg for at filene kan sees og høres Utviklere av multimedia-teknologi blir ikke helt enige om standarder det gjør det ikke lettere 19
Enkel lenke <A HREF="video.mov">Quicktime video</a> Når brukeren klikker på lenken "Quicktime video", vurderer nettleseren hvilken fil det er snakk om. Når den gjenkjenner filen som en Quicktime-fil, kjører den opp applikasjonen, og videoen vises. 20
mer... Hvis nettleseren er av gammel dato, eller Quicktime plugin ikke er installert, får brukeren feilmelding eller beskjed om å installere den nødvendige pluginprogramvaren (i dette tilfellet Quicktime). 21
Legg inn fil med <EMBED> taggen <EMBED> taggen er ikke en del av HTML 4, men støttes av nyere utgaver av Netscape og Internet Explorer. 22
Attributter: SRC="url" (adressen til videofilen) WIDTH="antall pixler" (bredde på videovinduet) HEIGHT="antall pixler" (høyden på videovinduet) AUTOPLAY="true false" (videoen begynner automatisk. hvis dette er AUTOPLAY="true") 23
Mer LOOP="true false palindrome" ("true" betyr at videoen vises om og om igjen, med "false" vises den én gang, og "palindrome" fører til at videoen vises først normalt og så baklengs osv..) PLAYEVERYFRAME="true false" ("false" betyr at videoen hopper over enkelte video-rammer for justering) HREF="url" (adresse til en videofil et annet sted) PLUGINSPAGE="url" (adressen til en plugin, hvis nettleseren ikke finner den i brukerens datamaskin) 24
Eksempel : <EMBED SRC="video.mov" AUTOPLAY="false" WIDTH="160" HEIGHT="120"></EMBED> 25
Lyd på hjemmesider Det finnes to typer lyd og video på Internett: Non-streaming og streaming Non-streaming. Filene må lastes ned i sin helhet før de kan spilles. Streaming. Begynner å spille nesten med en gang, og fortsetter å spille mens de lastes ned. 26
Eksempler - Non-streaming lyd Wave (.wav) Waveform Audio File Format. Opprinnelig for Windows, men er nå tilgjengelig for Macintosh også. AIFF (.aif,.aiff) Audio Interchange File Format. Opprinnelig for Macintosh, men nå også for Windows og andre platformer. Ligner på Wave. Audio (.au) Kalles også for audiofiler. UNIX-standard. Dette formatet er etterhvert på vei ut blant annet fordi det kommer andre formater med bedre lydkvalitet. 27
Mer... MPEG(.mpg,.mp2,.mp3) MPEG er en familie av multimediastandarder som ble laget av Moving Picture Experts Group. Disse formatene støtter lyd og video. MIDI(.mid) Musical Instrument Digital Interface. MIDI inneholder egentlig ikke noen reell lydinformasjon, men heller matematiske kommandoer som beskriver noter. Derfor høres MIDI ut mer som en instrumental lyd enn som reell lyd. MIDI tar veldig liten plass, derfor er dette formatet anvendelig i mange sammenhenger. 28
Lyd http://www.cookwood.com/html5ed/exampl es/multimedia/madmax_justsound.html 29
koden <html> <head> <title>lyd</title> </head> <body> <p>listen to Barcelona street sounds:</p> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="240" height="16" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="madmax_sound.mov"> <param name="autoplay" value="true"> <param name="controller" value="true"> <param name="loop" value="true"> <embed src="madmax_sound.mov" width="240" height="16" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/" loop="true"> </embed> </object> </body> </html> 30
Java applets http://www.cookwood.com/html5ed/exam ples/multimedia/javaobject.html 31
Koden <html> <head> <title>java Applets</title> </head> <body> Does anybody really know what time it is? <object codetype="application/java" classid="java:clock2.class" width="170" height="150"> </object> </body> </html> 32
Applets på nett http://java.sun.com/applets/ http://javaboutique.internet.com/ 33
Rullende tekst - marquee <html> <head> <title>rollover</title> </head> <body> <h1>oppfordring</h1> <marquee width=75% height=15 behavior=scroll direction=left loop=infinite bgcolor=yellow> hallooooooo... hallooooooo...halloooooooo... OOOOOOOOOOOOOOOO... OOOOOOOOOOOOOOOOOOOOOOOIIIIIIIIIIIIIIIIIIIIIIIIII... AAAAAAAAAAAAAAA...OOOOOOOOOOOOOOOOO...IIIIIII IIIIIIIIIIIIIIII... </marquee> </body> </html> 34
eksempel eksempel http://www.iu.hio.no/~kirstenr/webpublis ering2004/eksempler/multimedia/scroller. html 35
Flash Eksempel: Hovedprosjekt HiO 2004: http://www.sikamikanico.no/ http://www.webdiner.com/flash/samples/ 36
Flash Flash er et multimedia-format fra Macromedia. Med Flash kan man lage animasjoner, interaktive bilder og lydeksempler, i forholdsvis små filer. Flash bruker et vektor-basert format som gir kompakte filer. Vektor-basert grafikk definerer objekter med matematiske formler som trenger mye mindre data enn det som trengs for å beskrive enkelte piksler i et bitmapbilde. 37
Fordeler med Flash Små filer Bilder og animasjoner kan forstørres uten at detaljer går tapt. God bildekvalitet, uansett skjermstørrelse. Flashfiler begynner å kjøre før nedlastingen er ferdig. Det trengs ikke noen programvare på serversiden. Innebygd lyd. 38
Ulemper med Flash Trenger ekstra programvare (plugin) for nettleseren. Java-utgaven av Flash kan kjøre på alle nettlesere som støtter java. Det finnes ingen alternativ mulighet (på samme måte som ALT-attributtet for elementet IMG for bilder), i tilfelle Flash ikke støttes. For å lage Flash trengs forholdsvis dyr programvare. 39
Å lage Flash-filer For å lage Flash-filer trengs Macromedia Flash. Dyr programvare, men man kan laste ned en 30-dagers prøveversjon Opplæring på Macromedias supportside. Lett å lage animasjons- effekter. 40
Å legge Flash-filer i en hjemmeside Dette kan enten gjøres med en <EMBED>-tagg (den er ikke en del av standarden) eller med <OBJECT>-taggen. 41
Koden for Sikamikanico-weben <html> <head> <title>sikamikanico.no</title> </head> <body> <embed height="480" pluginspage="http://www.macromedia.com/shockwave/do wnload/index.cgi?p1_prod_version=shockwaveflash" src="intro/intro.swf" type="application/x-shockwave-flash" width="640" quality="best" play="true" loop="false"> <br> HREF="http://www.sikamikanico.no/index2.php">Skip Intro</a><div align="center"> <body> </html> 42
Animerte gifer 43
Animerte GIFer En animert GIF er et GIF-bilde med mange bilder i ett som vises etter hverandre slik blir det en animasjon. Ulempen er at de kan være irriterende for brukeren, spesielt hvis det er mange av dem på samme hjemmeside. Animerte GIFer brukes i dag mye i bannerannonser på hjemmesider. 44
Ressurser animerte gifer på nettet http://www.gif-gallery.de/gif world/list/index.html http://home.online.no/~josandoe/ gif1.htm 45
Ressurser http://home.hib.no/mediesenter/animasjo nsverksted/www/ani5_2.htm 46
Ukeoppgaver Legg inn en lyd på en side. Forklar hva slags format det er og hvordan du går fram. Lag en marquee (rullende tekst) Enten: Last ned et program for å lage animerte gifer og lag din egen (gjerne tekst du behøver ikke bruke bilder). Dette må gjøres hjemme. Eller: Finn noen animerte gifer på web og legg dem på siden din. Vurder bruken av de animerte gifene på websiden din. Legg inn en videosnutt enten ved å linke til den, eller legg inn på HTML siden. Dersom du har tilgang på Flash: Eksperimenter! 47
Neste gang: Skjemaer DOM Document Object Model. JS kap 3, 8 HTML kap 16 Mrk! Uke 45 (08.11) blir jeg borte. 48