Kuva, ääni ja video verkossa

Luennolla perehdytään millaisin tekniikoin kuvaa, ääntä, videota ja multimediaa voidaan liittää WWW-sivulle.

Median liittämisessä WWW-sivulle on otettava huomioon:

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ä.

Upottaminen

Upottamisella tarkoitetaan kuvan, videon tai äänen liittämistä suoraan WWW-sivulle. Objekti ei sislly HTML-tiedostoon kuten esimerkiksi Word-dokumenttiin, vaan tarvitaan viite erilliseen tiedostoon. Selain näyttää objektin suoraan sivulla, jos osaa.

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-tyyppiTyypillinen tiedostopääteFormaatti
image/svg+xml.svgScalable Vector Graphics
application/x-ogg.oggOGG Vorbis
video/mpeg.mpgMPEG-video
video/avi.aviVideo for Windows
video/quicktime.movQuickTime Windows
audio/x-mp3.mp3MPEG-1 Audio Layer 3
video/mp4.mp4MPEG-4 video

Mediatyyppiä ei pidä yrittää päätellä suoraan tiedoston päätteestä, vaan ratkaisevaa on käytetyn protokollan kertoma MIME-tyyppi.

Mediatyyppiä ei voida itse HTML-koodissa määrätä vaan se täytyy asettaa WWW-palvelimen asetuksissa.

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, GIF tai SVG).

Voit käyttää myös figure-elementtiä tai picture-elementtiä.

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 sukulainen on embed-elementti. Tärkeimmät object-elementin ominaisuudet ovat:

Muuta huomioitavaa:

SVG-kuva (GIF)

<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>

Kuvat

Valitse sopiva pakkaustapa, pakkaamattomat bittikarttaformaatit kuten TIFF tai BMP eivät sovi nettiin. Selaimet tukevat ainakin jpg, png, svg ja gif-formaatteja.

JPG

PNG

GIF

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 joistakin bittikarttakuvista Vector Magic -ohjelmalla.

Vektorigrafiikkaa voi piirtää Inkscapella. Inkscapella voi myös muuntaa kuvia eri vektorigrafiikkaformaattien välillä. Esim. wmf-kuvan voi muuntaa svg-kuvaksi.

WebP

Videot

Videoiden yleisiä ominaisuuksia

Videon pakkaus

Videoiden tiedostoformaatit

Tiedostokääre/säiliömuoto (engl. container) määrää, millä tavalla video/audio-data ja näihin liittyvä metatieto pakataan tiedostoon.

Kodekit

Kodekki (engl. codec) määrää ohjelmamodulin, jolla videodata pakataan ja puretaan.

Yleisesti käytettyjä kodekkeja

Edellytykset videon toimimiselle suoraan selaimessa

Videon lisääminen omalle sivulle

Ääni

Musiikki upotetaan sivulla samaan tapaan kuin videokin mutta käytetään audio-elementtiä.

<audio controls="controls" src="musa.mp3"></audio>

Musiikki on oltava tiedostomuodossa, jota selain tukee. Suositeltavia muotoja ovat MP3, AAC ja OGG-tiedostomuodot.

Multimedia

Multimedialla tarkoitetaan vuorovaikutteisia audiovisuaalisia esityksiä. Multimediaa voi lisätä WWW:hen SVG-kuvien ja CSS-animaatioiden avulla.

Flash

Flash-sovellukset ovat WWW-sivuille upotettuja vektorigrafiikalla toteutettuja multimediaesityksiä, jotka vaativat toimiakseen selaimeen asennetun Flash-laajennuksen. Flash-laajennus on lähes kokonaan poistunut käytöstä. Käytä ennemmin SVG-kuvia ja CSS-animaatioita

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 Officella voi tuottaa PDF:iä.

Esimerkkejä:

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/multimedia/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2019-02-12 12:55:15
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta