[IMAGE]

Multimedia-elementit
Kirjan sivut
102 - 110
Yleistä

Multimedia-elementeillä tässä yhteydessä tarkoitetaan videon, äänen ja muun ulkoisen materiaalin liittämistä HTML-dokumenttiin. Näiden elementtien luomiseen tarvitset erillisen ohjelman, jolla multimediaosat luodaan.

1. Yksinkertainen minianimaatio

Laadi kuvankäsittely ohjelmalla kuvasta kaksi versiota. Ensimmäinen näkyy sillä aikaa kun toista ladataan.
<IMG SRC="minia.jpg" LOWSRC="minia.gif" ALT="Perhosia">

minia.gif
minia.jpg

Ylläolevassa esimerkissä ladataan selaimeen ensin LOWSRC-kohtaan määritelty kuva. Samalla taustalla ladataan minia.jpg-kuvaa. Kun jpg-kuva on ladattu, vaihdetaan selaimessa kuvien paikkaa.


2. GIF-animaatio

GIF-animaatiossa luodaan animaatio-ohjelmalla animaatio, jonka periaate on se, että ohjelmassa liitetään peräkkäin useampi kuva. Ohessa on kolme kuvaa, josta on muodostettu animaatio, joka pyörii alimpana. Kuvien vaihtoväliksi on määritelty 50/100 sekuntia. Kuva tallennetaan GIF-muodossa.







Animaatio on luotu PaintShopPro 5-ohjelman mukana tulevalla Animation Shop 1.02:lla.


3. Äänen liittäminen

Ääni liitetään sivulle <OBJECT>-elementillä.

<OBJECT data="tiedoston_nimi" type="audio/musiikintyyli" height="korkeus_ääniobjektille" width="leveys_ääniobjektille">
</OBJECT>

data-kohtaan määrittelet äänitiedoston nimen samaan tapaan kuin olemme aikaisemmin määritelleet kuvien tiedostonimet.
type-kohdassa määritellään onko ääni wave-audio (audio/wav), midi-tiedosto (audio/mid)
height - äänikonsolin korkeus
width - äänikonsolin leveys

<EMBED SRC="applause.wav" type="audio/wav" height="120" width="300">

Lisäämällä EMBED-elementtiin määritys hidden, saat äänen kuuluviin, mutta itse laite, millä ääntä kuunnellaan piilotetaan.

<EMBED SRC="applause.wav" type="audio/wav" height="120" width="300" hidden>

Selaimille, jotka eivät pysty käsittelemään EMBED-elemettiä, voidaan koodiin lisätä <NOEMBED>-elementti

<EMBED SRC="applause.wav" type="audio/wav" height="120" width="300" hidden>
<NOEMBED>
<P>
<A HREF="applause.wav">[Microsoftin applause.wav]</A>
</P>
</NOEMBED>

Äänen käsittelyyn voit käyttää esimerkiksi Goldwave-ohjelmaa, johon on ohessa pienet ohjeet. Goldwaven shareware-version voit hakea osoitteesta www.goldwave.com.


4. Videon liittäminen

Videon liität HMTL-dokumenttiin samalla EMBED-elementillä. Määrittelet vain tiedoston nimen ja tyypin videon mukaan.

<EMBED SRC="gifani.avi" type="video/avi" height="120" width="300">

Videolle voidaan luoda lisämääritykset:
autostart - true, käynnistyykö video automaattisesti vai ei (false)
loop - pyöriikö video koko ajan (true) vai kerran (false)
showcontrols - näkyykö painikkeet (Media Player)

<EMBED SRC="gifani.avi" type="audio/wav" height="120" width="300" loop="true" showcontrols="false">