1 Multimedia Kirsten Ribu Hio Webpublisering LO130A 18.10.04.

Presentasjon om: "1 Multimedia Kirsten Ribu Hio Webpublisering LO130A 18.10.04."— Utskrift av presentasjonen:

1 1 Multimedia Kirsten Ribu Hio Webpublisering LO130A 18.10.04

2 2 I dag  Om lyd, animasjon og video –  og (X)HTML koden som trengs på sidene for å legge inn multimediafiler

3 3 Multimedia  Gjør websidene dine mer levende med lyd, grafikk, animasjoner og videosnutter  I dag er det lettere å legge til multimedia- effekter: båndbredden er større  Nye teknologier: Flash og Shockwave

4 4 Shockwave

5 5 Flash – dyr programvare

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

7 7 Å bruke multimedia på websiden  Flere måter å gjøre det på: Som en enkel lenke, med -tagg, eller med -taggen (denne taggen er en del av HTML 4, men ikke alle nettlesere støtter den) -taggen

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

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

10 10 OBJECT ...innhold...  Setter inn et objekt i HTML filen.  Et objekt kan for eksempel være en java- applett eller en multimediafil

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

12 12 Eksempel på video  http://www.cookwood.com/html5ed/exam ples/multimedia/madmax.html http://www.cookwood.com/html5ed/exam ples/multimedia/madmax.html

13 13 Windows media player  http://www.cookwood.com/html5ed/exampl es/multimedia/madma xwmp.html http://www.cookwood.com/html5ed/exampl es/multimedia/madma xwmp.html

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

15 15 Koden MadMax Movie <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" 

16 16 Forts.... type="application/x-oleobject"> <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">

17 17 Quick time

18 18 Quick time MadMax Movie Here's my movie: <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="240"height="196" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

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

20 20 Enkel lenke  Quicktime video  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.

21 21 ¨mer.........  Hvis nettleseren er av gammel dato, eller Quicktime plugin ikke er installert, får brukeren feilmelding eller beskjed om å installere den nødvendige plugin- programvaren (i dette tilfellet Quicktime).

22 22 Legg inn fil med taggen  taggen er ikke en del av HTML 4, men støttes av nyere utgaver av Netscape og Internet Explorer.

23 23 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")

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

25 25 Eksempel : 

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

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

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

29 29 Lyd  http://www.cookwood.com/html5ed/exampl es/multimedia/madmax_justsound.html http://www.cookwood.com/html5ed/exampl es/multimedia/madmax_justsound.html

30 30 koden Lyd Listen to Barcelona street sounds: <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="240" height="16" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <embed src="madmax_sound.mov" width="240" height="16" autoplay="true" controller="true" pluginspage="http://www.apple.com/quicktime/download/" loop="true">

31 31 Java applets  http://www.cookwood.com/html5ed/exam ples/multimedia/javaobject.html http://www.cookwood.com/html5ed/exam ples/multimedia/javaobject.html

32 32 Koden Java Applets Does anybody really know what time it is? <object codetype="application/java" classid="java:Clock2.class" width="170" height="150">

33 33 Applets på nett  http://java.sun.com/applets/ http://java.sun.com/applets/  http://javaboutique.internet.com/ http://javaboutique.internet.com/

34 34 Rullende tekst - marquee Rollover oppfordring hallooooooo............................... hallooooooo..........halloooooooo........... OOOOOOOOOOOOOOOO.................... OOOOOOOOOOOOOOOOOOOOOOOIIIIIIIIIIIIIIIIIIIIIIIIII.......... AAAAAAAAAAAAAAA............OOOOOOOOOOOOOOOOO..............IIIIIII IIIIIIIIIIIIIIII.............

35 35 eksempel  eksempel eksempel  http://www.iu.hio.no/~kirstenr/webpublis ering2004/eksempler/multimedia/scroller. html

36 36 Flash  Eksempel: Hovedprosjekt HiO 2004: http://www.sikamikanico.no/  http://www.webdiner.com/flash/samples/ http://www.webdiner.com/flash/samples/

37 37 Flash  Flash er et multimedia-format fra Macromedia. Med Flash kan man lage animasjoner, interaktive bilder og lydeksempler, i forholdsvis små filer. Macromedia  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.

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

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

40 40 Å lage Flash-filer  For å lage Flash-filer trengs Macromedia Flash.Macromedia Flash  Dyr programvare, men man kan laste ned en 30-dagers prøveversjon  Opplæring på Macromedias supportside.Macromedias supportside  Lett å lage animasjons- effekter.

41 41 Å legge Flash-filer i en hjemmeside  Dette kan enten gjøres med en -tagg (den er ikke en del av standarden) eller med -taggen. 

42 42 Koden for Sikamikanico-weben Sikamikanico.no HREF="http://www.sikamikanico.no/index2.php">Skip Intro

43 43 Animerte gifer

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

45 45 Ressurser – animerte gifer på nettet http://home.online.no/~josandoe/ gif1.htm http://www.gif-gallery.de/gif world/list/index.html

46 46 Ressurser  http://home.hib.no/mediesenter/animasjo nsverksted/www/ani5_2.htm http://home.hib.no/mediesenter/animasjo nsverksted/www/ani5_2.htm

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

48 48 Neste gang:  Skjemaer  DOM – Document Object Model.  JS kap 3, 8 HTML kap 16  Mrk! Uke 45 (08.11) blir jeg borte.