V prvem od njegovih blogov za PC Pro , spletni razvijalec Ian Devlin razkriva, kako z HTML5 vdelati video v vaše spletno mesto
kako gledati youtube na roku
Verjetno največja in najbolj pogosta značilnost HTML5 je vdelani video. Trenutno je edini način dodajanja video vsebin na vaše spletno mesto zunanji vtičnik, kot so Flash, QuickTime ali RealPlayer. Z začetkom HTML5 in video elementa se bo to vse spremenilo, saj bo spletni brskalnik obdelal video podporo in odpravil potrebo po podpori tretjih oseb.
Več spletnih brskalnikov že ponuja podporo za HTML5. Tukaj bomo razkrili, kako lahko na svoje spletno mesto vdelate video brez vtičnikov in težave, s katerimi se boste soočili.
Vrste datotek in združljivost brskalnika
Za začetek si bomo na kratko ogledali različne vrste video datotek, ki jih podpira HTML5. To sta Theora OGG in H.264 (.mp4). Različni brskalniki podpirajo različne vrste, nekateri pa sploh ne. Naslednja tabela kaže na to:
| 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 | ✓ |
Kodeki in druga tehnična vprašanja
HTML5 sam ne določa video kodeka za uporabo, kar je privedlo do argumentov, kateri je najboljši za uporabo v spletu . Da bi pokrivali vse brskalnike, moramo podpirati oba kodeka.
In potem je tu še Internet Explorer. Trenutno nobena izdana različica Internet Explorerja ne podpira elementa video, za predvajanje videa pa je še vedno potreben vtičnik. To se bo spremenilo z izdajo Internet Explorerja 9 (verjetno v začetku prihodnjega leta), ko bo podprt H.264, skupaj s številnimi drugimi dobrotami HTML5.
Če se sprašujete kako, lahko svoje video datoteke pretvorite v OGG (več o vrsti Theora OGG lahko preberete na TheoraCookbook ) z datotekami Miro Video Converter .
Za nadaljnje poglobljene informacije o video elementu in kodekih pojdite na potopite se v html5: video v spletu avtor Mark Pilgrim.
Koda HTML5
Zdaj preidemo na dejansko kodo HTML5 in kako lahko stvar dosežemo. HTML5 nam ponuja dva nova elementa, s katerimi lahko na naše spletne strani dodamo video: element, ki smo ga že omenili, in element. Poglejmo si vsakega po vrsti.
Element
Video element ima lahko naslednje atribute:
| Atribut | Opis |
|---|---|
| src | veljaven URL do same video datoteke |
| samodejno predvajanje | logična vrednost, ki označuje, ali naj se videoposnetek predvaja samodejno |
| nadzor | logična vrednost, ki označuje, da naj brskalnik prikaže privzete kontrolnike za predstavnost |
| zanko | logična vrednost, ki označuje, ali je treba video predvajati večkrat |
| prednapetost | brskalniku nakaže, ali je potreben predpomnilniški prenos samega videoposnetka, ali pa so potrebni samo metapodatki. Možne vrednosti so:
|
| plakat | URL slikovne datoteke, ki se prikaže, če ni na voljo nobenih video podatkov |
| premer | širina videoposnetka v pikah CSS |
| višina | višina videoposnetka v pikah CSS |
Iz tega je razvidno, kako enostavno je vdelati video OGG v vaše spletno mesto samo z video elementom:
To je res vse.
Vsak brskalnik, ki podpira format Theora OGG, bi zdaj moral brez nadaljnjega uspešno prikazati in predvajati vaš video. Seveda to ni tako enostavno, saj, kot smo videli iz zgornje tabele, bi koda delovala samo v Firefoxu, Chromu in Operi. Torej moramo imeti tudi nadomestni H.264. To lahko dosežete z element, ki nam omogoča, da za video element definiramo več medijskih virov.
kako spremeniti besedo doc v jpeg
Element
Izvorni element ima naslednje atribute:
| Atribut | Opis |
|---|---|
| src | veljaven URL do same medijske (v tem primeru video) datoteke |
| tip | vrsta predstavnostne datoteke, ki mora biti Vrsta MIME , npr. type='video/ogg' označuje, da gre za video Theore OGG, prav tako pa lahko priskrbite kodek MIME, ki brskalniku pomaga, da se odloči, kako predvajati video, z uporabo type='video/ogg; codecs='theora, vorbis' |
| pol | podaja predvideno vrsto medija medija in mora biti veljavna medijska poizvedba , npr. media='handheld' označuje, da je video primeren za ročne naprave ali media='all and (min-device-height:720px)' kar pomeni, da je video primeren za zaslone z velikostjo 720 pik ali več. |
Opomba: izvorni element je ničen in ima začetno oznako, ne pa tudi zaključne oznake
Najbolj koristno pri izvornem elementu je, da ga lahko uporabimo za skladanje različnih vrst datotek, kar omogoča brskalniku, da poskusi vsako po vrsti, dokler ne najde tiste, ki jo lahko predvaja.
Uporaba in skupaj
Če želimo videoposnetke zložiti v različne vrste znotraj video elementa, vnesemo kodo na naslednji način:
Your browser does not support the video element.
Zgornja koda bo zdaj delovala v vseh brskalnikih, razen v Internet Explorerju, ki bo prikazal zgoraj navedeno sporočilo.
To lahko preizkusite sami, tako da si ogledate stran HTML5 Test Video, ki vsebuje vzorec videoposnetka metulja v obliki Theora OGG in MP4, tako da, če si to ogledujete v Firefoxu, Chromu, Safariju, Operi ali na iPhoneu ali v Android telefon, bi si ga morali ogledati.
Ostri noži med vami bodo zdaj opazili, da lahko izkoristimo to zlaganje in na dnu uporabimo nadomestno različico Flash (ali katerega drugega vtičnika), namesto da bi prikazali žal, da tega video sporočila ne morete videti, z uporabo naslednje kode :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Zaključek
Kot pri večini elementov HTML5 je podpora brskalnika za izvorne in video elemente trenutno neenakomerna. Trenutno poteka tudi velika razprava o tem, ali bo izvorni element uničil uporabo Flasha kot najbolj priljubljene metode dodajanja video vsebin na spletna mesta. Nisem prepričan, da bo Flash popolnoma ubil, kljub temu pa se mi zdi pravično reči, da je tu, da ostane, in razvijalcem spletnih strani omogočil čistejši in enostavnejši pristop k vdelavi videoposnetkov.
