Cilj vježbe:
Učenik će definirati multimedije, navesti vrste i formate multimedijskih sadržaja.

Priprema za vježbu:

Zadatak 1: Što uključuje multimedija na web-u? (https://www.w3schools.com/html/html_media.asp)
Odgovor: Multimediju na web-u uključuje sliku, zvuk, videozapis, muziku, animcije...

Zadatak 2: U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabrojite nekoliko mogućih ekstenzija (proširenja).
Odgovor: Multimedijalni elementi se spremaju u obliku datoteka, a ekstenzija određuje vrstu datoteke i vrstu multimedijskog sadržaja koji je pohranje u datoteci. Na primjer: ekstenzije za video mogu biti .mp4, .wmv, .webm, za sliku mogu biti .jpeg, .jpg, .pmg, za audio zapis .mp3, .wav,...

Zadatak 3: Nabrojite uobičajene formate za video datoteke. Koje formate podržava HTML? Koji format preporuča YouTube?

Odgovor: Uobičajeni formati za video datoteke su MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 ili MP4, a HTML podržava MP4, WebM i Ogg. YouTube preporuča baš MP4 koji je jedan od podržanih oblika od strane HTML-a.

Zadatak 4: Nabrojite uobičajene formate za audio datoteke. Koja tri formata su podržana HTML standardom? Koji je najbolji format za kompresiranu snimljenu glazbu?

Odgovor: Uobičajeni formati za audio datoteke su MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4, a HTML podržava MP3, WAV i Ogg formate. Najbolji format za kompresiranu glazbu je MP3.

Zadatak 5: Što su plug-in-ovi? Nabrojite najmanje pet različitih zadataka plug-in-ova?

Odgovor: Plug-in-ovi su nekakvi dodaci i najčešće se spominju kod web preglednika kao njihova proširenja za dodatne mogućnosti. Zadatci plug-in-ova su: pokretanje Java applets-a, pokretanje Microsoft ActiveX controls-a, prikazivanje Flash filmova, prikazivanje mapa te skeniranje virusa.

Zadatak 6: Koje vrste objekata (plug-in tipa) više nisu podržane, dostupne ili su isključene u preglednicima?

Odgovor: Više nisu podržani Java Applets, ActiveX controls i ShockWave Flash.

Vježba:

1. HTML Video i Audio:

Koji HTML element koristimo za prikaz videa na web stranici?

Odgovor: Koristimo element <video>.

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?

   Atribut controls dodaje audio/video kontrole.

   B. Zbog čega je dobro uvijek koristiti attribute width i height? Što se može događati ako nisu postavljeni?

      Dobro ih je koristiti jer se tako određuje fiksna veličina objekta, jer ako se ne definiraju onda bi moglo doći do preklapanja elemenata.

    C. Kako i zašto se koristi element source? Kako će odabir napraviti preglednik?

Element <source> koristimo za postavljanje alternatiuvnih izvora datoteka koje preglednik može odabrati. Preglednik će odabrati prvi prepoznati format.

D. U kojem će se slučaju ispisati navedeni tekst?

?

E. Kako se prikazani video sadržaj može pokrenuti automatski? Na kojim uređajima neće raditi?

Prikazani video sadržaj se automatski pokreže postavljanjem atributa "autoplay" i on neće raditi mobilnim uređajima kao iPad ili iPhone.

F. Koji HTML element koristimo za uključivanje audio datoteka u web stranicu?

Koristimo element <audio>.

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.

Element <object> se koristi za definiranje ugrađenog objekta u HTML.

Primjer: <object width="100%" height="500px" data="snippet.html"></object> (dodavanje HTML datoteke)

B. Za što se koristi element <embed>? Navedite primjer koda

Element <embed> se koristi za isto za što i element <object>, ali on nije više podržan u HTML-u, tj. otkako je izašao HTML5. Primjer: <embed src="audi.jpeg">

C. Za pokretanje videa na mrežnoj stranici u HTML kodu može se koristiti YouTube video ID.

Navedite primjer YouTube video ID-a.

Primjer YouTube video ID-a: tgbNymZ7vqY

D. Nabrojite šest koraka potrebnih za pokretanje YouTube videa na mrežnoj stranici.

(https://www.w3schools.com/html/html_youtube.asp)

Postaviti video na Youtube.
Pronaći video ID.
Definirati <iframe> elemnt u HTML-u.
Definirati <src> atribut.
Definirati veličinu prozora u kojem se prikazuje video.
Definriati ostale parametre.

E. Na koji se način može uključiti stišani autoplay kod videa? Navedite primjer koda

Možemo ga uključiti pomoću atrubuta <mute> i <autoplay>

Primjer:

        Piše se tako da unesemo poveznice na svaki video i odvojimo ih zarezom.

    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 je atribut koji postavlja reprodukciju videozapisa u beskonačnost, tj. video će se pokretat iznova i iznova. Podrazumijevana vrijednost je 0 (video se pokreće samo jednom), ako se ne definira drugačije.

H. Kako se ispisuju kontrole uz YouTube video sadržaj?

Ispisuju se tako što u URL stavimo controls=0.

Primjer: src=https://www.youtube.com/embed/tgbNymZ7vqY?controls=0

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.

ZIP datoteka (preuzmite)

Cilj vježbe: Učenik će definirati multimedije, navesti vrste i formate multimedijskih sadržaja.