Siirry sisältöön. | Siirry navigointiin

Jyväskylän yliopiston Koppa

HUOM! Kopan käyttö päättyy 31.7.2024! Lue lisää.


Navigation

Ääni ja video verkkoon

tekijä: Tanja Tuulikki Välisalo Viimeisin muutos torstai 04. joulukuuta 2014, 10.37
Ääni- ja videotiedostoja voi upottaa verkkosivuille erilaisten mediapalvelujen (esim. YouTube) kautta. Tässä materiaalissa käsitellään kuitenkin omalle verkkosivupalvelimelle tallennettavien tiedostojen jakelua.

Ääni- ja videotiedostoja voi lisätä verkkosivuille kahdella tavalla.

  1. 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.
  2. 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-tyyppitiedostomuoto
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-tyyppitiedostomuoto
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.