Vježba 10: Multimedija

PRIPREMA ZA VJEŽBU

1. Što uključuje multimedija na web-u?
Multimedija na webu uključuje zvuk, glazba, videozapisi, filmovi i animacije.

2. U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabrojite
nekoliko mogućih ekstenzija (proširenja).

Multimedijski elementi pohranjeni su u obliku medijskim datotekama s datotečnim nastavkom.

Moguća proširenja (datotečni nastavci) su: .wav, .mp3, .mp4, .mpg, .wmv .avi i .jpg.

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, MP4, Ogg.
HTML podržava MP4, WebM i Ogg dok YouTube preporučuje MP4.

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 MP3,Ogg, MIDI, RealAudio, WMA.

HTML podržava MP3, WAV i Ogg zvuk među ponuđenima MP3 je najbolji za kompresiju.

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

Plug-in-ovi su računalni programi koji proširuju standardnu funkcionalnost preglednika. 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?

Pregledni više ne podržavaju Java Applets, ActiveX i Shockwave Flash.

IZVOĐENJE VJEŽBE

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 videokontrole, poput reprodukcije, pauze i glasnoće.

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

Dobro je koristiti width i height da bismo znali točne dimenzije u kojima će se videozapis prikazati ako width i height nisu postavljeni video može biti premalen ili prevelik.

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

Elemet source omogućuje nam postavljanje veze za video koji želimo reproducirati, ali i za postavljanje vide koji će se reproducirati ukoliko preglednik ne prepozna prvi format videa.
Preglednik će uvijek prvo pokušati reproducirati prvi izvor te će kasnije preči na sljedeće (rezervne) izvore.

D. U kojem će se slučaju ispisati navedeni tekst?
Tekst će se ispisati ukoliko preglednik ne prepoznaje <video> element

E. Kako se prikazani video sadržaj može pokrenuti automatski? Na kojim uređajima neće raditi?
Prikazani video sadržaj se može pokrenuti automatski ako u početku deklariranja dodamo ključnu riječ autoplay.

Primjer.
<video width=”320″ height=”240 autoplay>

Na uređajima koji koriste Chromium preglednike automatsko pokretanje neće raditi no automatsko pokretanje bez zvuka će raditi.

Primjer.
<video width=”320″ height=”240″ autoplay muted>

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

Koristimo HTML element <video>

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> definira element ugrađen unutar HTML-a koristi se za ugradnju dodataka kao što su Java appleti, PDF čitači i Flash Playeri u web stranice.

Primjeri.

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

Koristi se za prikazivanje medijskog sadržaja unutar HTML-a te je definiran unutar HTML-a od HTML5.

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.

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

Za reprodukciju videozapisa na web stranici učinite sljedeće:

Prenesite video na YouTube
Zabilježite ID videozapisa
Definirajte <iframe>element na svojoj web stranici
Unutar src atribut unesemo URL videozapisa
Koristite atribute width i height za određivanje dimenzija videozapisa
Dodajte bilo koje druge parametre u URL (primjer iznad)

E. Na koji se način može uključiti stišani autoplay kod videa? Navedite primjer koda.
Stišani autoplay možemo uključiti na način da poslije url-a dodamo “?autoplay=1&mute=1”.

Primjer.
<iframe width=”420″ height=”345″ src=”https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1″>
</iframe>

F. Kako se piše i koristi YouTube playlist?
Popis videozapisa za reprodukciju odvojen zarezom (uz izvorni 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 se videozapis ponavljati zauvijek, ako to ne želimo možemo ostaviti podrazumijevanu vrijednost koja je loop = 0.

H. Kako se ispisuju kontrole uz YouTube video sadržaj?
Kontrole su na početku ispisane na podnožju videozapisa no to možemo isključiti tako da na kraju url-a dodamo “?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.

<html>

<style>

hr{

color: black;

}

</style>

<h1>Ptice</h1>

<ul>

<li><a href=”#lastavica”>Lastavica</a></li>

<li><a href=”#kiviji”>Kiviji</a></li>

<li><a href=”#naruci”>Naruči</a></li>

</ul>

<hr>

<h2 id = lastavica>Lastavica</h2>

<p>Lastavica imaju kratke kljunove, ali snažnu vilicu i široko grlo. Tijelo je dugo 10-24 cm, a težina im je 10-60 grama.<br>

Na krilima imaju devet primarnih letnih pera. Rep se sastoji od 12 pera i može biti račvast ili četvrtast.<br>

Dug rep povećava mogućnost manevriranja i dužina mu se može razlikovati među spolovima.<br>

Ženke obične lastavice biraju mužjake s dužim repom.</p>

<h3>Ilustracija Lastavice</h3>

<h3>Fotografija Lastavice</h3>

<h3>Lastacičin pjev</h3>

<audio src =”lastavica/pjev.mp3″ controls>Lastacičin pjev</audio><br>

<h3>Lastacičin let</h3>

<br>

</div>

<hr>

<h2 id = kiviji>Kiviji</h2>

<p>Kiviji (Apterygidae) porodica su manjih ptica trkačica. Klasificirane su kao porodica u redu nojevki (Struthioniformes), <br>

iako ćemo ih, ovisno o inim klasifikacijama, naći i u izumrlom redu moavki (Dinomithiformes) te kao poseban red – Apterygiformes. <br>

Nastanjuju uglavnom Novi Zeland.</p>

<h3>Ilustracija Kivija</h3>

<h3>Fotografija Kivija</h3>

<h3>Kivijev pjev</h3>

<audio src =”kiviji/kiviji_pjev.mp3″ controls>Kivijev pjev</audio><br>

<h3>Kiviji – kratak video</h3>

</div>

<hr>

<p>Roda koja ima dug i crven kljun. Dugačak vrat i duge, crvene i tanke noge. <br>

Perje joj je bijele boje, a na krilima se nalazi nešto duže i crnije perje. Ženka i mužjak ne razlikuju se s obojenošću.<br>

Staništa su joj područja uz močvare, poplavne livade i vlažne šume. Let joj je spor. Glasa se klepetanjem. <br>

Hrani se različitim malim životinjama, kao što su kukci, svime onim što može uloviti.<br>

U travnju ili svibnju savija veliko gnijezdo, u krošnji stabla ili na krovovima kuća. Najčešće ima pet jaja.<br></p>

<h3>Ilustracija Rode</h3>

<h3>Fotografija Rode</h3>

<h3>Rodin pjev</h3>

<audio src =”roda/pjev.mp3″ controls>Rodin pjev</audio><br>

</div>

<h2>Naruči</h2>

<label>Unesi svoje ime:</label>

<label>Unesi svoje prezime:</label>

<label>Unesi svoje e-mail:</label>

<p>Odaberi željenu pticu čije podatke i medijski sadržaj želiš primiti</p>

<label>Lastavica</label>

<label>Kiviji</label>

<hr>

<button type=”button”>Naruči</button>

</footer>

</body>

</html>