Verkkopedagogikka

Videot HTML:ssä

Muistutan heti alkuun, ettei HTML-sivuilla alunperin ollut tarkoitus esittää multimediaa. Entistä parempien nettiyhteyksien vuoksi ovat videot kuitenkin lisääntyneet netissä. Selaimet eivät kuitenkaan tue videoita suoraan. Videoitten katseluun tarvitaan erilliset katseluohjelmat tai pluginit kuten esim. Windowsin mediaplayer, Quick time tai RealPlayer. Videomateriaali kannatta editoida ennen kuin sen laittaa www-sivuille. Varsinaisesti videoitten editointia kuvaillaan/harjoitellaan opintokokonaisuudessa elokuva (esim. Windows Moviemaker).

Kun videon haluaa laittaa nettiin saataville, on ensin huolehdittava videon koosta. Kiinteät, nopeat nettiyhteydet ovat vielä suhteellisen harvinaisia, joten video olisi hyvä saada mahdollisimman pieneen tilaan, jotta sen kopioiminen ei kestäisi iäisyyksiä. Normaali, kamerasta saatava ja editoitu DV-muotoinen video vie noin 3,6 megatavua sekunnissa, mikä on aivan liikaa jopa parhaille ADSL- tai kaapelimodeemiyhteyksille.

Koodekilla koko pienemmäksi

Video for Windows -formaatin tunnistaa .AVI -tiedostopäätteestä. AVI toimii alustana video- ja ääni-informaatioille, jotka voi pakata erilaisilla koodekeilla. Applen vastaava alusta on QuickTime, jonka tiedostopääte on .MOV.

Mikäli videota ei katsella selainikkunassa on linkki hyvä vaihtoehto.

Takavuosien suosikki ja nettivideon pioneeri on RealMedia, jota käytetään vieläkin runsaasti, mutta huonoina puolina ovat oman soitto-ohjelman tarve ja keskinkertainen laatu. DVD-levyiltä tuttu MPEG-2, joka antaa hyvän kuvanlaadun, mutta tiedostot kasvavat isoiksi ja katsomiseen tarvitaan myös erillisiä ohjelmia tai maksullisia koodekkeja.

Uusin ehdokas on MPEG-4, jonka standardeista on vastikään päästy yhteisymmärrykseen. MPEG-4 tarjoaa parhaan kuvanlaadun ja pienet tiedostokoot. Varaslähdön tämän tekniikan pariin otti epävirallinen DivX. Myös Microsofin oma Windows Media Video perustuu samantapaiseen tekniikkaan. DivX vaatii oman koodekin asentamisen, mutta WMV toimii suoraan Windowsin Media Playerissa.

Videotiedoston kokoa voi pienentää vähentämällä kuvan pistetarkkuutta. Jos esimerkiksi täyden DV-videon vaaka- ja pystytarkkuudet puolittaa (720 x 576 -> 360 x 288) pienenee yhden kuvan pikselimäärä neljännekseen. Televisiota varten suunnitellussa DV-kuvassa on 25 kuvaa sekunnissa eli lomiteltuna 50 puolikuvaa. Tietokoneella katsottavassa videossa voi kuvataajuutta pudottaa selvästi pienemmäksi. Jopa 12,5 kuvaa sekunnissa riittää useimpiin tarkoituksiin ja tiedostokoko puolittuu jälleen. Tietokoneen näyttö ei ole lomiteltu, joten videolle kannattaa tehdä deinterlace-toiminto, joka eliminoi liikkuvista kohteista sahalaidat ja helpottaa koodekkien pakkausalgoritmeja. Kuvan värisyvyyttä voi myös pienentää 24-bittisistä täysväreistä vaikkapa 16-bittisiksi. Ääni kannattaa muuttaa stereosta monoksi sekä näytetaajuutta ja dynamiikkaa voi laskea. Äänenkin voi pakata formaatin sallimilla koodekeilla.

Upotetut videotiedostot

Tavallisille www-sivuille voidaan upottaa videooita. Silloin ohjelma avautuu ikään kuin www-sivun sisään. Tämä on hyvä tapa siinä mielessä, ettei selaaja joudu pois sivuiltasi kesken kaiken. Tämä tapa on yleinen esim suositussa Youtubessa. Videotiedostojen upotus noudattaa samoja periaatteita kuin äänenkin upotus. Oikea koodi olisi <object>, mutta muutkin selaimet on otettava huomioon. Siksi tähän tapaan.

CLASSID kertoo Microsoftin selaimelle, että lataapas QuickTime ActiveX control: clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B. CODEBASE tarvitaan tilanteisiin, joilla käyttäjillä ei ole käytössään pluginia QuickTime.

• Katso esimerkki RealMedia-tiedostosta [1], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki MPEG-4 tiedostosta [2], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki DivX-tiedostosta [3], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Saatat lisäksi tarvita DivX-koodekin. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.
• Katso esimerkki wmv-tiedostosta (Windows Media Video) [4], joka on upotettu sivulle. Koodin upotukseen voit napata suoraan sivuilta. Toinen vaihtoehto on, että täytät lomakkeen CIT:n sivuilla ja saat valmiin koodin.

Valmista Koodia saat täältä: [5]

HUOM! Kun video upotetaan niin, että se toimii kaikilla selaimilla rikotaan samalla HTML:n perussääntöjä. Validoinnin kannalta upotus ei ole hyvä. Muista lisäksi, että laitat nettiin vain pieniä hyvin pakattuja ja leikattuja videotiedostoja.