Multimedijski sadržaji u HTML dokumentu

1. Multimedija

Pod pojmom multimedije podrazumijeva se kombiniranje različitih vrsta sadržaja kao što

su tekst, slika, zvuk, animacija i video. Uloga multimedije jest omogućiti korisniku lakše

snalaženje na web-stranici jer daje jasniji i zanimljiviji pregled sadržaja. Osim toga multimedijalni

elementi mogu se iskoristiti i za učinkovito pretraživanje i pronalaženje sadržaja

koji se odnose na upit korisnika. Multimedijalni obrazovni materijali moraju iskoristiti

sve mogućnosti multimedije tako da se koriste multimedijalnim elementima kako

bismo informacije prikazali što realnije kako bi zaokupile pozornost korisnika. Multimedijalni

elementi su:

• tekst
• zvuk
• grafika
• video
• animacija.

Multimediju dijelimo na:

•  linearnu - u kojoj korisnik ne može upravljati
• nelinearnu - u kojoj korisnik može otvarati određeni sadržaj (online tečajevi i slično). Pri otvaranju lekcija korisnik pokreće hipermediju.

2. Formatiranje multimedijskih sadržaja za primjenu na internetu

jedine

medijske sadržaje, za nepodržane formate, trebali instalaciju određenih dodataka

(engl. plug-in). Zbog zahtjevnosti prikaza multimedijskih elementa cilj je da se reproduciranje

zvuka i videa ažurira zajedno s preglednikom. HTML5 je uveo standard u objavljivanju

medijskih sadržaja, odnosno podršku za reprodukciju zvuka i videa u pregledniku

preko elemenata HTML5.

Podržani formati za multimediju su:

• za audio

● .mp3 – najkorišteniji audioformat za glazbene datoteke

● .wav – jest Windows kontejner koji podržava različite audioformate

● .ogg(oga) – jest multimedijski kontejner koji može sadržavati sve vrste formata kompresije, stvara male datoteke uz dobru kvalitetu zvuka

•  za video

● .mp4 – koristi se zasebnom kompresijom za audio i video, veličine datoteka relativno su male, ali kvaliteta ostaje visoka i nakon kompresije. Popularan je za mrežno dijeljenje videozapisa jer je kompatibilan s internetskim i mobilnim preglednicima, a podržava ga i HTML5.

● .ogg (ogv) – jest royalty-free kodek (licencija bez naknade), video visoke kvalitete, ali i s većim veličinama datoteke.

● .webm – komprimirani format podržan u većini preglednika.

Preporuka je rabiti .mp3 za audio i .mp4 za video jer daju dobar odnos kvalitete i veličine datoteka, a podržani su u novijim preglednicima. U svim je formatima važno da je kvaliteta

sadržaja proporcionalna veličini datoteke.

Grafiku možemo podijeliti:

• prema načinu generiranja grafike na vektorsku i rastersku
• prema nastavku (ekstenziji) datoteka.

Vektorska slika sastoji se od vektora koji su opisani duljinom i smjerom u prostoru. S pomoću vektora stvara se objekt u kojem svaki vektor sadrži tri podatka: duljinu, smjer i boju linije, a kad one kreiraju zatvoreni oblik, javlja se i boja ispune kao četvrti podatak.

Vektorske slike u promjeni veličine prikaza ne gube na kvaliteti.

Rastersku sliku čine pikseli, pri čemu se promjenom njihove boje stvaraju različiti prikazi. Kvaliteta rasterske slike ovisi o rezoluciji, pri uvećanom prikazu gubi na kvaliteti.

Grafički formati koji su pogodni za objavljivanje na webu su:

• .jpeg – sažimanjem gubi na kvaliteti, ne podržava prozirnost
• .gif – rabi se za izradu kratkih animiranih sadržaja, pri sažimanju ne gubi na kvaliteti
• .png – pri sažimanju ne gubi na kvaliteti, podržava djelomičnu prozirnost
• .svg – mala veličina datoteka, XML (tekstualni) format zapisa ima mogućnost indeksiranja.

3. Ugradnja multimedijskih sadržaja u HTML dokument

Multimedijski sadržaji ugrađuju se u HTML dokument s lokacije gdje su smješteni navođenjem

apsolutne ili relativne putanje dokumenta. Lokacija se navodi unutar elemenata <img> za slike, <video> za video i <audio> za audiodatoteke.

Apsolutna putanja sadrži URL adresu multimedije koja je smještena na vanjskoj mrežnoj stranici, što znači da ne upravljamo datotekama koje nisu u našoj mrežnoj mapi. Osim toga može sadržavati lokaciju datoteke na disku nekoga lokalnog računala pa će se pri preseljenju na drugi poslužitelj morati mijenjati.

Relativna putanja jest putanja od HTML dokumenta do multimedijskog sadržaja koji želimo prikazati (slika, video, audio...), ima kraći zapis i pri preseljenju naše mrežne stranice na drugi mrežni poslužitelj ne mora se mijenjati. Preporuka je rabiti relativnu putanju.

Unutar svojstva src navodimo njihovu lokaciju (URL) navođenjem putanje do sadržaja koji

želimo ugraditi u naš HTML dokument.

Pri ugradnji slika dobra je praksa koristiti se svojstvom alt za imenovanje sadržaja (zamjenski

tekst) i svojstvom za namještanje dimenzija elementa width i height.

Zamjenski tekst je tekst koji se prikazuje unutar prostora rezerviranog za sliku ako se

