Ensimmäisessä blogissaan PC Pro , Web-kehittäjä Ian Devlin paljastaa, miten video upotetaan verkkosivustoosi HTML5: n avulla
miten vaihtaa legendojen liigan käyttäjänimeä
Todennäköisesti HTML5: n suurin ja eniten puhuttu ominaisuus on upotettu video. Tällä hetkellä ainoa tapa lisätä videosisältöä verkkosivustoosi on kolmannen osapuolen laajennus, kuten Flash, QuickTime tai RealPlayer. HTML5: n ja videoelementin alkaessa tämä kaikki muuttuu, web-selain hoitaa videotuen ja poistaa kolmannen osapuolen tuen tarpeen.
Useat verkkoselaimet tarjoavat jo tukea HTML5: lle. Tässä kerromme, kuinka voit upottaa laajennuksettoman videon sivustoosi ja kohtaamasi ongelmat.
Tiedostotyypit ja selainten yhteensopivuus
Aluksi tarkastelemme lyhyesti HTML5: ssä tuettuja videotiedostotyyppejä. Nämä ovat Theora OGG ja H.264 (.mp4). Eri selaimet tukevat erilaisia, ja jotkut eivät lainkaan. 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 kysymykset
HTML5 ei itse määrittele käytettävää videokoodekkia, ja tämä on johtanut argumentteihin siitä, mikä on paras käyttää verkossa . Joten kaikkien selainten kattamiseksi meidän on tuettava molempia koodekkeja.
Ja tietysti siellä on 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 julkaisemisen 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ä TheoraCookbook ) tiedostoja käyttämällä Miro Video Converter .
Jos haluat lisätietoja videoelementistä ja koodekeista, siirry sukeltaa html5: -videoon verkossa kirjoittanut Mark Pilgrim.
HTML5-koodi
Nyt siirrymme varsinaiseen HTML5-koodiin ja miten voimme saada asian toimimaan. HTML5 tarjoaa meille kaksi uutta elementtiä, joiden avulla voimme lisätä videoita verkkosivuillemme: jo mainitsemamme elementin ja elementti. Katsotaanpa kutakin näistä vuorotellen.
Elementti
Videoelementillä voi olla seuraavat määritteet:
| Attribuutti | Kuvaus |
|---|---|
| src | kelvollinen URL-osoite itse videotiedostoon |
| automaattinen toisto | totuusarvo, joka osoittaa, onko video toistettava automaattisesti |
| ohjaimet | totuusarvo, joka osoittaa, että selaimen pitäisi näyttää oletusmediaohjaimet |
| silmukka | totuusarvo, joka osoittaa, onko video toistettava toistuvasti |
| esilataus | ilmaisee selaimelle, tarvitaanko itse videon ennakoiva lataaminen vai tarvitaanko vain metatietoja. Mahdolliset arvot ovat:
|
| juliste | URL-osoite kuvatiedostoon, joka näytetään, kun videotietoja ei ole käytettävissä |
| leveys | videon leveys CSS-pikseleinä |
| korkeus | videon korkeus CSS-pikseleinä |
Tästä näkyy, kuinka helppoa on upottaa OGG-video verkkosivustollesi pelkällä video-elementillä:
Siinä on oikeastaan kaikki.
Kaikkien Theora OGG -muotoa tukevien selainten pitäisi nyt näyttää ja toistaa videosi onnistuneesti ilman lisätoimenpiteitä. Tietenkään se ei ole niin helppoa kuin se, koska kuten olemme nähneet yllä olevasta taulukosta, koodi toimisi vain Firefoxissa, Chromessa ja Operassa. Joten meillä on oltava myös varajärjestelmä H.264: lle. Tämä voidaan saavuttaa käyttämällä elementti, jonka avulla voimme määrittää useita mediaelementtejä videoelementille.
Windows 10: n käynnistyspainike lakkasi toimimasta
Elementti
Lähde-elementillä on seuraavat määritteet:
| Attribuutti | Kuvaus |
|---|---|
| src | kelvollinen URL-osoite itse mediatiedostoon (tässä tapauksessa video) |
| tyyppi | mediatiedoston tyyppi, jonka on oltava a MIME-tyyppi , esimerkiksi. type='video/ogg' ilmaisee, että kyseessä on Theora OGG -video, ja voit myös antaa MIME-koodekin, joka auttaa selainta päättämään videon toistamisesta käyttämällä type='video/ogg; codecs='theora, vorbis' |
| puoli | antaa mediaresurssille tarkoitetun mediatyypin ja sen on oltava kelvollinen mediakysely , esimerkiksi. media='handheld' ilmaisee, että video soveltuu kannettaville laitteille tai media='all and (min-device-height:720px)' mikä osoittaa, että video soveltuu 720 pikselin tai sitä suuremmille näytöille. |
Huomaa: Lähde-elementti on mitätön ja sillä on alkutunniste, mutta ei lopputagia
Lähde-elementin hyödyllisintä on, että voimme käyttää sitä pinota erilaisia tiedostotyyppejä, jolloin selain voi kokeilla kutakin peräkkäin, kunnes se löytää sellaisen, jota se voi toistaa.
Käyttämällä ja yhdessä
Jotta pinoat videot erityyppisiin videoelementteihin, syötämme koodin seuraavasti:
Your browser does not support the video element.
Yllä oleva koodi toimii nyt kaikissa selaimissa paitsi Internet Explorerissa, joka näyttää yllä ilmoitetun viestin.
Voit testata tämän itse katsomalla HTML5-testivideosivun, joka sisältää perhosnäytevideon sekä Theora OGG- että MP4-muodossa, joten jos katsot tätä Firefoxissa, Chromessa, Safarissa, Operassa tai iPhonessa tai Android-luurin, sinun pitäisi pystyä katsomaan sitä.
Terävät veitset keskuudessasi huomaavat nyt, että voimme hyödyntää tätä pinoamista ja saada alavara Flashiin (tai muuhun laajennukseen) sen sijaan, että näytät valitettavasti, ettet näe tätä videoviestiä, käyttämällä seuraavaa koodia :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Johtopäätös
Kuten useimpien HTML5-elementtien kohdalla, myös lähde- ja videoelementtien selaintuki on tällä hetkellä hajanaista. Tällä hetkellä käydään myös laaja keskustelu siitä, tappako lähde-elementti Flashin käytön suosituimpana tapana lisätä videosisältöä verkkosivustoille. En ole varma, että se tappaa Flashin kokonaan, mutta mielestäni on silti reilua sanoa, että se on täällä jäädäkseen, ja tarjoaa web-kehittäjille puhtaamman ja helpomman lähestymistavan videoiden upottamiseen.
