Vježba 10: Multimedija 

Vježba 10: Multimedija 

Toni Lončar, David Jaklenec 3.a 

KOD ZADATKA

PRIPREMA ZA VJEŽBU 

Odgovorite na pitanja pisano u bilježnicu: 

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

2. U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabrojite nekoliko mogućih ekstenzija (proširenja).
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,... 

3. Nabrojite uobičajene formate za video datoteke. Koje formate podržava HTML? Koji format preporuča YouTube?
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. 

4. Nabrojite uobičajene formate za audio datoteke. Koja tri formata su podržana HTML standardom? Koji je najbolji format za kompresiranu snimljenu glazbu?
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. 

5. Što su plug-in-ovi? Nabrojite najmanje pet različitih zadataka plug-in-ova?
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 

6. Koje vrste objekata (plug-in tipa) više nisu podržane, dostupne ili su isključene u preglednicima?
Više nisu podržani Java Applets, ActiveX controls i ShockWave Flash. 

IZVOĐENJE VJEŽBE 

1. HTML Video i Audio 

Koji HTML element koristimo za prikaz videa na web stranici?
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)
<iframe width="420" height="315" 
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe> 

1. Postaviti video na Youtube. 

2. Pronaći video ID. 

3. Definirati <iframe> elemnt u HTML-u. 

4. Definirati <src> atribut. 

5. Definirati veličinu prozora u kojem se prikazuje video. 

6. 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: 

     <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? 

     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