LV10 HTML Media

Vježba 10: Multimedija

Nika Bevanda, Bruno Blašković 3.C

 

PRIPREMA ZA VJEŽBU

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

Multimedija postoji u mnogo različitih formata. To može biti gotovo sve što možete čuti ili vidjeti, poput slika, glazbe, zvuka, videa, ploča, filmova, animacija i više.

Web stranice često sadrže multimedijske elemente različitih vrsta i formata.

 

  1. U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabroji nekoliko uobičajenih i mogućih ekstenzija (proširenja).

Multimedijalni elementi (kao što su slike, zvukovi, videozapisi) obično se spremaju u različitim formatima kako bi se mogli pravilno koristiti u računalnim aplikacijama i na internetu. Ekstenzija datoteke (proširenje) označava tip i format datoteke i pomaže računalnim sustavima u odabiru odgovarajućeg programa za otvaranje i obradu tih datoteka.

Neke uobičajene ekstenzije:

Slike: .jpg, .png, .gif, .bmp, .tiff

Video: .mp4, .avi, .mov, .mkv, .webm

Audio: .mp3, .wav, .ogg, .flac, .aac

 

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

Uobičajeni formati za video datoteke: .mp4, .avi, .mov, .mkv, .webm, .flv

HTML podržava nekoliko video formata, a najčešće korišteni su: .mp4 (najviše podržavan u preglednicima), .webm, .ogg

YouTube preporuča korištenje formata .mp4 s video kodekom H.264 i audio kodekom AAC za optimalnu kvalitetu i kompresiju prilikom učitavanja video sadržaja.

 

  1. Nabroji 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: .mp3, .wav, .ogg, .flac, .aac, .m4a

Tri formata audio datoteka koja HTML standard podržava su: .mp3, .ogg, .wav

Za kompresiranu snimljenu glazbu, najbolji format je obično .mp3 jer pruža dobar omjer kompresije i kvalitete zvuka, dok su formati poput .flac bolji za kvalitetu (lossless), ali imaju veće datoteke.

 

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

Plug-in-ovi su dodatni programi ili moduli koji proširuju funkcionalnost osnovnih aplikacija ili programa. U kontekstu internetskih preglednika, plug-in-ovi omogućuju podršku za multimedijalne sadržaje, animacije i interaktivne aplikacije koje inače ne bi bile moguće u standardnom pregledniku.

Neki od zadataka koje plug-in-ovi obavljaju uključuju:

Reprodukcija multimedije – omogućuju reprodukciju video i audio datoteka (npr. Adobe Flash Player, QuickTime).

Prikazivanje PDF datoteka – omogućuju pregled PDF dokumenata u preglednicima (npr. Adobe Acrobat).

Uređivanje slika – dodaju alate za obrada i uređivanje slika u preglednicima.

Sigurnost – omogućuju dodatne sigurnosne značajke kao što su antivirusna zaštita ili šifriranje podataka.

Animacija i grafika – omogućuju animacije ili 3D grafiku u preglednicima (npr. WebGL).

 

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

Neke vrste plug-in-ova koji više nisu podržani ili su isključeni u modernim preglednicima uključuju:

Adobe Flash Player – potpuno je uklonjen s većine preglednika jer je zastario, nesiguran i zamijenjen HTML5 tehnologijama.

Java Applets – mnogi preglednici više ne podržavaju Java applete zbog sigurnosnih prijetnji i zastarjelosti.

Silverlight (Microsoft) – isto je ukinuto jer je zamijenjeno HTML5 i drugim web tehnologijama.

QuickTime (Apple) – iako nije potpuno uklonjen, mnogi moderni preglednici više ne podržavaju QuickTime plug-in za reprodukciju medija.

ActiveX (Microsoft) – korišten je u Internet Exploreru, ali je zamijenjen modernijim tehnologijama i više nije podržan u većini drugih preglednika.

 

 

 

IZVOĐENJE VJEŽBE

  1. HTML Video i Audio
  • Koji HTML element koristimo za prikaz videa na web stranici?

Za prikaz videa na web stranici koristi se HTML element <video>.

 

  • Što dodaje atribut controls?
  • Atribut controls dodaje kontrolne elemente (kao što su play/pause, volumen, pomicanje po vremenskoj liniji) na video playeru. Bez ovog atributa, video će se reproducirati automatski, ali korisnik neće imati mogućnost upravljanja reprodukcijom (pauza, volumen, itd.).

 

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

Atributi width i height definiraju dimenzije video elementa na stranici. Korištenje ovih atributa je preporučljivo jer:

Poboljšava učitavanje stranice jer preglednik unaprijed zna dimenzije video playera i može ispravno rasporediti ostale elemente na stranici.

Sprječava pomicanje sadržaja stranice dok se video učitava.

Ako width i height nisu postavljeni, preglednik će automatski postaviti veličinu videa prema njegovim stvarnim dimenzijama, što može uzrokovati nesklad u layoutu stranice, posebno na mobilnim uređajima ili na stranicama s više elemenata koji se oslanjaju na određene dimenzije.

 

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

Element <source> omogućuje pružanje različitih verzija video (ili audio) datoteke kako bi preglednik odabrao onu koju najbolje podržava. Koristi se unutar <video> (ili <audio>) elementa, čime omogućuje korisnicima veću kompatibilnost, jer različiti preglednici podržavaju različite video i audio formate.

Preglednik će odabrati prvi <source> element koji podržava, na temelju formata datoteke i MIME tipa. Ako jedan format nije podržan, pokušat će s drugim.

 

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

Tekst unutar <video> (ili <audio>) elementa, kao što je “Vaš preglednik ne podržava HTML5 video element,” ispisat će se ako preglednik ne podržava HTML5 video element uopće, ili ako nijedna od navedenih video datoteka nije podržana. Ovaj tekst se također prikazuje ako nije dostupna nijedna verzija video datoteke koju korisnikov preglednik može reproducirati.

 

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

Za automatsko pokretanje videa koristi se atribut autoplay. Kada je ovaj atribut postavljen, video će se automatski početi reproducirati čim se učita stranica.

Međutim, autoplay može biti blokiran na nekim uređajima ili preglednicima, posebno na mobilnim uređajima i uređajima koji imaju postavke za uštedu podataka ili resursa.

 

  • Koji HTML element koristimo za uključivanje audio datoteka u web stranicu

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

 

 

  1. HTML Plug-ins i YouTube video
  • Što definira i za što se koristi element <object> ? Navedi primjere upotrebe sa kodom.

Element <object> koristi se za uključivanje različitih vrsta sadržaja u web stranicu, kao što su slike, video datoteke, Flash animacije, PDF datoteke ili druge aplikacije. Može se koristiti za ugradnju vanjskih datoteka ili aplikacija na stranicu.

Primjer:

<object data=”document.pdf” type=”application/pdf” width=”600″ height=”400″>

    Vaš preglednik ne podržava PDF.

</object>

 

  • Za što se koristi element <embed> ? Navedi primjer koda.

Element <embed> koristi se za umetanje vanjskih sadržaja, kao što su video ili audio datoteke, Flash animacije, PDF dokumenti i drugi multimedijalni sadržaji. Slično kao i <object>, ali je jednostavniji i ima manje atributa.

Primjer:

<embed src=”audio.mp3″ type=”audio/mp3″ width=”300″ height=”40″>

 

  • Za pokretanje videa na mrežnoj stranici u HTML kodu može se koristiti YouTube video ID. Navedi primjer YouTube video ID-a.

YouTube video ID je jedinstveni niz koji se nalazi u URL-u videa. Na primjer, u URL-u videa: https://www.youtube.com/watch?v=dQw4w9WgXcQ

 

ID videa je dQw4w9WgXcQ.

 

  • Nabroji šest koraka potrebnih za pokretanje YouTube videa na mrežnoj stranici.

Da biste ugradili YouTube video na mrežnu stranicu, slijedite ove korake:

  1. Otvorite video na YouTubeu.
  2. Kliknite na ikonu za dijeljenje ispod videa.
  3. Odaberite opciju “Embed” (Ugradi).
  4. Kopirajte HTML kod za ugradnju koji YouTube pruža.
  5. Zalijepite kopirani HTML kod u vaš HTML dokument.
  6. Spremite i učitajte stranicu da biste vidjeli video.

 

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

Za uključivanje automatske reprodukcije videa uz stišavanje zvuka, koristi se atribut autoplay za automatsko pokretanje i muted za stišavanje zvuka.

Primjer koda za automatsko pokretanje i stišavanje zvuka:

<video width=”640″ height=”360″ autoplay muted> <source src=”video.mp4″ type=”video/mp4″> Vaš preglednik ne podržava HTML5 video element. </video>

 

  • Kako se piše i koristi YouTube playlist?

Za ugradnju YouTube playlist, koristi se URL s parametrom list=ID_playliste. YouTube omogućuje ugradnju cijele playliste pomoću iframe.

 

  • Što znači loop=1? Koja je podrazumijevana vrijednost i što ona znači?

Parametar loop=1 označava da će video ili YouTube video automatski ponavljati (loop) čim završi s reprodukcijom.

Podrazumijevana vrijednost je loop=0, što znači da video neće ponavljati. Ako loop=1 nije postavljen, video će se reproducirati samo jednom.

 

  • Kako se ispisuju kontrole uz YouTube video sadržaj?

Za prikazivanje kontrola uz YouTube video, koristi se atribut controls u embed kodu. Uklapanje controls omogućava korisnicima da pauziraju, premotavaju ili podešavaju glasnoću videa.

 

  1. Praktični zadatak: Izrada mrežne stranice
  • Napravi mrežnu stranicu o pticama. Odaberi tri vrste ptica. Za prikaz stranice pripremi što više multimedijskih elemenata.
  • slike ptica trebaju biti monokromatske
  • multimedijske sadržaje spremi lokalno u podmape osnovne mape stranice prema tipovima: slike, zvukovi, video sadržaji.
  • Sve slike i video sadržaji trebaju se prikazivati u istoj veličini (otprilike četvrtinu širine stranice na stolnom računalu) bez izobličenja.
  • Uz slike trebaju biti naslovi-nazivi ptica (ispod), a uz video sadržaje trebaju biti prikazane kontrole.
  • Na početku stranice treba biti lista sa internim poveznicama („skok“ na istu stranicu): {ptica1}, {ptica2}, {ptica 3}. Klikom na poveznicu korisnik se „prebacuje“ na dio stranice koji govori o toj ptici.
  • Sadržaji vezani uz svaku pticu trebaju biti podijeljeni na: 1. ime ptice (naslov) i kratki uvodni tekst širine kao slika (jedan odlomak, osnovne informacije, veličina, stanište, ishrana i td.), 2. slika ptice, 3. mogućnost slušanja zvučnog zapisa pjeva te ptice, 4. video sadržaj o toj ptici (na stranici i preko poveznice). Obavezno koristite i YouTube video.
  • Na kraju stranice potrebno je napraviti manji obrazac sa prostorom za unosom osnovnih osobnih podataka korisnika 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.

<!DOCTYPE html>
<html lang=”hr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Ptice</title>
</head>
<body style=”background-color: #FFF9B5; font-family: Arial, sans-serif; line-height: 1.6;”>

<div style=”text-align: center; margin-bottom: 20px;”>
<a href=”#ptica1″ style=”margin: 0 15px; text-decoration: none; font-weight: bold;”>Ptica 1</a>
<a href=”#ptica2″ style=”margin: 0 15px; text-decoration: none; font-weight: bold;”>Ptica 2</a>
<a href=”#ptica3″ style=”margin: 0 15px; text-decoration: none; font-weight: bold;”>Ptica 3</a>
</div>

