Smitka development

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 :-)
Samozřejmě jsou zde i drobné nevýhody, jako potřeba video kódovat do jiného formátu. Nicméně je to pořád lepší než se spoléhat, že uživatel bude mít všechny potřebné kodeky či potřebný přehrávač (Quicktime).

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;amp;autoStart=false"> <param name="movie" value= "flvplayer.swf?file=soubor.flv&amp;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:
  1. skript na vložení flashe
  2. místo v dokumentu, kam přehrávač patří s unikátním ID
  3. 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');

Tvorba FLV

Pokud chcete zobrazovat na stránce video, musíte si ho enkódovat do FLV, to umí ffmpeg ovládaný z příkazové řádky. Pro příjemnější práci je dobré použít nějkterý grafický nástroj, mě se docela zamlouvá Internet Video Converter.

Závěrem

Doufám, že tento článek dovede toho, kdo ještě neví jak s multimédii na internetu ke zdárnému cíli. Pro více informací můžete nahlédnout do zdrojového kódu. Dobrou pomůckou pro nastavování mnou vybraného přehávače se určitě stane Wizard od autora přehrávače.
linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development