A webfejlesztés netovábbja. :)
-
#426
Kedves Anna,
videó (de ugyanez a helyzet hng esetén is) az alábbi dolgok kellenek:
* Maga a videóállomány FLV formátumban (ha nem abban lenne, erre ott van például a Riva FLV Encoder), vagy a hangállomány MP3 formátumban
* Egy Flashben készült lejátszó (azért Flashben, mert ez a leginkább platformfüggetlenebbül használható megoldás - az operációs rendszer médialejátszója meg látogatónként más és más lehet) - ilyesmi például a JW FLV Player.
* Egy Flash beillesztésére szolgáló Javascript függvénykönyvtár (azért kell ilyesmi, hogy a Flasht validan és aktivációmentesen be tudjuk illeszteni az oldalba) - például az swfobject.
* Némi HTML és Javascript ismeretre, meg a DW kódnézetére (a DW grafikus szerkesztőfelületét, meg az oktatóvideókat el is lehet hagyni).
Akkor lássuk lépésről lépésre:
0. Tehát van egy videóállományunk (FLV kitejesztéssel), a JW Player Flashben készült lejátszó (SWF kiterjesztéssel), és egy swfobject Javascript függvénykönyvtár (JS kiterjesztéssel).
1. Vegyünk egy alap HTML-oldalt.
2. A HTML-oldalban <body> és </body> tagek között hozzunk létre egy blokkot, amibe bele fogjuk tölteni a Flashben készült lejátszót:
<div id="flashplayer">
</div>
3. Ugyancsak a HTML oldalban, a 2. lépésben említett blokk után rakjuk az swfobject Javascript-függvénykönyvtár betöltését:
<script type="text/javascript" src="swfobject.js"></script>
4. Ez után a betöltött swfobjecttel töltsük be a lejátszót benne a videóval:
<script type="text/javascript">
//<![CDATA[
var attributes = {};
var params = {};
var flashvars = {
file: "barsandtone.flv"
};
swfobject.embedSWF("player.swf", "flashplayer", "360", "288", "9.0.0","", flashvars, params, attributes);
//]]>
</script>
Itt annyi történik, hogy megadjuk a videóállomány nevét (file: "barsandtone.flv"), majd betöltjük a videólejátszót (player..swf) a "flashplayer" azonosítójú blokkba (amit a 2. pontban létrehoztunk), 360*288-as méretben.
5. Hogyha minden rendben van, töltsük fel a HTML, a Javascript, a Flash és az FLV állományokat a webtárhelyre.
Itt láthatsz egy példát működés közben, itt pedig letöltheted az egészet egyben, ZIP-ben tömörítve.