<div style=”width: 75%; margin: 0 auto;”>
<h1> PTICE </h1>
<div id=”ptica1″ style=”margin-bottom: 40px;”>
<h2 style=”background-color: #f7b7a3; padding: 10px; border: 2px solid #d0845f; display: inline-block;”>1: Šojka</h2>
<p>Šojka je poznata po svom specifičnom ponašanju koje uključuje oponašanje zvukova iz svog okruženja. Ova ptica ima veličinu od 20 cm, a nastanjuje šumske prostore i otvorene predjele. Hrani se insektima, ali i plodovima drveća.</p>
<img src=”slike/pticarugalica.jpg” alt=”Šojka”width: 25%; height: auto;” />
<br>
<a href=”zvukovi/pticarugalica.mp3″ target=”_blank”>Slušajte pjev ptice rugalice</a>
<audio controls>
<source src=”zvukovi/ptica_rugalica_pjev.mp3″ type=”audio/mp3″>
Vaš preglednik ne podržava HTML5 audio element.
</audio>
<br>
<video controls style=”width: 25%; height: auto;”>
<source src=”video/ptica_rugalica_video.mp4″ type=”video/mp4″>
<p>Video o ptici rugalici:</p>
</video>
<br><br>
</div>

<div id=”ptica2″ style=”margin-bottom: 40px;”>
<h2 style=”background-color: #a3c9f7; padding: 10px; border: 2px solid #5fa1d4; display: inline-block;”>2: Sova</h2>
<p>Sove su noćne ptice grabljivice koje su izvrsne lovkinje. Dugi su 40 cm, a obično nastanjuju šumske ili planinske predjele. Njihova ishrana uključuje male sisavce i ptice.</p>
<img src=”slike/sova.jpg” alt=”Sova” style=”width: 25%; height: auto;” />
<br>
<a href=”zvukovi/sova_pjev.mp3″ target=”_blank”>Slušajte pjev sove</a>
<audio controls>
<source src=”zvukovi/sova_pjev.mp3″ type=”audio/mp3″>
Vaš preglednik ne podržava HTML5 audio element.
</audio>
<br>
<video controls style=”width: 25%; height: auto;”>
<source src=”video/sova_video.mp4″ type=”video/mp4″>
<p>Video o sovi:</p>
</video>
<br><br>
</div>

<div id=”ptica3″ style=”margin-bottom: 40px;”>
<h2 style=”background-color: #b7f7b2; padding: 10px; border: 2px solid #6fe373; display: inline-block;”>3: Labud</h2>
<p>Labudovi su elegantne ptice koje se nalaze u slatkovodnim jezerima i rijekama. S velikim krilima i dugim vratom, labudovi mogu dostići visinu od 1.5 metra.</p>
<img src=”slike/labud.jpg” alt=”Labud” style=”width: 25%; height: auto;” />
<br>
<a href=”zvukovi/labud_pjev.mp3″ target=”_blank”>Slušajte pjev labuda</a>
<audio controls>
<source src=”zvukovi/labud_pjev.mp3″ type=”audio/mp3″>
Vaš preglednik ne podržava HTML5 audio element.
</audio>
<br>
<video controls style=”width: 25%; height: auto;”>
<source src=”video/labud_video.mp4″ type=”video/mp4″>
<p>Video o labudu:</p>
</video>
<br><br>
</div>

<form action=”#” style=”margin-top: 40px; width: 50%; margin-left: auto; margin-right: auto;”>
<h3>Obrazac za kontakt</h3>
<label for=”ime”>Ime:</label>
<input type=”text” id=”ime” name=”ime” required style=”width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ccc;”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required style=”width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ccc;”>
<label for=”ptica”>Odabir ptice:</label>
<select id=”ptica” name=”ptica” required style=”width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ccc;”>
<option value=”rugalica”>Šojka</option>
<option value=”sova”>Sova</option>
<option value=”labud”>Labud</option>
</select>
<label for=”materijal”>Vrsta materijala koji želite:</label>
<textarea id=”materijal” name=”materijal” rows=”4″ required style=”width: 100%; margin: 10px 0; padding: 10px; border: 1px solid #ccc;”></textarea>
<input type=”submit” value=”Pošaljite” style=”width: 100%; padding: 10px; background-color: #5fa1d4; color: white; border: none;”>
</form>

</div>

</body>
</html>