Priprema:
1. Što uključuje multimedija na web-u? (https://www.w3schools.com/html/html_media.asp)
Multimedija na web-u uključuje slike, zvuk/muzika, video, film, animacije i više.
2. U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabrojite
nekoliko mogućih ekstenzija (proširenja).
Multimedijalni elementi se spremaju se u obliku media file-ova.
Ekstenzija određuje tip file-a.
Neke od ekstenzija su: .wav, .mp3, .mp4, .mpg, .wmv i .avi.
3. Nabrojite uobičajene formate za video datoteke. Koje formate podržava HTML? Koji format
preporuča YouTube?
Neki od uobičajenih formata za video datoteke su: .mp4, .webm, .mov, .ogg, .avi, .mpg, itd.
Youtube preporuča .mp4 format.
4. Nabrojite uobičajene formate za audio datoteke. Koja tri formata su podržana HTML
standardom? Koji je najbolji format za kompresiranu snimljenu glazbu?
Neki od uobičajenih formata za audio datoteke su: .aac, .mp3, .wav, .ogg, .midi, .mid, .mp4, itd.
Tri formata podržana HTML standardom su: MP3, WAV i Ogg.
Najbolji format za kompresiranu snimljenu glazbu je .mp3.
5. Što su plug-in-ovi? Nabrojite najmanje pet različitih zadataka plug-in-ova?
Plug-in-ovi predstavljaju posebnu vrstu programskog dodatka koja uključuje i posebnu programsku biblioteku, ali istovremeno nije sastavni dio konkretnog softvera.
Pet vrsta plug-in-ova: za korištenje Java applets-a, Microsoft ActiveX controls-a, za prikazivanje Flash filmova, mapa, za skeniranje virusa.
6. Koje vrste objekata (plug-in tipa) više nisu podržane, dostupne ili su isključene u
preglednicima?
ActiveX controls i Shockwave Flash niti jedan preglednik ne podržava, a većina preglednika ne podržava Java Applets
IZVOĐENJE VJEŽBE
1. HTML Video i Audio
Koji HTML element koristimo za prikaz videa na web stranici?
HTML <video> element
Primjer opisa video sadržaja u HTML dokumentu:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Vaš preglednik ne podržava video element.
</video>
A. Što dodaje atribut controls?
Dodaje kontrole za video poput: play, pause, volume
B. Zbog čega je dobro uvijek koristiti attribute width i height? Što se može događati ako nisu
postavljeni?
Zato što ako ne postavimo atribute width i hight, stranice će možda treperiti dok se video učitava
C. Kako i zašto se koristi element source? Kako će odabir napraviti preglednik?
<source> element omogućuje da specificiramo više alternativnih videa koje preglednik može odabrati, te će koristiti prvi prepoznati format
D. U kojem će se slučaju ispisati navedeni tekst?
Tekst između <video> i </video> tagova će se samo pokazivati u browserima koji ne podržavaju <video> element.
E. Kako se prikazani video sadržaj može pokrenuti automatski? Na kojim uređajima neće raditi?
Autoplay atribut nam omogućuje da se video pokrene automatski, no neće raditi na Chromium preglednicima.
F. Koji HTML element koristimo za uključivanje audio datoteka u web stranicu?
<audio> element koristimo za uključivanje audio datoteka na web stranicama.
Primjer opisa audio sadržaja u HTML dokumentu:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
Vaš preglednik ne podržava audio element.
</audio>
2. HTML Plug-ins i YouTube video
A. Što definira i za što se koristi element <object>? Navedite primjere upotrebe sa kodom.
<object> element definira ugrađeni objekt u HTML dokumentu i koristi se za ugrađivanje plug-in-ova.
<object width="100%" height="500px" data="snippet.html">
</object>
B. Za što se koristi element <embed>? Navedite primjer koda.
<embed> element se koristi za definiranje ugrađenog objekta u HTML dokumentu.
<embed src="audi.jpeg">
<embed> element se također može koristiti za uključivanje HTML dokumenta u HTLM dokument.
<embed width="100%" height="500px" src="snippet.html">
C. Za pokretanje videa na mrežnoj stranici u HTML kodu može se koristiti YouTube video ID.
Navedite primjer YouTube video ID-a.
YouTube video id primjer: tgbNymZ7vqY
D. Nabrojite šest koraka potrebnih za pokretanje YouTube videa na mrežnoj stranici.
1. Objaviti video na YouTube
2. Zapisati video id
3. Definirati <iframe> element u našoj web stranici
4. Dopustiti src atributu da pokazuje na video URL
5. Koristiti width i height atribute da odredimo dimenzije video playera
6. Dodati ostale parametre na URL npr. :
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
E. Na koji se način može uključiti stišani autoplay kod videa? Navedite primjer koda.
Može se uključiti tako da dodamo autoplay=1 i mute=1 na URL.
Primjer koda:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
F. Kako se piše i koristi YouTube playlist?
Zarez dijeli listu videa koji čekaju da se reproduciraju (uz originalni URL).
G. U kodu:
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Što znači loop=1? Koja je podrazumijevana vrijednost i što ona znači?
loop=1 znači da će nam se videi beskonačno reproducirati u krug.
Podrazumijevana vrijednost je 0, a ona znači da će se video reproducirati samo jednom.
H. Kako se ispisuju kontrole uz YouTube video sadržaj?
Ispisuju se tako da stavimo controls=1.
3. Izrada mrežne stranice
A. Napravite mrežnu stranicu o pticama. Za prikaz stranice pripremite što više medijskih elemenata i spremite ih u podmape osnovne mape vaše stranice: slike, zvukovi, video sadržaji. Sve slike i video sadržaji trebaju se prikazati u istoj veličini (otprilike četvrtinu širine stranice) bez izobličenja. Uz slike trebaju biti naslovi, a uz video sadržaje kontrole. Odaberite tri vrste ptica. Na početku stranice treba biti lista sa internim poveznicama: ptica1, ptica 2, ptica 3. Klikom na poveznicu prebacuje se na dio stranice koji govori o toj ptici. Sadržaji vezani uz svaku pticu trebaju biti podijeljeni na: 1. kratki uvodni tekst (osnovne informacije, veličina, stanište, ishrana i td.), 2. slike ptice (najmanje dvije), 3. zvučni zapis pjeva te ptice, 4. video materijali o toj ptici. Obavezno koristite i YouTube video. Na kraju stranice potrebno je napraviti manji obrazac sa prostorom za unosom osnovnih osobnih podataka i podatka o tome o kojoj bi korisnik ptici i koju vrstu materijala o toj ptici (tekst, slike, zvuk, video) molio da mu se dostavi.