Multimédia na webu
Kdysi jsem psal článek o multimédiích na interentu. Ukazoval několik způsobů jak na stránky dosta video, či zvuk. Využívalo se k tomu několik více či méně dostupných objektů. Doba však pokročila a s jiným než flashovým přehrávačem se setkáte jen zřídka... Proto si ukážeme jak na své stránky jednoduchým způsobem dostat video a zvuk
Flash player považuji za nejjednodušší způsob přehrávání multimédií z několika důvodů:
- rozšířenost - naprostá většina lidí jej má nainstalovaný
- jednoduchost implementace - stačí pár řádků kódu, a jsou i rozšířené skripty, které nám práci zjednodušší opravdu na minimum (budeme je používat)
- bufferování - soubor se dopředu bufferuje, aby se mohl plynule přehrávat
- možnost vlastních úprav - zrojové kódy jsou většinou volně k dispozici a nic nebrání úpravám
- prostě za málo peněz hodně muziky
Ke zprovoznění používám již hotový, dobře vybavený JW FLV player. Samozřejmě existuje mnoho dlaších, nicméně tento si mě získal svou jednoduchostí a funkčností.
V balíčku s ním máte mimo přehrávače přibalené zrojové kódy, příklady a skriptík na umístění na web, který ulehčí vkládání a odstraní některé neduhy, jako je nutnost nejprve kliknout na objekt v některých prohlížečích.
Umístění přehrávače na stránky
Je nutno vložit přehrávač flwplayer.swf do stránky jako flash objekt:
<object type="application/x-shockwave-flash" width="320" height="180"
wmode="transparent" data=
"flvplayer.swf?file=soubor.flv&amp;autoStart=false">
<param name="movie" value=
"flvplayer.swf?file=soubor.flv&amp;autoStart=false">
<param name="wmode" value="transparent">
</object>
Soubor.flv je zde náš multimediální soubor. Stejnou věc můžeme provést pomocí skriptu, který určitě oceníme, až budeme předáva více parametrů a budeme přehrávat více souborů (v ukázce přidáno nastavení barv přehrávače a obrázek na pozadí).
Vkládání přehrávače má 3 části:
- skript na vložení flashe
- místo v dokumentu, kam přehrávač patří s unikátním ID
- vytovření a vložení přehrávače skriptem
//ad 1
<script type="text/javascript" src="swfobject.js" />
//ad2
<div id="player">něco</div>
//ad3
<script type="text/javascript">
var so = new SWFObject('flvplayer.swf','mpl','320','180','7');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addVariable('file','soubor.flv');
so.addVariable('height','180');
so.addVariable('width','320');
so.addVariable('image','obrazek.jpg');
so.addVariable('frontcolor','0x600000');
so.addVariable('backcolor','0xfff440');
so.write('id playeru');
</script>
Ukázka:
Test 1
Druhá ukázka, přidáno so.addVariable('displayheight','240');, tím zobrazíme video na celou šířku přehrávače a vytvoříme mizící ovládací prvky.
Test 2
Přehrávač MP3
Další pěknou věcí je přehrávání souborů MP3, stačí pouze místo FLV souboru dát cestu k mp3.Test 3
A samozřejmě jej můžeme trošku vylepšit, můžeme přidat efekt equalizéru: so.addVariable('showeq','true');
Test 4
Playlisty
Poslení užitečnou vlastností, o které se zmíním je přehrávání v více souborů podle playlistu. Stejně jako u mizejícího menu se playlist zobrazuje v pomocí rozdílných vlastností displayheight a height, případně displaywidth a width.Rozdíl ve height vlastnostech zobrazí playlist pod přahrávačem
Test 5
Rozdíl ve width vlastostech naopak zobrazí playlist vedle přehrávače.
Test 6
Playlist je soubor XML, který přiřadíme atributu file.
Formátů souboru můž být několik, může to být např XSPF:
<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>Ukázkové audio 1</title>
<creator>Interpret</creator>
<location>music1.mp3</location>
</track>
<track>
<title>Ukázkové audio 2</title>
<creator>Interpret</creator>
<location>music2.mp3</location>
</track>
<track>
<title>Ukázkové audio 1 (znova)</title>
<creator>Interpret</creator>
<location>music1.mp3</location>
</track>
<track>
<title>Ukázkové audio 2 (znova)</title> <creator>Interpret</creator>
<location>music1.mp3</location>
</track>
</trackList>
</playlist>
Kód přehrávače s playlistem (playlist na boku o velikosti 380-240=140px):
var so = new SWFObject('flvplayer.swf','mpl','380','180','7');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addVariable('file','pl2.xml');
so.addVariable('displaywidth','240');
so.addVariable('height','180');
so.addVariable('width','380');
so.addVariable('frontcolor','0x600000');
so.addVariable('backcolor','0xfff440');
so.write('player6');
