Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Prikaz videa v stilu
Avtor: realife | Objavljeno: dne 6. julij 2010, 12:07
  V lekciji imate prikazano, kako lahko enostavno izboljšate izgled video posnetkov in flash datotek na svoji strani.
 
 
1
  
 
Kliknite tukaj, da si prenesete arhivirano mapo z datotekami, ki jih potrebujete.
 
 
2
  
 
Po prenosu si na svoj računalnik razširite mapo Video in jo odprite.
 
 
3
  
 
Nato datoteko Stran.html odprite v programu Adobe Dreamweaver.
 
 
4
  
 
Odprite pogled kode in se premaknite na konec vrstice z naslovom.

Nato kliknite Enter, da boste naredili prazno vrstico.
 
 
 
 
 
5
  
 
V prazno vrstico prilepite naslednjo kodo:

<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />

Ko prilepite kodo ponovno stisnite Enter, da naredite novo prazno vrstico.
 
 
6
  
 
Postavite se v vrstico in prilepite kodo:

<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
 
 
7
  
 
Pojdite v pogled Design in kliknite zgoraj na gumb za dodajanje slik.

Slika naj bo izrezek iz videa oz. naj ima neko povezavo z njim.
 
 
8
  
 
Slika je dodana.

Jaz sem dodal sliko iz videospota Iyaz- Replay.
 
 
9
  
 
Označite sliko in ji spodaj dodajte povezavo do video posnetka.

Od 14. koraka naprej je opisano dodajanje pravilne povezave.
 
 
10
  
 
Slika naj ostane označena.

Kliknite zgoraj na Code in videli boste, kje se nahajata slika in povezava.
 
 
11
  
 
Med " in > vstavite naslednjo kodo (glej sliko):

rel="vidbox 800 600" title="Naslov"

800- širina predvajalnika
600- višina predvajalnika
Naslov- naslov posnetka, ki se pokaže pod predvajalnikom
 
 
12
  
 
Podatke s pomočjo prejšnjega koraka uredite, kakor vam ustreza.

Jaz sem nekoliko zmanjšal velikost predvajlnika in dodal izvajalca ter naslov pesmi.
 
 
13
  
 
Stran shranite in jo preverite delovanje prikaza.

V primeru nedelovanja se lahko posvetujete na forumu.
 
 
14
  
 
V naslednjih korakih si bomo ogledali, kakšno povezavo morate vnesti pri 9. koraku, da se bo video oz. flash predvajal.

Pri strani Youtube ne boste imeli problemov.

Primer povezave: http://www.youtube.com/watch?v=dTsYXtKeMx0

Isto povezavo vnesite tudi v polje za povezavo.
 
 
15
  
 
Pri strani Metacafe je zadeva popolnoma ista kot pri strani Youtube.

Torej, samo kopirate povezavo in jo prilepite.
 
 
16
  
 
Kako pa lahko prikažemo v stilu video posnetke s Facebooka?

Pomembno je, da kopiramo ID video posnetka, ki se nahaja na koncu URL naslova.

Npr. 1123386760593

Povezavo, ki jo bom prilepil pri 9. koraku bo:
http://www.facebook.com/v/1123386760593
 
 
17
  
 
Pri strani Mojvideo je zadeva zelo podobna Facebooku.

Ponovno poiščemo ID video posnetka, ki ga najdemo na koncu povezave.

Npr. f3afea1df66cda6d55f2

Povezava, ki jo prilepimo pri 9. koraku pa je:
http://www.mojvideo.com/v/f3afea1df66cda6d55f2
 
 
18
  
 
Bistvo prejšnjih dveh korakov pa je bilo, da smo prilepili direktno povezavo do predvajalnika.

Povezava do flash datoteke: http://www.zmaga.com/primer.swf

Tukaj pa ni problema. Prilepite neposredno povezavo do flash datoteke.
 
 
Komentiraj
  
 
 
 
 
30.11.2010, 22:30
Zdravo

Mam eno hitro vprašanje

Na strani kjer že imam vpeljano lekcijo prikaz slike v stilu, bi rad vpeljal še prikaz videa v stilu. Zatakne se mi ko dodam kodo za prikaz videa, nato mi preneha delovat še tista za slike. zanima me, če mi lahko prosim nekdo pove, kako pravilno vnesem, 2 kodi, ki sta sicer podobni a imata različen učinek, ne da mi potem ne dela nič

