Jotta voimme kaikki hetken muistella menneitä, tässä esimerkki siitä, miten videoita perinteisesti upotetaan verkkosivulle:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Tällainen syntaksi ei ole luonnollisesti kaikkein kaunein.
Ja vaikka esteettiset näkökohdat jätetäänkin hetkeksi sivuun: Tällainen syntaksi on tällä tavalla yksinkertaisesti liian virhealtis ja monimutkainen. HTML5:ssä videoita voi upottaa paljon helpommin. Tähän tarkoitukseen käytetään video-elementtiä.
Tässä esimerkki siitä, miten mainittu video-elementti voidaan upottaa:
<video src="video.ogv" width="300" height="200"> Selaimenne ei valitettavasti tue HTML5:ttä </video>
Tämä on tässä muodossa yksinkertaisin vaihtoehto. Tässä syntaksimuodossa kolme attribuuttia ovat kuitenkin ratkaisevia. src-attribuutilla määritetään upotettava video. Tässä tulee ehdottomasti kiinnittää huomiota oikeaan polkuun. Sekä width- että height-attribuutti määrittelevät videon leveyden ja korkeuden. Jos kumpaakaan arvoa ei anneta, video näytetään alkuperäisessä koossa. Jos annetaan vain toinen arvoista, selain laskee automaattisesti toisen arvon. autoplay-attribuutti ohjeistaa selainta aloittamaan videon automaattisesti sivun latautuessa. Tätä attribuuttia ei yleensä tulisi asettaa, koska automaattinen toisto ei yleensä ole käyttäjien toiveiden mukaista. Pätee vielä enemmän käyttäjiin, jotka käyttävät mobiililaitteita, joilla on rajoittunut kaistanleveys.
Toinen mielenkiintoinen attribuutti on controls. Käytettäessä tätä attribuuttia selain näyttää käyttöliittymäelementit toiston ja äänenvoimakkuuden hallintaan.
<video src="video.ogv" width="300" height="200" controls> Selaimenne ei valitettavasti tue HTML5:ttä </video>
Tässä tulos selaimessa:
Näytön alareunasta voit pysäyttää ja käynnistää videon sekä säätää äänenvoimakkuutta.
Voit määrittää kuvan poster-attribuutin avulla, joka näytetään videon käynnistymiseen asti. Tätä varten käytetään poster-attribuuttia.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Selaimenne ei valitettavasti tue HTML5:ttä </video>
Kiinnitä myös tässä oikea polku, jotta kuva näkyy varmasti.
Ole varovainen autoplay-attribuutin käytössä. Tämä attribuutti määrittää, että video on toistettava automaattisesti, kun se on käytettävissä.
<video src="video.ogv" width="300" height="200" autoplay> Selaimenne ei valitettavasti tue HTML5:ttä </video>
• auto – Selain voi ladata koko tiedoston etukäteen.
• none – Tiedostoa ei tarvitse ladata etukäteen.
• metadata – Tiedosto voidaan ladata etukäteen.
Jos preload-attribuuttia ei ole, selain käyttää oletusasetuksia.
Videot ja koodekit
Joka perehtyy videoiden upottamiseen ja toistoon verkkosivuilla, törmää ennemmin tai myöhemmin eri koodekkien ongelmaan. Näiden koodekkien avulla videot voidaan tehokkaasti pakata ja purkaa. Ongelmana on kuitenkin se, että selainten valmistajat eivät ole vieläkään päässeet yhteisymmärrykseen yhteisestä koodekki-formaatista. HTML5:ssä (ja siten lopulta myös teille) tämä merkitsee sitä, että yhtenäisiä koodekkeja ei ole olemassa videoille eikä äänitiedostoille.
Videosisällöille muodostuneet standardit ovat nykyään muodostuneet Ogg- ja MP4-formaateista. Siksi olet aina turvallisella puolella tarjotessasi videota näissä kahdessa formaatissa. Tähän tarkoitukseen annetaan source-attribuutit video-elementille kahdelle lähteelle.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Et anna täällä videolähdettä video-elementin sisällä. Sen sijaan siellä annetaan yleistä tietoa näytöstä. Mitä videota näytetään, määritetään source-elementillä. src-attribuutti määrittää vastaavan videon. type-jälkeen ilmoitetaan, mistä videosta on kyse tai millä muodossa video on saatavilla.
Kun useita source-elementtejä on annettu, selain toistaa aina ensimmäisen videon, joka "sopii". Mitä tämä "sopii" tarkoittaa, selitetään seuraavaksi.
Mutta mitkä formaatit mitkäkin selain oikein tukee? Vastauksen tähän kysymykseen tarjoaa alla oleva taulukko.
| Selain | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Versiosta 9 alkaen | |
| Mozilla Firefox | Kyllä | |
| Google Chrome | Kyllä | Kyllä |
| Opera | Kyllä | |
| Safari | Kyllä | |
| iPhone | Kyllä | |
| Android | Kyllä |
Taulukko havainnollistaa ongelmaa: Formaattien tuki jakautuu lähes tasaisesti eri selainten kesken. Siksi on melkein pakko ilmoittaa videot molemmissa formaateissa.media-attribuutilla, joka voidaan määrätä vain source-elementille, voidaan muutenkin ilmoittaa nimenomaan, mille medialle video sopii. Määritelläkseen videoita erityisesti tietyille laitteille, src täytyy antaa media-attribuutti. Tällä media-attribuutilla ilmoitetaan haluttu mediatyyppi.source-elementin mahdollinen käyttö voisi näyttää seuraavalta:
<video width="400" height="300">
<!-- Vain mobiililaitteille -->
<source src="video_mobile.ogg" media="handheld" />
<!—Kaikille muille laitteille -->
<source src="video_normal.ogg" media="all" />
</video>
Tässä tarkistetaan media-attribuutin avulla, onko kyseessä mobiililaite. Tässä tapauksessa pienempi video toistetaan. Jos kyseessä on jokin toinen laite, käytetään all-arvoa.
Videot turvallisesti upotettuna
On tiedossa, että HTML5 ei vieläkään ole tuettuna kaikkien selainten toimesta. Tämä pätee tietysti myös video-elementtiin. Ratkaisu on yhdistää erilaisia upotustekniikoita. Tässä yhdistetään perinteisiä object- ja embed-elementtejä video-elementin kanssa. Se voi näyttää seuraavanlaiselta:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Näin upotetut videot toistuvat useimmissa selaimissa. Selaimet, jotka tunnistavat video-elementin, käyttävät sitä. Muut selaimet sen sijaan hyödyntävät object- tai embed-elementin tietoja.
