HTML5-video

Jos luot videon, tahdot ehkä näyttää sen verkkosivulla. Koodi, jolla verkkosivu luodaan, perustuu sääntöihin, joita kutsutaan HTML:ksi, ja näistä säännöistä on tullut juuri uusi versio, jota kutsutaan HTML5:ksi.

HTML5 sisältää uuden ominaisuuden: videotägin. "Tägi" on muutama rivi HTML-koodia, joka käskee selainta näyttämään jotain tai tekemään jotain. HTML5 videotägi sallii yksinkertaisen videoiden integraation samaan tapaan kuin kuvia liitetään verkkosivulle.

Videota voidaan myös näyttää hyvin käyttökelpoisten ohjaimien kanssa. Ohjaimilla videon voi toistaa, pysäyttää, äänenvoimakkuutta voi vaihtaa, ja videon aikajanaa voi vierittää.

Perussyntaksi

Tässä on perusesimerkki videon sisällyttämisestä sivulle HTML5-koodin avulla:

<video src="video.ogv"></video>

Edellinen esimerkki liittää videotiedoston 'video.ogv' verkkosivulle. Tämän esimerkin tiedoston pitäisi olla samassa hakemistossa kuin HTML-tiedoston, koska "src"-parametri viittaa paikalliseen tiedostoon. Jos tahdot viitata toisessa hakemistossa olevaan tiedostoon samalla verkkopalvelimella, joudut tarjoamaan polkutiedot aivan kuin tekisit kuvatiedoston tapauksessa.

<video src="/bin/edit/myvideofiles/video.ogv"></video>

Voit myös määritellä toisella palvelimella olevan tiedoston:

<video src="http://mysite.com/video.ogv"></video>

Parametrit

Lisäparametrien lisääminen antaa lisää hallintaa videon suhteen.

<video tabindex="0" src="video.ogv">< height="320" width="480">

Tässä esimerkissä videon korkeus (height) ja leveys (width) on määritelty. Jos et tahdo kuvan näyttävän vääristyneeltä, on tärkeää asettaa korkeus- ja leveysulottuvuudet oikein. autoplay merkitsee, että video soitetaan automaattisesti sivun latauduttua. controls merkitsee, että videon toistamiseen ja pysäyttämiseen liittyvät ohjaimet ovat näkyvillä.

On mahdollista liittää tekstiä tai muuta HTML-sisältöä videotägiin vaihtoehtoisena sisältönä, joka näytetään, jos selain ei tue videotägiä.

Omien ohjaintesi tai soittimen kuoren käyttö

Jos osaat hieman JavaScriptiä, voit hallita helposti videon toistoa. Sen sijaan, että käyttäisit selaimen tarjoamia ohjaimia, voit luoda oman käyttöliittymän ja ohjailla videoelementtejä JavaScriptin avulla. On kaksi asiaa, jotka sinun täytyy muistaa tätä metodia käyttäessäsi:

1. Älä unohda pudottaa controls-attribuuttia
2. Video tarvitsee id-parametrin, kuten tässä:
   

   <video src="video.ogv" id="omavideo"></video>

Joitain JavaScript-funktioita:

video = document.getElementById("omavideo");
//toista video
video.play();
//pysäytä video
video.pause();
//mene 10 sekunnin kohdalle videossa
video.currentTime = 10;

Jos sinulla on monta videotägiä yhdellä verkkosivulla, sinun tulee antaa jokaiselle yksilöllinen id, jotta JavaScript tietää, mihin videoon ohjaimet viittaavat.

Videotägien tarjoamien funktioiden ja tapahtumien koko lista löytyy HTML5-spesifikaatiosta sivulla http://www.whatwg.org/specs/web-apps/current-work/#video

Manuaaliset vaihtoehdot

Edellisessä yksinkertaisessa esimerkissä videoelementti näyttää tekstin videoelementin sisällä, jos selain ei tue sitä.

Tekstin sijasta on mahdollista käyttää Cortadoa vaihtoehtona, jos selain tukee Javaa. Cortado on avoimen lähdekoodin useamman alustan ja selaimen Ogg Theora -soitin, joka on kirjoitettu Javalla. Hieno asia on, että käyttäjän ei tarvitse ladata mitään ylimääräisiä Java-paketteja, koska sovelma käyttää selaimen sisäistä Javaa. Cortadon kotisivu löytyy täältä:

http://www.theora.org/cortado.jar

Voit ladata jar-tiedoston tai voit viitata siihen suoraan. Seuraavassa esimerkissä Cortado liitetään sivulle (kaikkia parametrejä ei vaadita, mutta tämä lista antaa kuvan mahdollisista vaihtoehdoista):

    <applet code="com.fluendo.player.Cortado.class"
            archive="http://www.theora.org/cortado.jar" 	    width="352" height="288">       <param name="url" value="http://myserver.com/theora.ogv"/>
      <param name="framerate" value="29"/>
      <param name="keepAspect" value="true"/>
      <param name="video" value="true"/>
      <param name="audio" value="true"/>
      <param name="bufferSize" value="100"/>
      <param name="userId" value="user"/>
      <param name="password" value="test"/>
    </applet>

Jos tahdot ladata jar-tiedoston vaihtoehtona, varmista että laitat sen (cortado.jar) ja edellisen HTML-sivun samaan hakemistoon. Vaihda sitten seuraava rivi sisältämään viite (linkki) omaan OGG-striimiisi (suoraan lähetykseen tai esinauhoitettuun):

<param name="url" value="http://palvelimeni.fi/theora.ogv"/>