Korišćenje HTML5 Videa na Lakši Način


Korišćenje HTML5 Videa na Lakši Način

Ako do sada niste imali razlog da naučite HTML5 video implementaciju sad ćemo Vam reći zašto treba to da znate… Flash za mobilne uređaje praktično ne postoji. Mobilni uređaji su sve zastupljeniji i imaju sve više mogućnosti i predviđanje je da će do 2014 godine više ljudi surfovati internetom preko mobilnih uređaja nego preko desktop računara. Implementacija video materijala je izuzetno jednostavna uz pomoć HTML5 i u nastavku članka ćemo vam predstaviti nekoliko načina za implementaciju kao i par stvari na koje treba pripaziti.

Kako <video> tag funkcioniše

Pre HTML5 koristili smo <embed> ili <object> tagove za ovakve stvari. Ne znamo da li ste probali da namestite video na ovakav način ali reći ćemo da može da izazove glavobolju. Kao što se može primetiti korišćeni su eksterni izvori za procesiranje video materijala. Eksterni izvori znači da su korišćeni plug in-ovi koji nisu 100% kompatibilni sa sadržajem. Sa druge strane video tag je veoma jednostavan on pokazuje koje izvore može da koristi a u slučaju da ne može da koristi to što želite ispisaće vam poruku za alternativu.

<video width=“320″ height=“240″ controls=“controls“>
<source src=“movie.mp4″ type=“video/mp4″ />
<source src=“movie.ogg“ type=“video/ogg“ />
<source src=“movie.webm“ type=“video/webm“ />
Bad news, you can’t see the amazing stuff that is here.
</video>

Ovde će vam trebati izvori kao što su .mp4, .mp3, .ogg, .webm. a ako nemate neki od ovih formata tu je dosta html5 video konvertera.
Trebaće vam različiti tipovi fajlova iz razloga što Firefox (3.5+), Opera(10.5+) i Chrome(5.0+) podržavaju .ogg dok Internet explorer(9.0+) i Safari(3.0+) podržavaju .mp4.
Postoji nekoliko alternativa da se pobrinete kako bi vaši korisnici videli vaš video.

Atraktivni video player

Niste ograničeni na korišćenje samo ugrađenog plejera za video tag. Zapravo možete uraditi mnoge zanimljive stvari kao što su dodavanje CSS efekata, canvas reprdukcija itd.
Ovde možete pogledati kako je poseban video player napravljen.

Kako ove posebne kontrole funkcionišu?

Kada se učita video koristićemo jQuery da uklonimo standardne kontrole i da dodamo naše HTML kontrole. Zatim jQuery kontroliše sve atribute koji nam trebaju kao readyState (ako se video pušta), vreme trajanja (da može slajder da se koristi), currentTime (da se vidi koliko je video-a pušteno) i kontrole za zvuk.

Posle podešavanja JS videćete da se video kontrole mogu lako stilizovati preko CSS-a kao što je trebalo da bude u početku.

Source: Opera Tutorial

Ima dosta plug in-ova koji mogu pomoći u celom procesu. Da pogledamo nekoliko:

WordPress Plugin – HTML5 i Flash Video Player

Sa ovim dodatkom sa lakoćom možete dodati video na stari način ili novi HTML5 sa flash fallback-om, uz pomoć shortcode-ova: [videoplayer file=“video/video.flv“ /] ili [videoplayer file=“video/video.mp4, ogg, webm“ /]

Napravite HTML5 video kao pozadinu sa jQuery.VideoBG plugin

Odlična stvar! Možete implementirati video u pozadinu i dobiti zaista snažan efekat.

Odličan video player ttwVideoPlayer jQuery Plugin

Jedan od najboljih video playera koji postoje i osim izgleda ima i sve potrebne opcije.

All in one rešenje jPlayer

Pogledajte prvi demo i shvatićete da nije u pitanju samo još jedan jQuery video plugin. Omogućava neke opcije koje su bile moguće samo u Flash-u.

Još jedna opcija – Html5video.org

Ovde možete pronaći objašnjenja i vesti vezane za HTML5 video tag.

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest