Ensimmäisessä hänen blogissaan PC Pro, Web-kehittäjä Ian Devlin paljastaa, kuinka upottaa videoita verkkosivustollesi HTML5:n avulla
HTML5:n luultavasti suurin ja puhutuin ominaisuus on upotettu video. Tällä hetkellä ainoa tapa lisätä videosisältöä verkkosivustollesi on käyttää kolmannen osapuolen laajennuksia, kuten Flash, QuickTime tai RealPlayer. HTML5:n ja videoelementin kynnyksellä tämä kaikki muuttuu, kun verkkoselain hoitaa videotuen, mikä poistaa kolmannen osapuolen tuen tarpeen.
Useat verkkoselaimet tarjoavat jo tuen HTML5:lle. Tässä aiomme paljastaa, kuinka voit upottaa liitännäisvapaata videota sivustollesi ja kohtaamasi ongelmat.
Tiedostotyypit ja selaimen yhteensopivuus
Aluksi tarkastellaan lyhyesti eri videotiedostotyyppejä, joita HTML5 tukee. Nämä ovat Theora OGG ja H.264 (.mp4). Eri selaimet tukevat eri tyyppejä, ja jotkut eivät tue mitään. Seuraava taulukko osoittaa tämän:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Koodekit ja muut tekniset ongelmat
HTML5 itsessään ei määritä käytettävää videokoodekkia, ja tämä on johtanut väitteisiin siitä, mikä on paras verkkokäyttöön. Joten kattaaksemme kaikki selaimet, meidän on tuettava molempia koodekkeja.
Ja sitten on tietysti Internet Explorer. Tällä hetkellä mikään Internet Explorerin julkaistuista versioista ei tue videoelementtiä ja videon toistamiseen tarvitaan edelleen laajennus. Tämä muuttuu Internet Explorer 9:n julkaisun myötä (todennäköisesti ensi vuoden alussa), jolloin tuetaan H.264:ää ja monia muita HTML5-herkkuja.
Jos mietit miten, voit muuntaa videotiedostosi OGG: ksi (voit lukea lisää Theora OGG -tyypistä osoitteessa Theora-keittokirja) tiedostot käyttämällä Miro Video Converter.
Jos haluat lisätietoja videoelementistä ja koodekeista, siirry kohtaan sukeltaa html5:een: video verkossa Kirjailija: Mark Pilgrim
HTML5-koodi
Nyt siirrymme varsinaiseen HTML5-koodiin ja siihen, miten saamme asian toimimaan. HTML5 tarjoaa meille kaksi uutta elementtiä, joiden avulla voimme lisätä videoita verkkosivuillemme: elementti, jonka olemme jo maininneet, ja elementti. Katsotaanpa jokaista näistä vuorotellen.
The
Videoelementillä voi olla seuraavat attribuutit:
| Attribuutti | Kuvaus |
|---|---|
| src | kelvollinen URL-osoite itse videotiedostoon |
| automaattinen toisto | looginen arvo, joka ilmaisee, toistetaanko video automaattisesti |
| säätimet | looginen arvo, joka osoittaa, että selaimen tulee näyttää oletusmediasäätimet |
| silmukka | looginen arvo, joka osoittaa, pitäisikö video toistaa toistuvasti |
| esilataus | ilmaisee selaimelle, vaaditaanko itse videon ennakkolataus vai riittääkö pelkkä metadata. Mahdolliset arvot ovat:
|
| juliste | URL-osoite kuvatiedostoon, joka näytetään, kun videodataa ei ole saatavilla |
| leveys | videon leveys CSS-pikseleinä |
| korkeus | videon korkeus CSS-pikseleinä |
Tästä voidaan nähdä, kuinka helppoa on upottaa OGG-video verkkosivustollesi pelkällä videoelementillä:
Siinä on oikeastaan kaikki.
Kaikkien Theora OGG -muotoa tukevien selaimien pitäisi nyt näyttää ja toistaa videosi onnistuneesti ilman lisäpuheita. Se ei tietenkään ole niin helppoa, koska kuten yllä olevasta taulukosta olemme nähneet, koodi toimisi vain Firefoxissa, Chromessa ja Operassa. Joten meillä on oltava myös varavaihtoehto H.264:ään. Tämä voidaan saavuttaa käyttämällä elementti, jonka avulla voimme määrittää useita medialähteitä videoelementille.
The elementti
Lähdeelementillä on seuraavat attribuutit:
| Attribuutti | Kuvaus |
|---|---|
| src | kelvollinen URL-osoite itse mediatiedostoon (tässä tapauksessa videotiedostoon). |
| tyyppi | mediatiedoston tyyppi, jonka on oltava a MIME-tyyppi, esim. type="video/ogg" ilmaisee, että kyseessä on Theora OGG -video, ja voit myös tarjota MIME-koodekin, joka auttaa selainta päättämään, miten video toistetaan käyttämällä type='video/ogg; codecs="theora, vorbis". |
| media | antaa mediaresurssin tarkoitetun mediatyypin ja sen on oltava kelvollinen mediakysely, esim. media="handheld" ilmaisee, että video sopii kämmenlaitteille tai media="all and (min-device-height: 720px)" mikä osoittaa, että video sopii vähintään 720 pikselin näytöille. |
Huomaa: lähdeelementti on mitätön ja sillä on aloitustunniste, mutta ei lopputunnistetta
Hyödyllisin asia lähdeelementissä on, että voimme käyttää sitä pinoamaan eri tiedostotyyppejä, jolloin selain voi kokeilla kutakin vuorotellen, kunnes se löytää sellaisen, jota se voi toistaa.
Käyttämällä
Pinoaksemme videoita eri tyyppeihin videoelementin sisällä syötämme koodin seuraavasti:
Yllä oleva koodi toimii nyt kaikissa selaimissa paitsi Internet Explorerissa, joka näyttää yllä olevan viestin.
Voit testata tätä itse katsomalla HTML5 Test Video -sivua, joka sisältää näytevideon perhosesta sekä Theora OGG: ssä että MP4:ssä muodossa, joten jos katselet tätä Firefoxissa, Chromessa, Safarissa, Operassa tai iPhonessa tai Android-puhelimessa, sinun pitäisi pystyä katsomaan se.
Teidän terävät veitset ovat nyt huomanneet, että voimme hyödyntää tätä pinoamista ja palata Flashiin (tai jokin muu laajennus) alareunassa sen sijaan, että näyttäisit "anteeksi, ette näe tätä videota" -viestin, käyttämällä seuraavaa koodi:
Johtopäätös
Kuten useimpien HTML5-elementtien kohdalla, selaimen tuki lähde- ja videoelementeille on tällä hetkellä hajanaista. Tällä hetkellä käydään myös laajaa keskustelua siitä, tappaako lähdeelementti Flashin käytön suosituimpana tapana lisätä videosisältöä verkkosivustoille. En ole varma, että se tappaa Flashin kokonaan, mutta mielestäni on kuitenkin reilua sanoa, että se on tullut jäädäkseen ja tarjoaa verkkokehittäjille selkeämmän ja helpomman lähestymistavan videoiden upottamiseen.
