Multimedijalni elementi u HTML-5

U poslednjih nekoliko godina, video i audio na Internetu postaju sve dostupniji i lokacije kao što su youtube, Vimeo,  MySpace, i desetine drugih čine da sad svako može lako da postavi video i audio. Međutim, pošto HTML trenutno nema neophodna sredstva za uspešno postavljanje i kontrolu multimedije, mnogi sajtovi su oslanjaju na flash da obezbede ove funkcionalnosti. Iako je moguće ugraditi multimediju koristeći razne dodatke (kao što su quicktime, windovs media, itd), flash je trenutno jedini široko primenjeni plugin koji omogućava cross-browser kompatibilna rešenja sa željenim API-jem za programere.

Kao što se vidi po raznim flash plejerima, autori su zainteresovani za pravljenje sopstvenih, specijalno dizajniranih korisničkih interfejsa, koji omogućuju korisnicima da video (audio) puste, zaustave, prekinu, pretražuju, ali i da podešavaju jačinu zvuka. Plan je da se ova funkcionalnost obezbedi u pretraživačima dodajući podršku za ugrađivanje video i audio fajlova i DOM APIa za skript za kontrolu reprodukcije.

Novi video i audio elementi učiniće ove stvari lakim. Većina API-ja se deli u dve grupe, a jedina razlika se odnosi na inherentne razlike između vizuelnih i ne-vizuelnih medija.

Opera i WebKit su ugradili delimičnu podršku za video elemente. Možete preuzeti eksperimentalna izdanja Opere ili WebKit-a da isprobate ove primere. Opera uključuje podršku za Ogg Theora format a WebKit podržava sve formate koje podržava quicktime, uključujući i dodane kodeke.

 

Prikazivanje video formata

Najjednostavniji način da ugradite video je da koristite video element omogućujući pretraživacu da obezbedi podrazumevani korisnički interfejs . Kontrolni atribut je atribut koji označava da li autor želi ovaj UI ili ga podrazumevano isključuje.

<video src="video.ogv" controls poster="slika.jpg" 

width="320" height="240">

 <a href="video.ogv">Preuzmi film</a>

</video>

Opcioni poster atribut se koristi da odredi sliku koja ce biti prikazana na mestu videa pre nego video krene. Iako postoje neki video formati koji podržavaju sopstveni poster, kao što su MPEG-4, ovo daje alternativna rešenja koja mogu da rade nezavisno od videa formata.

 

Prikazivanje audio formata

Veoma je jednostavno ugraditi audio u stranicu pomoću audio elemenata. Većina atributa su zajednički za video i audio element, iako iz očiglednih razloga, audio elementu nedostaju širina, visina, i poster atributi.

<audio src="music.oga" controls>

 <a href="music.oga">Preuzmi pesmu</a>

</audio>

HTML-5 obezbeđuje element za alternativne video i audio fajlove koje pretraživac može izabrati na osnovu tipa medija ili kodeka koje podržava. Media atribut se može koristiti da biste naveli medije za izbor na osnovu ograničenja uređjaja i tipa atributa za specifikaciju vrste medija i kodeka. Imajte na umu da kada koristite ove elemente, src atribut treba da bude izostavljen iz roditeljskih video ili audio elemenata ili će alternative biti ignorisane.

<video poster="poster.jpg">

 <source src="video.3gp" type="video/3gpp" 

 media="handheld">

 <source src="video.ogv" type="video/ogg;

 codecs=theora, vorbis">

 <source src="video.mp4" type="video/mp4">

</video>

<audio>

 <source src="music.oga" type="audio/ogg">

 <source src="music.mp3" type="audio/mpeg">

</audio>

 

Skript za kontrolu multimedije

Za autore koji žele malo veću kontrolu nad korisničkim interfejsom, tako da oni mogu da se uklope u celokupan dizajn web sajta, veliki API obezbeđuje nekoliko metoda i  skript za kontrolu reprodukcije medija. Najjednostavniji način za upotrebu je play(), pause(), i podešavanje vremena za premotavanje unazad na pošetak. Sledeći primer ilustruje upotrebu ovoga:

<video src="video.ogg" id="video"></video>

<script>

 var video = document.getElementById("video");

</script>

<p><button type="button" onclick="video.play();">Play</button>

 <button type="button" onclick="video.pause();">Pause</button>

 <button type="button" onclick="video.currentTime = 0;">

 << Rewind</button>

Postoji mnogo drugih atributa i API-ja za video i audio elemente koji ovde nisu pomenuti. Za više informacija, pogledajte trenutni nacrt specifikacije.