Kada pričamo o html5 moramo da napomenemo da je to standard koji izlazi u susret web developerima u svakom pogledu. Veliki akcenat je bačen na upotrebu multimedije bez korišćenja skripti ili izvora sa strane. Iframe i Youtube na primer. Sa novim elementima html postaje mnogo više od programskog jezika na koji smo navikli. Način pristupa izradi web stranica je svakako nešto što se mora promeniti. Iako još nema pune podrške svih pregledača, već sada se može mnogo toga uraditi.

Ovo su video i audio elementi:

1. <audio>

Po nazivu pretpostavljate da se radi o elementu koji služi za reprodukciju i upotrebu audio fajlova. Iako ga svi pregledači podržavaju, neće svaki audio fajl raditi svuda. Zato je najbolje da, ako već koristite ovaj element, ubacite isti fajl u više različitih formata. Sledeći audio formati dolaze u obzir: .mpeg, .wav, .ogg. Naravno, kao i uvek, najbolje je da ih prethodno testirate u više pregledača.

Primer

A može i ovako:

Kao što vidite iz primera, postoje atributi koje možete koristiti. A isto tako između audio tagova možete ubaciti tekst koji će se prikazati u pregledačima koji ne podržavaju html5. Ovo su atributi koje možete koristiti:

autoplay="autoplay"
Precizira da li će audio fajl krenuti sa reprodukcijom čim se stranica učita. Ovo je opcioni atribut.

controls="controls"
Precizira da li će se prikazati kontrole kao što su play, pause, stop... Takođe opcioni atribut.

loop="loop"
Ovaj atribut ćete postaviti ako želite da vam se audio fajl reprodukuje u beskonačno.

preload="auto, metadata, none"
Precizira da li i kako zamišljate da se audio učita pri učitavanju stranice. Takođe opcioni atribut.

src="putanja_do_fajla"
Precizira putanju do audio fajla. Odmah posle putanje treba dodati type atribut koji precizira koji audio fajl je u pitanju. Atribut src je svakako neophodan.

Trenutno postoji podrška za sledeće formate:
 IE9 - MP3
 FF - Wav, Ogg
 Chrome - MP3, Wav, Ogg
 Safari - MP3, Wav
 Opera - Wav, Ogg

Kao što vidite, Chrome ima podršku za sve i svašta.
Audio element takođe podržava i globalne i event atribute ali o njima nekom drugom prilikom.

2. <video>

Uz pomoć ovog elementa možete koristiti video fajlove na vašoj web stranici. Do sada je bila potrebna pomoć fleš plug-ina ali od sada možete upotrebljavati ovaj novi element.

Primer

Ili ovako:

U principu i nema neke velike razlike u korišćenju video elementa od audio. Ovo su atributi koje možete koristiti:

autoplay="autoplay"
Isto kao i za audio.

controls="controls"
Takođe isto kao i za audio.

height="pixels"
Precizira visinu video plejera u pikselima.

loop="loop"
Isto kao i za audio.

muted="muted"
Precizira da li će audio u video fajlu biti "nem". U korisničkom interfejsu se neće moću uključiti zvuk. Zgodno ako ne želite da se čuje zvuk na nekom video fajlu. Opciono.

poster="putanja_do_gifa.gif"
Precizira putanju do slike koju želite da se vidi dok se video učitava ili dok posetilac ne klikne play. Najbolje neki loading gif. Opciono.

preload="auto, metadata, none"
Isto kao i za audio.

src="putanja_do_videa"
Isto kao i za audio.

width="pixels"
Precizira širinu video plejera u pikselima.

Isto kao i audio element i ovaj podržava i globalne i event atribute.

Treba napomenuti da trenutno ne podržavaju svi pregledači sve video fajlove. Podrška postoji za sledeće fajlove:
 IE9 - MP4
 FF - WebM, Ogg
 Chrome - MP4, WebM, Ogg
 Safari - MP4
 Opera - WebM, Ogg

Mali savet:
Zgodno je da se uvek precizira width i height da bi se "zauzeo" prostor pri učitavanju stranice.  

U kombinaciji sa metodama, vrednostima, eventima i javaskriptom može se napraviti svašta.
Evo jednog primera:

 
  Play/Pause 
  Big
  Small
  Normal
  
 
  
 

3. <source>

Source element se koristi kada želite da ubacite više audio/video fajlova. Dozvoljava vam da precizirate alternativne audio/video fajlove u zavisnosti koje određeni pregledači podržavaju.

Primera imate u pojašnjavanju audio i video elemenata. Možete koristiti sledeće atribute:

media="media_query"
Preizira tip "izvora upita".

src="putanja_do_fajla"
Precizira putanju do fajla.

type="MIME_type"
Precizira MIME tip izvora medija.

I ovaj element podržava globalne i event atribute.

4. <embed>

Jedan od elemenata za zaobilaženje Adobeovog fleš sadržaja. Embed definiše kontejner u koji ugrađujete medija fajlove, animacije ili web plug-inove. Nema završni tag, slično kao img element.

Primer

Ili:

Atributi koje možete koristiti:

height="pixels"
Precizira visinu ugrađenog elementa.

src="putanja"
Precizira putanju do sadržaja.

type="MIME_type"
Precizira tip MIME ugrađenog sadržaja.

width="pixels"
Precizira visinu u pikselima.

Podržava globalne i event atribute.

5. <track>

Jedan od elemenata koji će nama biti svakako zanimljiv ali koji trenutno nema podršku ni u jednom pregledaču. Track element (će) se koristi za prikaz teksta u medijskim (audio/video) elementima. Drugim rečima za prikaz titlova, između ostalog.

Primer

Od atributa se može koristiti:

default="default"
Recimo kada želite da neka pesma ide prva, osim ako to posetilac drugačije ne želi.

kind="captions, chapters, descriptions, metadata, subtitles"
Precizira koja vrsta teksta je u pitanju.

label="text"
Precizira naslov teksta.

src="putanja_do_fajla"
Neophodno. Precizira putanju do fajla.

srclang="language_code"
Precizira jezik teksta i neophodno je ako je kind="subtitles".

Podržava globalne i event atribute,

Mali savet:
.vtt je WebVTT format. Namenjen je za spoljašnje označavanje tekstom (prevod), Pišete fajl tako što uparujete rečenice sa vremenom kada će se pojaviti u vašem videu. Slično kao .srt fajlovi.

00:05.000 --> 00:08.000
<v Glumac 1>Ako ne predate pare ode kuća.

00:10.000 --> 00:13.000
<v Glumac 2>Šta će biti s' kućom?

00:20.000 --> 00:27.000
<v Glumac 1>Zapaliću je!

To bi bilo sve o audio/video elementima. Sledeći put će biti reči o za nijansu komplikovanijim elementima.