HTML Osnove

Umetanje audio i video zapisa u web stranu

Video i audio tagovi su tagovi uvedeni u HTML verziji 5. Iz tog razloga, postoji problem kako omogućiti da starije verzije pretraživača budu u mogućnosti da ispravno prikažu video i audio sadržaj obzirom da ga ne podržavaju. Dodatni problem je što različite verzije pretraživača, čak i kada imaju podršku za video tag, ne podržavaju isti format samih video fajlova.

Kako bi zadovoljili najveći broj korisnika koji dolaze sa raznih platformi i koriste različite pretraživače, svaki video snimićemo u 3 formata i to:

.mp4 (Internet Explorer i Safari)

.ogv (Firefox i Chrome)

.webm (ostali pretraživači)

Za namenu konvertovanja video formata koji imate, bilo da je .avi, .mp4 ili neki drugi, možete koristiti besplatne aplikacije

Nakon što konvertujete vaš video u formate mp4, ogv i webm, potrebno je kreirati odgovarajući kod:

<video width=”320” height=”240” controls>

<source src=”mojvideo.mp4” type=”video/mp4”>

<source src=”mojvideo.ogv” type=”video/ogg”>

<source src=”mojvideo.webm” type=”video/webm”>

</video>

Zavisno od pretraivača, iz video taga će uzeti prvi video format koji podržava a preostale ignorisati. Tako će Firefox preskočiti mp4 liniju i iskoristiti mojvideo.ogv zapis.

Ovim smo rešili problem različitih pretraživača. Ostaje nam problem ranijih verzija pretraživača koje ne podržavaju video tag. U tu svrhu potreban nam je mp4 video fajl i poseban tag embed.

Na kraju, kako bi pokrili većinu slučajeva kompletan kod izgleda ovako:

<video width=”320” height=”240” controls>

<source src=”mojvideo.mp4” type=”video/mp4”>

<source src=”mojvideo.ogv” type=”video/ogg”>

<source src=”mojvideo.webm” type=”video/webm”>

<embed src=”mojvideo.mp4” type=”application/x-shockwave-flash” width=”320“ height=“240“ allowscriptaccess=“always“ allwfullscreen=“true“>

</video>

Zašto nije problem što embed tag stavljamo unutar video taga? On je ionako namenjen pretraživačima koji ne podržavaju video tag pa će ga ignorisati pri prolasku kroz HTML kod i procesirati prvi koji razumeju, u ovom slučaju embed tag.

 

Audio

Slična priča je i u slučaju audio taga. Postrebno je imati više formata i fallback opciju za starije pretraživače. Razlika je što ovde umesto 3 imamo 2 neophodna audio fajla. Kompletan kod izgleda ovako:

<audio autoplay loop>

<source src=”mojaudio.mp3”>

<source src=”mojaudio.ogg”>

<embed src=”mojaudio.mp3”>

</audio>

Ovim završavamo deo obuke vezan za HTML i prelazimo na drugi nivo, tj. CSS kojim web strane činimo lepšim i interesantnijim za posetioce.

 

Poštovani čitaoče,

Kao autor, odričem se finansijske nadoknade za ovaj edukativni materijal, ali se ne odričem autorskih prava. Sva prava na ovaj materijal su zadržana.Ovaj materijal je besplatan za privatnu upotrebu. Ne smete ga prodavati, menjati ili polagati prava na njega, u celini ili u njegovim delovima.

Iznad svega, i najvažnije, nadam se da će vam biti od koristi.

Bratimir Timotijević, IT4YOU

Beograd, Mart 2015.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn