Multimediaelementit, osa 2

HTML-koodi

Kuvat

Kaikkien kuvaformaattien sekä animoitujen GIF-kuvien sijoittaminen sivuille tapahtuu samalla tavalla kuin tähän asti on opittu eli käyttämällä img-elementtiä.

Ääni

Äänitiedoston voi sijoittaa sivuille kahdella tavalla. Ensimmäinen on todella helppo, sillä siinä käytetään jo entuudestaan tuttua a href -elementtiä:

<a href="musat/biisi.mp3">Klikkaa tähän</a>

Katso esimerkkisivu.

Ongelmana tässä tekniikassa on se, että mitä klikkaamisen jälkeen tapahtuu riippuu selaajan käyttämästä selaimesta, sen asetuksista, selaimeen asennetuista lisäpalikoista ja niiden asetuksista. Osa selaimista toimii niin, että klikkaamisen jälkeen käyttäjä voi tallentaa kyseisen äänitiedoston suoraan oman tietokoneen kovalevylle. Kuunnellakseen tämän kappaleen käyttäjän pitää sitten avata tuo tallennettu äänitiedosto. Jotkut selaimet taas tunnistavat, että kyseessä on äänitiedosto ja selaimeen asennettu mediasoitin latautuu uuteen selainikkunaan soittamaan tuota äänitiedostoa.

Toinen tapa sijoittaa ääntä on upottaa se (engl. embed) haluttuun kohtaan web-sivua. Selain sijoittaa kyseiseen kohtaan sitten sopivan mediasoittimen:

<embed src="convolution/5_voice.mp3" 
	    width="145" height="10" autostart="false" repeat="false"> 

Katso esimerkkisivu.

Tämän menetelmän huonona puolena on se, että kaikki audio ladataan saman tien, ja siksi sivun lataamisaika saattaa nousta melkoisesti.

Jos taas haluat että musiikki lähtee soimaan automaattisesti kun käyttäjä klikkaa jotain elementtiä tai siirtää hiiren kuvan päälle (tähän tarvitaan tosin myöhemmin esitettävää JavaScript-kieltä), mp3-tiedosto kannattaa muuttaa Flash-elokuvaksi esimerkiksi tällä ohjelmalla tai tällä, ja sitten sijoittaa sivulle seuraavankaltainen koodi:

<object width="550" height="400">
<param name="movie" value="biisi.swf">
<param name="play" value="true">
<embed src="biisi.swf" width="10" height="10">
</embed>
</object>

Flash-animaatio (elokuva)

Huom! Tämä osio on jo vanhentunut.

Oletetaan että olet saanut käsiisi valmiin flash-animaation anim.swf, jonka haluat sijoittaa sivuillesi. Kyseinen animaatio upotetaan koodiin seuraavalla tavalla:

<object width="550" height="400">
<param name="movie" value="anim.swf">
<embed src="anim.swf" width="550" height="400">
</embed>
</object>

Yleensä mukaan laitetaan vielä enemmän tietoa, jotta esim. sellaiset selaimet, joihin ei ole asennettu Flash-soitinta (plug-in), voisivat löytää automaattisesti palvelimen, josta sen voi ladata selaimeen. Lisäksi itse elokuvan katselua ja kuuntelua varten voidaan määrittää erilaisia parametreja, kuten:

 <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
WIDTH="550"
HEIGHT="400"
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=5,0,0,0">
<PARAM NAME="MOVIE" VALUE="anim.swf">
<PARAM NAME="PLAY" VALUE="true">
<PARAM NAME="LOOP" VALUE="true">
<PARAM NAME="QUALITY" VALUE="high">
<PARAM NAME="SCALE" value="noborder">

<EMBED SRC="anim.swf"
WIDTH="550"
HEIGHT="400"
PLAY="true" 
LOOP="true"
QUALITY="high" 
scale="noborder"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> 
</EMBED>
</OBJECT>