LV10 HTML Media
Petar Lovaković i Filip Marangunić
PRIPREMA ZA VJEŽBU
1. Što uključuje multimedija na web-u? (https://www.w3schools.com/html/html_media.asp)
2. U kojem se obliku spremaju multimedijalni elementi? Što određuje ekstenzija? Nabrojite nekoliko mogućih ekstenzija (proširenja).
3. Nabrojite uobičajene formate za video datoteke. Koje formate podržava HTML? Koji format preporuča YouTube?
4. Nabrojite uobičajene formate za audio datoteke. Koja tri formata su podržana HTML standardom? Koji je najbolji format za kompresiranu snimljenu glazbu?
5. Što su plug-in-ovi? Nabrojite najmanje pet različitih zadataka plug-in-ova?
6. Koje vrste objekata (plug-in tipa) više nisu podržane, dostupne ili su isključene u preglednicima?
Multimedija uključuje slike, glazbu, zvuk, video zapise, ploče, filmove, animacije i još mnogo toga.
Multimedijalni elementi se često spremaju u određenim formatima koji određuju kako će ti elementi biti prikazani ili reproducirani. Ekstenzija je dio imena datoteke nakon točke (npr., .jpg, .mp4) i određuje format datoteke. Neki primjeri ekstenzija za multimedijalne elemente uključuju:
Slike: .jpg, .png, .gif
Video: .mp4, .avi, .mov
Audio: .mp3, .wav, .ogg
Uobičajeni formati za video datoteke uključuju:
MPEG-4 (.mp4)
WebM (.webm)
Ogg Theora (.ogg)
HTML podržava ugrađivanje videozapisa pomoću <video> oznake, a podržava različite formate, uključujući navedene.
YouTube često preporučuje format .mp4 za videozapise.
Uobičajeni formati za audio datoteke uključuju:
MP3 (.mp3)
WAV (.wav)
Ogg Vorbis (.ogg)
HTML podržava ugrađivanje audiozapisa pomoću <audio> oznake, a podržava različite formate, uključujući navedene.
Najbolji format za kompresiranu snimljenu glazbu ovisi o preferencijama i potrebama korisnika, ali MP3 je često korišten format zbog dobre kompresije i široke podrške.
Plug-in-ovi su dodaci ili proširenja koji se koriste u web preglednicima kako bi proširili funkcionalnosti. Pet različitih zadataka plug-in-ova uključuje:
Dodavanje dodatnih medijskih formata.
Omogućavanje interaktivnih elemenata na web stranicama.
Pružanje sigurnosnih značajki poput ad-blockera.
Integracija s vanjskim uslugama ili aplikacijama.
Poboljšavanje performansi preglednika.
Vrste objekata (plug-in tipa) koje više nisu podržane, dostupne ili su isključene u preglednicima mogu uključivati starije tehnologije poput NPAPI plug-in-ova (Netscape Plugin Application Programming Interface), poput Java appleta i Silverlight plug-ina. Moderne web tehnologije često koriste nove standarde poput HTML5 kako bi smanjile ovisnost o zastarjelim plug-in-ovima.
IZVOĐENJE VJEŽBE
1.
A Atribut controls koristi se za dodavanje kontrola za reprodukciju medijskih elemenata poput audio i video elemenata. Kada se ovaj atribut dodijeli medijskom elementu, prikazuju se standardne kontrolne tipke koje korisnicima omogućuju upravljanje reprodukcijom.
B Ako atributi width i height nisu postavljeni, preglednik će možda morati izračunati dimenzije slike nakon što se ona učita, što može rezultirati sporijim učitavanjem stranice, "skakanjem" sadržaja i smanjenom pristupačnošću.
C Element <source> koristi se unutar elementa <video> ili <audio> kako bi se navelo više izvora za medij. Ovo je korisno kada želite pružiti različite formate datoteka kako bi ih preglednici mogli odabrati prema svojim mogućnostima. Preglednik će odabrati prvi izvor koji može podržati.
D Tekst "Vaš preglednik ne podržava oznaku video." će se ispisati ako preglednik ne podržava HTML5 video oznaku ili ne može reproducirati nijedan od navedenih formata.
E Video sadržaj se može pokrenuti automatski dodavanjem atributa autoplay u oznaku <video>. Međutim, važno je napomenuti da neki preglednici i uređaji automatsko pokretanje videa onemogućuju zbog politike reprodukcije medija kako bi poboljšali korisničko iskustvo i uštedjeli resurse. Automatsko pokretanje može ne raditi na mobilnim uređajima s ograničenim podatkovnim planom ili u situacijama gdje korisnik nije aktivan na stranici.
F Za uključivanje audio datoteka u web stranicu koristi se HTML element <audio>.
2.
A Element <object> u HTML-u koristi se za ugradnju vanjskih resursa poput slika, videozapisa, ili drugih multimedijskih sadržaja. Ovaj element omogućuje specificiranje različitih vrsta objekata i njihovih alternativa. Primjeri upotrebe:
<object data="example.swf" type="application/x-shockwave-flash" width="300" height="200">
<param name="movie" value="example.swf">
Vaš preglednik ne podržava oznaku objekta.
</object>
B Element <embed> se koristi za ugradnju vanjskih resursa, uključujući multimedijske datoteke. Primjer:
<embed src="example.swf" width="300" height="200" type="application/x-shockwave-flash">
C YouTube video ID je jedinstveni identifikator videa na YouTubeu i sastoji se od 11 alfanumeričkih znakova. Primjer YouTube video ID-a: tgbNymZ7vqY.
D Šest koraka potrebnih za pokretanje YouTube videa na mrežnoj stranici:
Idite na YouTube: Prvo pronađite video koji želite ugraditi.
Kliknite na "Dijeli": Kliknite na gumb "Dijeli" ispod videa.
Odaberite "Ugradi": Odaberite opciju "Ugradi" kako biste dobili HTML kôd.
Kopirajte kôd: Kopirajte dobiveni HTML kôd.
Umetnite kôd: Zalijepite kôd na željeno mjesto u HTML dokumentu.
Spremite i pregledajte: Spremite promjene i pregledajte stranicu da biste provjerili ugrađeni video.
E Stišani autoplay kod videa može se postići dodavanjem mute atributa u kombinaciji s autoplay. Primjer:
<video autoplay muted controls>
<source src="video.mp4" type="video/mp4">
Vaš preglednik ne podržava oznaku video.
</video>
F Za YouTube playlist koristi se list atribut u URL-u. Primjer:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
frameborder="0"
allowfullscreen
></iframe>
G loop=1 u URL-u iframe-a označava da će se video neprestano ponavljati. Podrazumijevana vrijednost za loop je 0, što znači da se video neće ponavljati.
H Kontrole uz YouTube video sadržaj automatski se dodaju kada koristite controls atribut unutar <iframe> elementa, kao što je prikazano u vašem primjeru. Kontrole uključuju gumb za reprodukciju, pauzu, glasnoću i druge opcije upravljanja reprodukcijom.
3.