Koda za prikaz slik:
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />


Koda za prikaz videa:
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>


Vse skupaj pa bi vnesel v to kodo :

<html>
<head>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<title>Galerie</title>



Upam da mi bo kdo lahko pomagal:
 
 
 
 
30.11.2010, 22:46
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="videobox/css/videobox.css" type="text/css" media="screen" />
<script type="text/javascript" src="videobox/js/mootools.js"></script>
<script type="text/javascript" src="videobox/js/swfobject.js"></script>
<script type="text/javascript" src="videobox/js/videobox.js"></script>
Označi zadnjo kodo in jo nadomesti z zgornjo. Spletni prikazovalnik bi moral nato normalno prebrati vse in ti tudi prikazati slike in video posnetke v stilu.
 
 
 
 
30.11.2010, 22:59
Kot kaže si se srečal s problemom prekrivanja javascript framework knjižnic.

V splošnem obstaja več javascript knjižnic, ki so namenjene isti stvari.

Med bolj znanimi sta tudi Prototype, ki jo uporabljaš v prvem primeru, ter mootools, ki ga uporabljaš v drugem primeru. Drugače pa je trenutno najbolj uporabljana podobna knjižnjica JQuery.

Ker te knjižnjice uporabljajo isto sintakso za naslavljanje spremenljivk, med seboj privzeto niso kompatibilne.

Sedaj imaš več možnosti:

1. Prirediš kodo.
Zadnja verzija mootols vsebuje kodo za izogibanje konfliktov. Na žalost je prototype ne, zato boš moral narediti popravke v knjižnjici za efekte, kar zna biti problematično.
http://efreedom.com/Question/1-1722791/P....

2. Najdeš efekt za video, ki prav tako uporablja knjižnico Prototype.

3. Za oboje najdeš podoben efekt, ki isto stvar dela z jQuery. Izbire imaš kar precej. Poglej recimo stran:
http://line25.com/articles/rounding-up-t....

spremenil: podtalje (30.11.2010 ob 23.00.38)
 
 
 
 
1.12.2010, 0:04
Podtalje to je use skupaj nekako nerazumljivo zame hehe .. še nisem takšen strokovnjak

Realife: To kodo sem vnesel, namesto kode za prikaz slik, pa vseeno ne gre. Bi morala delovati zagotovo? Sem pa sedaj, brez javascript kode dodal video, ki mi ga pa pač celozaslonsko predvaja, kar mi pa niti malo ni všeč, in ali je možnost da ta video spravim na velikost recimo 600×450?
 
 
 
 
1.12.2010, 12:56
Koda od realife-a sem skoraj prepričan, da ne bo delovala, zaradi problema kompatibilnosti javascript knjižnjic, ki sem ga opisal v moji prejšnji objavi.

Komaptibilnost bi lahko dosegel s spremembo kode, vendar pa je tehnično to že kar precej zahtevno.

Na tvojem mestu bi posksuil z uporabo jQuery knjižnice ter Shadowbox:
http://www.shadowbox-js.com/

Ta zna predvajati tako slike, kot tudi video, tako da uporabiš samo eno knjižnjico.
Kako uporabiš Shadowbox, lahko najdeš na:
http://www.shadowbox-js.com/usage.html

spremenil: podtalje (1.12.2010 ob 12.57.03)
 
 
 
 
20.2.2012, 16:39
Pozdravljeni!

Link za prenos pri prvi sliki ne deluje, ali pa ni pravilen....?
 
 
 
 
20.2.2012, 18:09
Toomy:
Pozdravljeni!
Link za prenos pri prvi sliki ne deluje, ali pa ni pravilen....?

Sem popravil. Datoteka je bila že izbrisana.
 
 
 
 
11.1.2017, 16:14
vaš primer več ne deluje. prosim, da odpravite napako, tako da dodate primer, ali pa ga iz vsebine odstranite.

hvala
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!
  
Zmaga.com na Facebooku | Pošljite nam e-pošto | Informacije o Zmaga.com