U prvom od svojih blogova za PC Pro , web programer Ian Devlin otkriva kako ugraditi video u vaše web mjesto pomoću HTML5
kako vidjeti koliko preuzimanja aplikacija ima
Vjerojatno najveća značajka HTML5-a o kojoj se najviše govori o ugrađenom videozapisu. Trenutno je jedini način dodavanja video sadržaja na vaše web mjesto dodatak treće strane poput Flash, QuickTime ili RealPlayer. S osvitom HTML5 i video elementa sve će se to promijeniti, a web-preglednik obrađuje video podršku, uklanjajući potrebu za bilo kojom podrškom treće strane.
Nekoliko web preglednika već nudi podršku za HTML5. Ovdje ćemo otkriti kako na svoju web lokaciju možete ugraditi video bez dodataka i probleme s kojima ćete se suočiti.
Vrste datoteka i kompatibilnost preglednika
Za početak ćemo ukratko pogledati različite vrste video datoteka podržane u HTML5. To su Theora OGG i H.264 (.mp4). Različiti preglednici podržavaju različite vrste, a neki uopće. Sljedeća tablica to ukazuje:
| 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 | ✓ |
Kodeci i druga tehnička pitanja
HTML5 sam ne određuje video kodek koji će se koristiti, a to je dovelo do argumenata koji to jest najbolje za upotrebu na webu . Dakle, da bismo pokrivali sve preglednike, moramo podržavati oba kodeka.
A tu je naravno i Internet Explorer. Trenutno niti jedna izdana verzija Internet Explorera ne podržava element video, a dodatak je i dalje potreban za reprodukciju videozapisa. To će se promijeniti izdavanjem Internet Explorera 9 (vjerojatno početkom sljedeće godine), kada će biti podržan H.264, zajedno s mnogim drugim HTML5 dodacima.
U slučaju da se pitate kako, svoje video datoteke možete pretvoriti u OGG (više o vrsti Theora OGG možete pročitati na TheoraCookbook ) datoteke pomoću Miro Video Converter .
Za daljnje detaljne informacije o video elementu i kodecima, idite na zaronite u html5: video na webu Marka Pilgrima.
HTML5 kôd
Sada prelazimo na stvarni HTML5 kôd i kako možemo stvar pokrenuti. HTML5 nam pruža dva nova elementa koja možemo koristiti za dodavanje videozapisa na naše web stranice: element, koji smo već spomenuli, i element. Pogledajmo svaki od njih redom.
Element
Element videozapisa može imati sljedeće atribute:
| Atribut | Opis |
|---|---|
| src | važeći URL same video datoteke |
| auto Play | logička vrijednost koja pokazuje treba li videozapis reproducirati automatski |
| kontrole | logička vrijednost koja označava da preglednik treba prikazati zadane kontrole medija |
| petlja | logička vrijednost koja pokazuje treba li videozapis ponavljati |
| predopterećenje | ukazuje pregledniku je li potrebno preliminarno preuzimanje samog videozapisa ili su samo metapodaci potrebni. Moguće vrijednosti su:
|
| poster | URL slikovne datoteke koji će se prikazati kada nisu dostupni video podaci |
| širina | širina videozapisa, u CSS pikselima |
| visina | visina videozapisa, u CSS pikselima |
Iz ovoga se vidi kako je lako ugraditi OGG video na vaše web mjesto samo pomoću video elementa:
To je zapravo sve.
Bilo koji preglednik koji podržava Theora OGG format sada bi trebao bez daljnjeg uspješno prikazati i reproducirati vaš videozapis. Naravno, to nije tako lako, jer kao što smo vidjeli iz gornje tablice, kôd bi radio samo u Firefoxu, Chromeu i Operi. Dakle, moramo imati i povratnu verziju za H.264. To se može postići pomoću element, koji nam omogućuje da definiramo više izvora medija za video element.
kako znati jeste li blokirani na groupme
Element
Izvorni element ima sljedeće atribute:
| Atribut | Opis |
|---|---|
| src | važeći URL same medijske (u ovom slučaju video) datoteke |
| tip | vrsta medijske datoteke koja mora biti MIME tip , npr. type='video/ogg' označava da se radi o Theora OGG videozapisu, a također možete pružiti MIME kodek koji će pomoći pregledniku da odluči kako će reproducirati videozapis pomoću type='video/ogg; codecs='theora, vorbis'. |
| pola | daje namjeravanu vrstu medija medijskog resursa i mora biti valjana medijski upit , npr. media='handheld' označava da je videozapis prikladan za ručne uređaje ili media='all and (min-device-height:720px)' što znači da je videozapis prikladan za zaslone od 720 piksela ili više. |
Napomena: izvorni je element void i ima početnu oznaku, ali nema završnu oznaku
Najkorisnija stvar kod izvornog elementa je što ga možemo koristiti za slaganje različitih vrsta datoteka, omogućujući pregledniku da isproba svaki zauzvrat dok ne pronađe onu koju može reproducirati.
Koristeći i zajedno
Da bismo video zapise slagali u različite vrste unutar video elementa, kôd unosimo na sljedeći način:
Your browser does not support the video element.
Gornji kod sada će raditi u svim preglednicima, osim u Internet Exploreru, koji će prikazati gore naznačenu poruku.
To možete sami testirati pregledavanjem stranice HTML5 Test Video, koja sadrži uzorak videozapisa leptira u formatu Theora OGG i MP4, pa ako ovo gledate u Firefoxu, Chromeu, Safariju, Operi ili na iPhoneu ili u Android slušalica, trebali biste je moći vidjeti.
Oštri noževi među vama sada će primijetiti da možemo iskoristiti ovo slaganje i imati zamjenski Flash (ili neki drugi dodatak) na dnu, umjesto da prikazujemo žao što ne vidite ovu videoporuku, pomoću sljedećeg koda :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Zaključak
Kao i kod većine HTML5 elemenata, podrška za preglednike za izvorne i video elemente trenutno je neispravna. Trenutno se vodi i velika rasprava hoće li izvorni element ubiti upotrebu Flasha kao najpopularnije metode dodavanja video sadržaja na web stranice. Nisam siguran da će u potpunosti ubiti Flash, ali unatoč tome mislim da je pošteno reći da je tu da ostane i pružit će web programerima čistiji i lakši pristup ugrađivanju videozapisa.
