etikete:

Kako ugraditi YouTube video u web stranicu
Za web dizajnere. Kako ugraditi i podesiti YouTube video plejer na vašoj web stranicu.

Postoji više načina za prikaz YouTube videa na web stranici

AS2 plejer

AS2 tip plejera je jako zgodan i nudi mnogo opcija za podešavanje po volji. Medjutim YouTube sajt ovaj metod tretira kao zastareo. Video na web starnicama, gde je ugrađen kod AS2 plejera, još uvek odlično funkcioniše ali ne znamo da li će stalno tako biti.

AS3 plejer

Novij itip plejera. Raspolaže sa nešto manje opcija nego AS2 tip.

HTML5 tip plejera

HTML5 je novi nadolazeći web standard koji se nedavno tek počeo primenjivati. HTML5 prirodno (nativno) podržava prikaz videa što znači da se video prikazuje bez potrebe da instalirate posebne dodatke u browseru.
YouTube je medju prvim sajtovima koji je počeo da eksperimentiše sa HTML5 videom. Za sada je korišćenje HTML5 YouTube plejera još uvek u testnoj fazi i za sada je dostupno samo korisnicima koji su se prijavili u YouTube-ov program testiranja.
Naravno HTML5 plejer radi samo u web starnicama pisanim HTML5 jezikom i to na novijim browserima koji potpuno podržavaju HTML5.

IFrame metod za ugradnju AS3 ili HTML5 plejera

YouTube-ov IFrame metod ja najnoviji i to je sada default (podrazumevani) metod kojiYouTube promoviše i podstiče na što veću upotrebu. Prednost je u tome što je kod za ugradnju jednostavan i kratak. Teško je bilo šta pogrešiti. Nedostatak je u tome što je za ovaj metod dostupno manje opcija da plejer podesite po svojoj volji.
IFrame metod podržava AS3 tip plejera ili eksperimentalni HTML5 plejer.

Postupak ugradnje - korak po korak

Postupak ugradnje YouTube plejra se svodi na nekoliko jednostavnih koraka:

1) kopirajte kod plejera u HTML kod vaše stranice

 Kopirajte kod plejera (iz nekog od primera sa ove stranice) u deo vašeg HTML koda gde želite da plejer bude prikazan.

2) izmenite VIDEO_ID tj. šifru YouTube videa

Šta je YouTube VIDEO_ID ?
U adresi svakog YouTube videa se nalazi "VIDEO_ID" tj. šifra od 11 znakova koja je jedinstvena za svaki YouTube video. Lako ju je prepoznati i selektovati.
Od šifre koju upotrebite zavisi koji video će biti prikazan.
Vi treba da kopirate šifru od onog video koji želite da bude prikazan i da zamenite tu šifru sa označenim nizom znakova iz našeg primera koji ste odabrali.

3) odlučite se za dimenzije plejera i podesite te parametre

Zavisno od toga kakva je vaša stranica zavisi kolike dimenzija plejera su prikladne. Ispod imate poseban tekst "Kako odabrati dimenzije plejera" koji će vam pomoći pri odlučivanju.
Nakon što se odlučite za dimenzije, izmenite ta dva parametra "width" (širina) i "height" (visina).

4) podesite dodatne parametre

Zatim, ako želite, izmenite ostale parametare po vašoj želji i prema dole napisanim uputstvima.

Kako odabrati dimenzije plejera

Dimenzije ekrana odredite prema rezoluciji a zatim visinu uvećajte za 30 pixela (za AS3 plejer) ili 25 pixela (za AS2 plejer) jer je tolika visina trake sa komandama plejera koja stoji ispod ekrana. 

Opis Aspect
Ratio		 Rezolucija (dimenzije ekrana) Dimenzije plejera AS2 tipa Dimenzije plejera AS3 tipa
Klasičan mali prikaz plejera. Često korišćen... 4:3 320x240 320x265 320x270
Najčešće korišćene dimenzije plejera 4:3 480x360
 480x385 480x390
Plejer idealnih dimenzija za default you tube rezolucije Svaki video sa YouTube-a se u ovom plejeru prikazuje u svojoj default varijanti. 16:9 640x360
(default YouTube rezolucija)		 640x385 640x380
za 4:3 video malo veće rezolucije 4:3 640x480
  640x505 640x510
za HD 720p rezoluciju 16:9 1280x720 1280x745 1280x750

