LV10: HTML MEDIJI

Luka Cvetnić
Dec 4, 2020
4 min read

PRIPREMA

1. Što uključuje multimedija na web-u?

Multimedija na webu može uključivati slike, video, glazbu, zvuk, animacije,...

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

Multimedijalni elementi su spremljeni u formatu u kojemu su bili uploadani, to mogu biti npr. avi, wmv, mov, mp4 za videozapise te npr wma, mp3, aac, wav za audiozapise.

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

Uobičajeni video formati su MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 ili MP4. Formati koje podržava HTML su MP4, WebM i OGG video formati YouTube preporuča MP4 format jer on sadrži i audio i video zapis.

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 audio formati su: MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4. Formati koje podržava HTML su MP3, Ogg i WAV . Najbolji format za kompresiranu glazbu je MP3.

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

Plug-inovi su softverski dodatci dizajnirani za različite svrhe:

Neki od njih za prikaz Flash playera, skeniranje virusa, pokretanje VPN-a, za pokretanje Adobe shockwave sadržaja, za provjeru teksta, konvertiranje datoteka, testiranje brzine interneta,...

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

Vrste objekata (plug-in tipa) koje više nisu podržani su Java Applets, ActiveX, Shockwave Flash te Adobe flash player.

IZVOĐENJE VJEŽBE

1. HTML VIDEO I AUDIO

Koji HTML element koristimo za prikaz videa na web stranici?

Za prikaz videa koristi se <video> element.

PRIMJER ZAPISA:

A . Što dodaje atribut controls?

Atribut controls dodaje upravljačke gumbe kao npr. play i pause.

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

Atribute width i lenght je dobro koristiti kako stranica ne bi treperila dok se video ili slika učitava. Ako nisu postavljeni stranica sće izgledati neprivlačno zbog razlićitih dimenzija sadržaja.

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

Element source mogućuje nam da odredimo alternativne video / audio / slikovne datoteke koje preglednik može izabrati na temelju podrške preglednika ili vidljivi dijelu širine. Preglednik će odabrati prvi <source> element koji podržava.

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

Tekst naveden u primjeru će se ispisati kada web preglednik ne podržava taj video element.

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

Video će se pokrenuti automatski ako dodamo atribut 'autoplay'. Autoplay ne radi na Apple uređajima.

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

Za uključivanje audio datoteka na web stranicu koristi se <audio> element .

2. HTML PLUGINS I YOUTUBE VIDEO

A. Što definira i za što se koristi element < object> ? Navedite primjere upotrebe sa kodom

Element <object> definira ugrađeni objekt unutar HTML dokumeta. Najprije koristio za ugrađivanje plug-inova. Može se koristiti za:

Sliku: <object data="pic_trulli.jpg" width="400" height="300"></object>

Video: <object data="video.mp4" width="400" height="300"></object>

HTML: <object data="snippet.html" width="500" height="200"></object>

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

Element <embed> definira ugrađeni element. Najviše se koristi za:

Sliku: <embed type="image/jpg" src="pic_trulli.jpg" width="400" height="300">

Video: <embed type="video/webm" src="video.mp4" width="400" height="300">

HTML: <embed type="text/html" src="snippet.html" width="500" height="200">

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 ID: coAgqKCLcSA

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

Potrebni koraci su: uploadanje videa, zapisivanje video id-a, definiranje <iframe> elementa, ukazivanje URL-a src atributom, korištenje width i height elementa za definiranje dimenzija i dodavanje ostalih parametara.

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

Treba koristiti atribut mute nakon atributa autoplay.

ili na youtube-u dodati autoplay=1&mute=1:

F. Kako se piše i koristi YouTube playlist?

Youtube playlista se stvara kada je napisano više videozapisa odvojenih zarezom.

G. U kodu: Što znači loop=1? Koja je podrazumijevana vrijednost i što ona znači?

Parametar loop=1 omogućuje beskonačno ponavljanje videa, a loop=0 znači da će se video prikazati samo jednom. Loop=0 je defaultna vrijednost.

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

Kontrole se dodaju parametrom controls=0. Kada je vrijednost 0 kontrole se neće prikazati, a kada je vrijednost 1 (default) kontrole će biti prikazane.

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. 3 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.

UPUTE:

1. SKINUTI RAR DOKUMENT

2. OTVORITI GA POMOĆU WINRAR (ili druge slične) APLIKACIJE

3. ZA NASLOVNU STRANICU POKRENUTI DOKUMENT "Ptice NASLOVNA.html"

4. ZA PRIKAZ SVEGA ZAJEDNO POKRENUTI DOKUMENT "Cvetnić-ptice sve zajedno.html"

5. ZA POJEDINAČNI PRIKAZ POKRENUTI POJEDINAČNE DOKUMENTE

LV10: HTML MEDIJI

Recent Posts

Comments

Subscribe Form