Kuva, ääni ja video verkossa - Luento 9
- Luentotaltiointi
- Linkittäminen
- Upottaminen
- Kuvat
- Videot
- Ääni
- Multimedia
- Tulostettavaksi tarkoitetut dokumentit
Luennolla perehdytään millaisin tekniikoin kuvaa, ääntä, videota ja multimediaa voidaan liittää WWW-sivulle.
Luentotaltiointi
Ongelmia videon katselussa?Median liittämisessä WWW-sivulle on otettava huomioon:
- Sivuston olennainen sisältö pitää olla saavutettavissa ilman mediaobjekteja.
- Median formaatti pitää olla sopiva kohderyhmälle.
- Median tiedostokoko on pyrittävä tiivistämään mahdollisimman pieneksi.
Linkittäminen
Animaation, kuvan, puheen pätkän tai musiikkia saa WWW-sivulle yksinkertaisimmillaan lisäämällä sivulle linkin (a-elementti), joka viittaa kyseiseen tiedostoon. Linkin avulla käyttäjä voi tallentaa tiedoston paikalliselle levylle ja käynnistää sen erillisellä ohjelmalla tai selaimella. Ohjelman on luonnollisesti tuettava kyseistä tiedostotyyppiä. Tiedosto voi olla myös lyhyt ohjetiedosto ohjelmalle, joka voi edelleen hakea mediaa verkosta.
Upottaminen
Upottamisella tarkoitetaan animaation, kuvan tai äänen liittämistä suoraan WWW-sivulle. Objekti ei oikeasti liity XHTML-tiedostoon (kuten esimerkiksi Word-dokumenttiin), vaan edelleen tarvitaan viite erilliseen tiedostoon. Selain näyttää mahdollisuuksien puitteissa objektin suoraan sivulla.
MIME-tyypit
MIME-tyypit ovat sähköpostissa ja HTTP-protokollassa käytetty tapa ilmaista mitä mediatyyppiä annettu tieto on ja millä ohjelmalla selaimen pitäisi se avata. Esimerkiksi:
MIME-tyyppi | Tyypillinen tiedostopääte | Formaatti |
---|---|---|
image/svg+xml | .svg | Scalable Vector Graphics |
application/x-ogg | .ogg | OGG Vorbis |
video/mpeg | .mpg | MPEG-video |
video/avi | .avi | Video for Windows |
video/quicktime | .mov | QuickTime Windows |
audio/x-mp3 | .mp3 | MPEG-1 Audio Layer 3 |
Mediatyyppiä ei pidä yrittää päätellä suoraan tiedoston päätteestä, vaan ratkaisevaa on käytetyn protokollan kertoma MIME-tyyppi.
img
Pelkkiä kuvia voidaan upottaa dokumenttiin img-elementillä. Kuvia siirrettäessä WWW:hen täytyy kuva ensin muokata kuvankäsittelyohjelmalla ja muuntaa sopivaan formaattiin (JPG, PNG tai GIF).
object
object-elementillä voi liittää dokumenttiin periaatteessa mitä tahansa objekteja (kuvia, videoita, animaatioita, ohjelmasovelluksia jne.). Jos selain ei tue haluttua tiedostoa, niin object-elementin avulla voidaan määritellä vaihtoehtoisia esitystapoja. object-elementin sukulaisia ovat standardista poistuva applet- ja epästandardi embed-elementti, joiden käyttöä on syytä välttää. Tärkeimmät object-elementin ominaisuudet ovat:
- data - viite objektiin
- type - objektin tyyppi
- archive - pilkuilla eroteltu lista etukäteen ladattavista paketeista, jotka sisältävät objektitietoja
- classid - objektin sisällä toteutettava osa
- codebase - hakemistopolku muissa attribuuteissa määritellyille viittauksille
- declare - objekti käynnistetään erikseen
Muuta huomioitavaa:
- object-elementin sisään pitää laittaa vaihtoehtoinen esitystapa, esim. tekstiä tai kuva.
- object-elementin sisään voi laittaa param-elementtejä, joilla voi määritellä ulkoiselle ohjelmalle asetuksia.
- Lisää tietoja: XHTML 1.1 Object module
<p>
<object type="image/svg+xml" data="hazor1e.xml" title="SVG-kuva">
<img src="hazor1e.gif" alt="SVG-kuva (GIF)" title="SVG-kuva (GIF)" />
</object>
</p>
- Object Paranoia - kuinka saada objektit toimimaan oikein myös vanhemmissa Internet Explorereissa
Kuvat
- Kuvat on pienennettävä kuvankäsittelyohjelmalla riittävän pieneksi.
- Kuvista voi kokeilla vähentää värejä, jolloin tiedoston koko pienenee (kaaviot, ei valokuvat).
- Kuvan muokkaus on tehtävä aina alkuperäiskuvasta lähtien.
Valitse sopiva pakkaustapa, pakkaamattomat bittikarttaformaatit kuten TIFF tai BMP eivät sovi nettiin. Selaimet tukevat ainakin jpg, png ja gif-formaatteja.
JPEG
- Käytetään valokuvien näyttämiseen WWW:ssä.
- Pakkausaste voidaan määritellä. (Pakkausasteiden vertailu).
- 16 miljoonaa väriä (24-bittinen).
- Tukee lomitusta (progressive jpeg).
- Ei tue läpinäkyvyyttä.
- Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.
- Selaimet tukevat formaattia hyvin.
PNG
- Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
- Käytetään myös kuvaoriginaalien säilyttämiseen.
- Jopa 48-bittinen kuva (248 väriä).
- Tukee lomitusta.
- Tukee läpinäkyvyyttä (alpha channel).
- Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
- GIF-formaattia parempi pakkaustapa. Korvaa vanhemman GIF-formaatin muuten paitsi animaatioiden osalta.
GIF
- Käytetään viivapiirroksissa ja kaavioissa.
- On hyvä vaihtoehto kuville, joissa on paljon samaa väriä sisältäviä alueita.
- Tukee lomitusta (interlaced gif).
- Tukee "taustavärin" läpinäkyvyyttä.
- Tukee animaatioita.
- Maksimissaan 256 väriä (8-bittinen).
- Aiemmin lisenssimaksuja vaatinut pakkausalgoritmi. Patentti on vanhentunut, joten nykyään vapaasti käytettävissä.
Scalable Vector Graphics (SVG)
SVG on vektorigrafiikan määrittelyyn tarkoitettu kieli. SVG perustuu myös XML:ään.
Esimerkkejä:
SVG-kuvia (tai muita vektorigrafiikkakuvia) voi konvertoida bittikarttakuvista esim. Vector Magic -ohjelmalla.
Kuvakartat - map
map-elementillä voidaan tehdä kuvakarttoja, jotka yhdistyvät img- tai object-elementtiin. map-elementtiin liittyy kiinteästi area-elementti, jolla määritellään kuvan tai objektin alueita. area-elementillä on pakollisena ominaisuutena alt-teksti, mikäli selain ei tue kartta-alueita.
Lisätietoa: Client-side image maps: the MAP and AREA elements
Esimerkki, jossa voi napauttaa emolevyn osia
Kartoissa voidaan toki hyödyntää map-elementtiä, esimerkiksi:
Videot
- Videoita voidaan välittää joko verkkovideona (stream) tai kokonaisina tiedostoina (download).
- Videoon voi liittyä jokin erillinen ääniformaatti tai äänen pakkaus liittyy kiinteästi videoformaattiin.
Videoiden yleisiä ominaisuuksia
- Resoluutio: kuvan tarkkuus, eli korkeus ja leveys pikseleinä.
- Kuvasuhde: kuvan leveyden suhde korkeuteen.
- Yleensä laskettavissa resoluutiosta.
- Ei kuitenkaan aina, esim. DVD-resoluutio 720x576, mutta kuvasuhde voi olla esim. 4:3 tai 16:9. Tällöin kuvaa venytetään toistavan laitteen toimesta.
- Lomitus:
- Lomitettu tai progressiivinen.
- Lomitetussa kuvassa on kaksi kenttää. Parilliset ja parittomat vaakaviivat.
- TV:ssä (analoginen kuvaputkitelevisio) on tyypillisesti lomitettua kuvaa.
- Tietokonenäytöllä katselua varten lomitus on poistettava videosta. Tätä sanotaan lomituksen poistoksi (engl. deinterlace)
- Progressiivisessa videossa kuvat ovat kokonaisia ja ne näytetään kerralla.
- Kuvanopeus:
- Montako kuvaa näytetään sekunnissa.
- PAL-standardissa 25 kuvaa sekunnissa. Lomitettuja kenttiä on tällöin 50.
- Staattisessa kuvassa (esim. luentovideo) riittää vähempikin (esim. 15 kuvaa sekunnissa).
Videon pakkaus
- Video täytyy pakata häviöllisesti, sillä liikkuva kuva vie todella paljon levytilaa.
- Internetissä välitettävä video on pakattava vielä tiiviimmin, sillä verkkoyhteyden kaistanleveys on rajoittava tekijä.
- Videon laatu riippuu pakkaustavasta ja tiedoston koosta.
- Tiedoston kokoon vaikuttaa datavirta (engl. bitrate). Tätä mitataan bitteinä sekunnissa (bits/s).
- CBR (Constant Bitrate) tai VBR (Variable Bitrate).
Videoiden tiedostoformaatit
Tiedostokääre (engl. container) määrää, millä tavalla video/audio-data ja näihin liittyvä metatieto pakataan tiedostoon.
- Quicktime (*.mov) - Applen kehittämä videoformaatti. Tukee esimerkiksi verkkovideota.
- Realmedia (*.rm)
- Windows Media (Advanced Systems Format) (*.wmv / *.asf) - pääasiassa vain Windowsissa ja Windows Media Playerillä toistettavat videot.
- AVI - Audio Video Interleave - vanha, mutta suosittu Windows-järjestelmiin kehitetty container-formaatti.
- MPEG-PS/TS, MP4 (*.mpg, *.m2v *.mp4) - MPEG-standardien tiedostomuodot.
- Container-formaattien vertailua (Wikipedia).
Kodekit
Kodekki (engl. codec) määrää ohjelmamodulin, jolla videodata pakataan ja puretaan.
- Yleensä kodekki tulee videota toistavan ohjelman mukana, mutta joskus se on haettava erikseen.
Esim. Windows Media Player ja Media Player Classic osaavat esittää mitä tahansa videoita, jos videot ovat niiden ymmärtämässä tiedostokääressa ja videossa käytetty kodekki on asennettuna.
- Tarvittavan kodekin voi tunnistaa esim. GSpot-ohjelmalla.
- FFDShow sisältää useimmat kodekit, joten pelkästään sen hakemalla pärjää jo melko hyvin.
- Useimmiten kodekki ei ole kytköksissä tiedostomuotoon.
- Formaattien vertailu - Extreme Tech
- Toinen vertailu
Yleisesti käytettyjä kodekkeja
- MPEG-1 on vanha, mutta hyvin tuettu videoformaatti. Haittapuolina iso tiedostokoko ja artifaktikuviot.
- MPEG-2-pakkausta käytetään DVD-videoissa ja suomalaisissa DigiTV-lähetyksissä, soveltuu harvoin Internet-jakeluun.
- MPEG-4 - standardi lähes DVD-tasoiselle videolle.
- H.264 / MPEG-4 AVC. Käytetään yleisesti QuickTime-videoissa kuten elokuvatrailereissa.
- Windows Media 9 -kodekit. Esim. kurssin luentovideot.
- Häviöttömät, mutta pakkaavat kodekit, esim. Huffyuv, Alparysoft.
- DV - digitaalisissa videokameroissa käytetty pakkausmuoto.
Edellytykset videon toimimiselle suoraan selaimessa
- Videon näyttämiseen soveltuva ohjelma, esim. Media Player, RealPlayer, QuickTime Player.
- Selaimeen sopiva plugin, joka mahdollistaa videon esittämisen suoraan selaimessa.
- Videossa käytetyn videokoodauksen ja audiokoodauksen purkamiseen sopivat kodekit.
Videon upottaminen
Lisätietoa
Ääni
- RA - Real Audio
- WMA - Windows Media Audio
- MP3 - MPEG-1 Audio Layer 3
- OGG - OGG Vorbis
- AC3 - Dolby Digital
- AAC - Advanced Audio Coding
- MID - Musical Instrument Digital Interface
Epästandardeilla embed- ja bgsound-elementeillä voidaan lisätä musiikkia soimaan WWW-sivun taustalle. Näitä on syytä välttää, koska ne toimivat vain tietyissä selaimissa ja käyttäjät haluavat harvemmin musiikkia sivun taustalle. object-elementillä voi upottaa musiikkia sivulle samaan tapaan kuin videota.
Esimerkit:
Lisätietoa aiheesta:
- MP3:n upottaminen standardien mukaisesti
- Shoutcast - mp3-stream
- Winamp - mp3-soitin
- Windows Media Player
Multimedia
Multimedialla tarkoitetaan vuorovaikutteisia audiovisuaalisia esityksiä. Multimediaa voi lisätä WWW:hen esim. Flashilla.
Flash
Flash-sovellukset ovat WWW-sivuille upotettuja vektorigrafiikalla toteutettuja multimediaesityksiä.
Flash-sovellukset voivat sisältää myös pelkkää videota tai ääntä. Esim. YouTube ja Google Videos -palvelut käyttävät Flashia.
Vaatii toimiakseen selaimeen asennetun Flash-laajennuksen.
- Tietotekniikan opettajan työvälineitä -kurssin luento Flashistä
- Flash-sovelluksen upottaminen sivulle standardin mukaisesti
- Flash Player
- Leo Burnett - esimerkki Flashillä toteutetusta WWW-sivustosta
- The Void - esimerkki Flashillä toteutetusta WWW-sivustosta
Tulostettavaksi tarkoitetut dokumentit
PDF- ja Postscript-tiedostomuotoja käytetään, kun halutaan dokumentin ulkomuodon pysyvän täsmälleen halutunlaisena.
PDF vaatii esimerkiksi Adobe Readerin ja PostScript vaatii esimerkiksi Ghostviewin. Adobella on on omat maksulliset PDF:n tuottamiseen tarkoitetut ohjelmistot, mutta myös LaTeX:illa, OpenOfficella ja Microsoft Office 2007:lla voi tuottaa PDF:iä.
Esimerkkejä:
- Opinto-opas - PDF
- Opinto-opas - HTML
- Gradu - PostScript
Käyttäjien kommentit