Ääni ja video verkkoon
Ääni- ja videotiedostoja voi lisätä verkkosivuille kahdella tavalla.
- Tiedostoja voi tallentaa verkkosivupalvelimelle ja lisätä verkkosivuille hyperlinkkinä, jolloin selaimen asetuksista riippuen selain avaa tiedoston tarvittavassa mediasoittimessa tai tarjoaa käyttäjälle mahdollisuutta ladata tiedosto.
- Tiedostoja voi upottaa verkkosivulle niin, että verkkosivulla on näkyvissä mediasoitin.
Huom! Molemmissa tapauksissa äänitiedosto pitää kuitenkin viedä verkkoon erikseen (kuten kuvatiedostokin), eli se ei siirry ”automaattisesti” html-tiedoston mukana.
Upottamiseen on tarjolla kaksi eri mahdollisuutta:
- object-elementti, jolla voi upottaa kaikenalaisia mediaelementtejä tai
- HTML5-kielellä erikseen ääni- ja videotiedostoille omat elementit: video-elementti ja audio-elementti (lue lisää W3Schools-sivustolta)
Object-elementti
Tiedosto upotetaan html-sivulle object-elementin avulla. Saman elementin avulla verkkosivulle voitaisiin upottaa paitsi ääntä ja videota, myös kuvia, flash-animaatioita, javascript-toimintoja jne.
Kaikki selaimet eivät täysin tue object-elementtiä. Sen sisälle voidaan kuitenkin sijoittaa toisia elementtejä, joiden avulla mediasoitin toimii myös toisilla selaimilla.
Esim. Äänitiedosto tiedosto.mp3 on tässä upotettu verkkosivustolle.
<object type="audio/x-mp3" data="tiedosto.mp3" width="200" height="50"> <param name="src" value="tiedosto.mp3" /> <param name="filename" value="tiedosto.mp3" /> <param name="type" value="audio/mp3" /> <p>Selaimesi ei osaa soittaa MP3-musiikkia. Voit ladata tiedoston omalle koneellesi: <a href=”tiedosto.mp3”>tiedosto.mp3</a>.</p> </object>
Yllä olevassa esimerkissä object-elementin attribuutit kertovat tiedoston MIME-tyypin (type), tiedostopolun (data) sekä soittimen leveyden ja korkeuden. MIME-tyyppi kertoo selaimelle tiedostomuodon ja näin auttaa selainta avaamaan tiedoston oikeassa mediasoittimessa. MIME-tyyppi valitaan tiedostomuodon mukaan. MIME-tyyppejä ovat esimerkiksi:
Äänitiedostojen mimetyyppejä
MIME-tyyppi | tiedostomuoto |
---|---|
audio/mpeg | mp3 |
audio/x-mp3 | mp3 |
audio/wav | wav |
Äänitiedostotyyppejä on lukuisia, mutta verkkojulkaisussa yleensä järkevintä on käyttää mp3- tai wav-tiedostoja.
Videotiedostojen mimetyyppejä
MIME-tyyppi | tiedostomuoto |
---|---|
video/mpeg | mpg |
video/avi | avi |
video/quicktime | mov |
Myös videotiedostotyyppejä on runsaasti. Videon jakelussa on tärkeää huomata, että video vie runsaasti palvelintilaa. Lisää MIME-tyyppejä löydät esim. osoitteesta: http://www.iana.org/assignments/media-types
MIME-tyypin sijaan type-attribuutin avulla on mahdollista määrittää myös käytettävä mediasoitin, esim. Windows Media Playerin arvolla application/x-mplayer2.
Param-elementit antavat lisätietoja tai korjaavat eri selainten ongelmia object-elementin ymmärtämisessä. Param-elementit rakentuvat head-elementin sisältä löytyvien meta-elementtien tapaan eli attribuutit pysyvät aina samoina (name ja value), mutta niiden arvot määrittävät elementin funktion. Siltä varalta, että selain ei tue mitään tarjottua koodia, mukaan liitetään myös vaihtoehtoinen esitystapa, teksti tai kuva, joka sisältää hyperlinkin tiedostoon. Näin sivulla kävijä voi ladata äänitiedoston omalle koneelleen ja kuunnella sen sieltä.
Harjoitus
Kokeillaan äänitiedoston upottamista verkkosivulle.
- Mene osoitteeseen http://users.jyu.fi/~tatjana/htkp315 ja lataa sieltä tiedosto musa.mp3.
- Lisää tiedosto sivustollesi soitettavaksi Windows Media Playerilla, esim. etusivulle.