Napredni veb-dizajn

HTML elementi za multimediju

 Šta ćete naučiti na ovom času
● HTML oznake za označavanje multimedijalnog
sadržaja
 Multimedijalni sadržaj
U multimedijalne sadržaje ubrajamo:
– audio datoteke
– video datoteke
– interaktivni multimedijalni sadržaj

Reprodukcija ovakvog sadržaja se izvorno odvijala uz

pomoć priključaka (eng. plugin). Najviše uz pomoć
Adobe Flash Player priključka.
 Multimedijalni sadržaj
HTML i veb-pregledači su se razvili tako da mogu
samostalno da vrše reprodukciju multimedijalnog sadržaja
HTML ima elemente koji služe za označavanje
multimedijalnog sadržaja. To su:
– <video> — video sadržaj (slika i zvuk)

– <audio> — audio sadržaj (zvuk)

– <canvas> — interaktivno polje (slika, zvuk, interakcija)
 Element <video>
Veb-pregledači podržavaju sledeće kontejnere i
kodeke (eng. codec) za video datoteke:
– ogg — video kodek theora, audio kodek vorbis
– mp4 — video kodek H.264, audio kodek AAC
– webm — video kodek VP8, audio kodek vorbis
 Element <video>
Formati „ogg“ i „webm“, i kodeci koji ih prate, su
slobodni formati tj. nisu ograničeni patentima
U praksi neki pregledači podržavaju samo određene
video formate, tako da moramo da napravimo više
verzija jednog istog sadržaja, mada možemo da
koristimo samo „mp4“ format, s obzirom da ga
podržavaju svi glavni pregledači
 Element <video>
Upotreba <video> elementa:
<video src="video.mp4" width="720" height="576"
poster="frejm.jpg" controls autoplay>
Vaš pregledač ne podržava HTML5 video element.
</video>
 Element <video>
Video dokument se dodaje slično kao i slika, tu je atribut src za
putanju do dokumenta, i postoje atributi specifični za ovaj element:
– height i width – određuju dimenzije video dokumenta
– poster – određuje sliku koju treba koristiti pre nego krene
reprodukovanje video sadržaja, ako ovo ne odredimo polje video
plejera (eng. player) biće crno
– controls – omogućava da kontrole video plejera budu vidljive
– autoplay – naređuje video plejeru da odmah krene sa
reprodukovanjem video sadržaja čim se stranica učita
 Element <video>
Još nekoliko atributa:
– loop – uključuje neprekidno ponavljanje video sadržaja

– muted – isključuje ton video sadržaja

– preload – ovaj atribut ima više stanja:
●auto – učitavanje video sadržaja čim se učitavanje stranice završi
● none – učitavanje video sadržaja tek kada se pokrene reprodukcija

● meta-data – učitavanje meta podataka (informacija) o video

datoteci, ali ne i sam video

Tekst koji se nalazi između oznaka <video></video> biće prikazan
samo ako pregledač ne podržava ovaj element
 Element <audio>
<audio> element koristi iste atribute kao i <video> element. Formati koji su
podržani:
– mp3 – kodek MPEG-1 layer 3
– wav – LPCM (nekompresovan format)
– ogg ili oga – kodek vorbis
– m4a – kodek AAC
– webm – kodek vorbis
Dodajemo ga na stranicu ovako:
<audio src="audio.mp3" preload="auto" controls
autoplay>Vaš pregledač nepodržava HTML5 audio
element.</audio>
 Element <source>
Navođenje više formata, za svaki slučaj, vrši se elementom
<source>:
<audio controls preload="auto">
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.webm" type="audio/webm">
</audio>
Ovaj kȏd govori pregledaču da prvo proba sa mp3 formatom, ako to
ne podržava onda neka krene sa ogg formatom i tako dalje. Ovaj
postupak u istom logičkom obliku koristiti se i za <video> element
Uključivanje videa sa video servisa
● Video servisi su veb-lokacije čiji je glavni sadržaj video
sadržaj. Služe da korisnici podignu svoj video i podele
ga sa svetom. Primeri ovakvih lokacija:
– http://www.dailymotion.com/
– https://www.youtube.com/
– https://vimeo.com/
Uključivanje videa sa video servisa
● Uključivanje videa sa ovakvih servisa nazivamo
embedding. Svaki video servis ima već gotov HTML
kȏd koji samo kopiramo sa njihovog sajta u naš HTML
dokument.
● Prednosti korišćenja video servisa za regulisanje video
sadržaja za naš sajt je u tome što štedimo prostor i
protok na našem hostingu
Uključivanje videa sa video servisa
● Kada se uključi video sa servisa, preko <iframe>
elementa, on podrazumevano nije prilagodljiv
● Na blogu
https://jonsuh.com/blog/responsive-youtube-vimeo-
embed-and-html5-video-with-css/
opisana je tehnika kako učiniti da on postane
prilagodjiv upotrebom jednog <div> elementa koji ga
okružuje
 Video kao pozadina stranice
● Ako se <video> element raširi preko cele stranice,
fiksira i stavi u pozadinu može poslužiti umesto
pozadinske slike za celu stranicu
● Uputstvo za ovu tehniku može se naći na lokaciji
http://thenewcode.com/777/Create-Fullscreen-
HTML5-Page-Background-Video
 Element <canvas>
Još jedna od novina koju je doneo HTML5 u cilju osamostaljenja od
upotrebe priključaka je element <canvas>. Ovaj element predstavlja
dvodimenzionalno polje u kojem se može crtati upotrebom JavaScript-a
– koristi skript za generisanje sadržaja na platnu (eng. canvas)
– sadržaj može biti generisan u realnom vremenu uzimajući u obzir
ulazne podatke od strane korisnika ili drugih skriptova
– grafički interaktivni sadržaji (igre)
Osnovni kȏd koji se koristi da bi se platno dodalo na veb-stranicu:
<canvas width="320" height="240" id="platno">
Ukoliko vidite ovaj tekst vaš pregledač ne podržava
canvas element.</canvas>
 Pitanja za proveru znanja
● Čemu služi src atribut u elementu <audio>?
● Kako možemo dodati više rezervnih izvora?
● Čemu služi <canvas> element?
 Najava sledećeg časa
● Vežba CSS animacije