Audio i video tagovi

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.

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