slika ne može pravilno prikazati.

Prema HTML standardu sva su četiri svojstva obvezna (src, width, height i alt), ali mrežnom

pregledniku dovoljan je samo src.

Na slici uočavamo da je prva slika ugrađena prema pravilima sa sva četiri parametra. Drugoj se slici prikazuje predefinirani tekst HTML5 jer je lokacija slike nepoznata. Treća slika ima deformirane dimenzije jer pri zadavanju nismo pazili na proporcionalnost.

Četvrta i peta slika imaju zadanu samo širinu ili visinu, pravilno se prikazuju, jer druga se veličina određuje automatski, proporcionalno. Zadnja slika nema zadane vrijednosti dimenzija i prikazuje se u svojoj stvarnoj veličini.

4. Element

Za veću fleksibilnost prema HTML5 standardu pri ugradnji slike moguće je koristiti se elementom <picture> i tako ponuditi mrežnom pregledniku više različitih datoteka što je dobro za responzivnost i pregled na različitim uređajima. Umjesto da imamo jednu sliku koja se uvećava ili smanjuje na temelju širine zaslona, može se postaviti više slika da ljepše popune okvir za prikaz u pregledniku s obzirom na veličinu zaslona. Unutar njega uključujemo i element <img> zbog kompatibilnosti sa starijim mrežnim preglednicima te jedan ili više <source> elemenata. Podržani formati slika su .jpeg, .gif, .png, .svg.

Unutar elementa <picture> koristimo se svojstvima:

• srcset – njegova je vrijednost putanja do slike koju ugrađujemo
• media – njegova su vrijednost obilježja zaslona odabranog uređaja
• width – širina elementa
• height – visina elementa.

Svojstvom source media="(min-width:1200px)" definiramo rezoluciju slike koja je pogodna za velika računala, odnosno zaslone s rezolucijom 1200 px i više, dok svojstvom media="(min-width:768px)" definiramo da je druga slika pogodna za prikaz na srednjim uređajima (tabletima) s veličinom zaslona 768 px i više. Vrijednosti 1200 px i 768 px predstavljaju područja vidljivosti.

Preglednik pronalazi prvi <source> element te provjerava podudara li se s odgovarajućim zaslonom za prikaz. Ako odgovara, prikazuje odgovarajuću sliku navedenu unutar svojstva srcset.

Element <picture> radi na istom načelu kao <video> i <audio>, postavlja različite izvore, a učitava se prvi odgovarajući.

5. Audio i video

Elementi za ugradnju video- i audioformata su <video> i <audio>, koji rade sa svim novijim preglednicima i omogućuju upotrebu standardnog načina za dodavanje multimedijskih sadržaja u HTML. Prije ugradnje video- ili audiosadržaje pohranimo u mapu našega mrežnog sjedišta.

Unutar elementa <source> koristimo se svojstvima:

•  src – za navođenje putanje
• type – za navođenje tipa datoteke video/mp4, ogg ili webm.

Unutar elementa <video> koristimo se svojstvima:

• width, height – dimenzije elementa je dobro postaviti jer ako ne postavimo, može doći do treperenja pri učitavanju stranice
• autoplay, controls, muted, loop (bez vrijednosti) – upravljanje videom
• poster – navodimo putanju do slike ako želimo dodati sliku koja će se prikazivati prije reprodukcije videa.

Svojstvo controls promijenimo u autoplay ako želimo da se video automatski pokrene,

a ako želimo da se ponavlja, dodamo svojstvo loop.

Videu je potrebno isključiti zvuk jer se neće prikazivati i na njegovu će mjestu stajati prazan prostor. Google Chrome ne podržava svojstvo autoply za zvuk pa ga treba postavit na mute, autoplay loop mute.

Za ugradnju zvučnih datoteka u HTML dokument koristimo se elementom <audio> prema

sličnom načelu kao i <video>.

Svojstvo controls je namješteno na loop, što znači da će se glazba nakon što završi reproducirati ponovno. Ako želimo da se zvuk automatski pokrene, svojstvo controls namjestit ćemo na autoplay.

6. ifreme

Često na mrežnim stranicama objavljujemo video sa servisa za dijeljenje videosadržaja, kao što su YouTube, Vimeo i slično. Za ugradnju takvog videa koristimo se elementom <iframe> koji omogućuje učitavanje HTML sadržaja unutar okvira mrežne stranice.

Svojstvo src ne sadrži stvarnu lokaciju videozapisa, nego njegov ID, kopiramo ga desnim klikom na sam video i stisnemo opciju kopiraj ugrađeni kod.

Preporuka je, kao i za ugradnju ostalih videa, koristiti se svojstvima width i height. Za dodatno upravljanje videoformom unutar istog svojstva možemo još dodati: autoplay, controls, start, playlist i loop.

Postoje medijski sadržaji koji se mogu dodati u HTML dokument, ali ne spadaju u HTML sadržaje upotrebom elemenata <object> ili <embed/>, koji omogućuju ubacivanje plug-inova.

S pomoću njih definiramo spremnike za vanjske datoteke, kao što su pdf, .swf, .docx, nestandardni videoformati ili audioformati.

Unutar elementa <embed/> koristimo se svojstvima:

•  src – lokacija vanjske datoteke
• type – tip datoteke
• width, height – dimenzije elementa.

Unutar elementa <object> koristimo se svojstvima:

• data – lokacija vanjske datoteke
• type – tip datoteke
• width, height – dimenzije elementa.