Umesto ovih dimenzija iz tabele možete koristite koje gode želite dimanzije.

IFrame metod postavljanja plejera AS3 tipa

Najnoviji tip ugradnje plejera.

Primer HTML koda za prikaz AS3 YouTube plejer



- Umesto NNNNNNNNNNN unesite odgovarajući niz znakova vašeg YouTube videa.
- Ovo je primer za plejer dimenzija 480x390 ali umesto cifri "480" i "390" možete uneti i neke druge i tako dobiti plejer dimenzija koje želite.

Klasičan metod ugradnje AS2 tipa YouTube plejera

Stariji tip koda sa mnogo mogućnosti za podešavanje.

Primer HTML koda za prikaz  YouTube videa 

Ovo je primer koda koji možete koristiti na vašoj web stranici. Potrebno je samo da izmenite pojedine delove koda prema ispod navedenim uputstvima:


- Umesto NNNNNNNNNNN unesite odgovarajući niz znakova vašeg YouTube videa.
- Ovo je primer za plejer dimenzija 480x385 ali umesto cifri "480" i "385" možete uneti i neke druge i tako dobiti plejer dimenzija koje želite.
- Umesto AAAAAA unesite html oznaku boje za color1 parametar.
- Umesto BBBBBB unesite html oznaku boje za color2 parametar. 

Najvažniji parametri za AS2 tip YouTube plejera

Obajašnjenja značenja nekiih najbitnijih parametara kojima se plejer može dodatno podesiti da izgleda i funkcioniše po vašem ukusu.

autoplay

Ovaj parametar određuje da li će video biti automatski pušten odmah nakon prikaza stranice na kojoj je postavljen.
Default (podrazumevano) je podešen na 0. 

0

Znači da video neće biti pušten automatski. Korisnik mora da klikne na taster "play" da bi pokrenuo gledanje videa.

1

Video će biti pušten automatski čim stranica na koj se nalazi bude prikazana. Ovo nije preporučljivo radi korisnika sa sporijim internetom jer učitavanje videa takođe može usporiti prikaz cele stranice a to može biti predugo.

color1

color1 je boja tanke linije kojom je plejer iscrtan.

color2

color2 je boja trake iza na kojoj su tasteri plejera (unutar kontura koje su iscrtane linijom sa bojom colour1)

fs

Ovaj parametar određuje da li će u prikazanom plejeru biti taster za "Full screen" tj. gledanje videa uvećanog da prekriva ceo ekran.

start

ovaj paramter određuje da će video biti pušten ne od početka već određeni broj sekundi nakon početka.

loop

0

Znači da video biti pušten uobičajeno jedamput. 

1

Video ći biti pušten ukrug opet i opet. Ova opcija ne radi uvek. Ponekad je potrebno da bude pušetna plejlista a ne samo jedan video...

XHTML varijanta koda za AS2 tip YouTube plejera

Tipičan kod za YouTube player je namenjen za HTML 4.0 ali ako je kod vaše stranice pisan u XHTML jeziku, onda HTML kod neće raditi ili čak može doći do greške umesto prikaza stranice.

Za one koji trebaju XHTML imamo dva primera koji možete prepraviti i tako ih koristiti u vašim XHTML stranicama:

Primer najosnovnijeg XHTML koda za prikaz YouTube videa




- Umesto NNNNNNNNNNN unesite odgovarajući niz znakova vašeg YouTube videa.
- Ovo je primer za plejer dimenzija 480x390 ali umesto cifri "480" i "390" možete uneti i neke druge i tako dobiti plejer dimenzija koje želite.

Primer XHTML koda za prikaz YouTube plejera sa odabranim bojama




- Umesto NNNNNNNNNNN unesite odgovarajući niz znakova vašeg YouTube videa.
- Ovo je primer za plejer dimenzija 480x390 ali umesto cifri "480" i "390" možete uneti i neke druge i tako dobiti plejer dimenzija koje želite.
- Umesto AAAAAA unesite html oznaku boje za colur1 parametar.
- Umesto BBBBBB unesite html oznaku boje za color2 parametar.
video majstor, 26.06.2011
Za diskutiju i pitanja na ovu temu možete koristiti naš forum
>>Za učestvovanje na forumu registracija nije neohodna<<
Vrati se na početnu stranicu

Povezani tekstovi (relevant content)

Stranice povezane ključnim rečima (etiketama):