Zdarza się, że potrzebujemy umieścić na stronie jakiś film lub plik mp3. Można oczywiście skorzystać z html'a i uznać, że przeglądarka użytkownika ma zainstalowane odpowiednie wtyczki do odtwarzania filmów czy muzyki w wybranym przez nas formacie. Lepszym sposobem jest skorzystanie z odtwarzacza Flash.Tutaj zaprezentuję, jak używać na stronie odtwarzacza JW Player.

Najpierw musimy pobrać odpowiednie pliki ze strony odtwarzacza. Do wyboru mamy 3 wersje: darmową, Pro i Enterprise. Na początek zalecam wybranie wersji darmowej, ponieważ Pro i Enterprise kosztują kolejno 59$ i 599$, a nie wiadomo, czy taka będzie potrzebna.

Kiedy pobierzemy paczkę z plikami, rozpakowujemy ją. Powinno znajdować się w niej sześć plików.

Jeśli mamy wszystkie, przejdźmy do instalacji naszego skryptu w serwisie.

Najpierw w sekcji head dokumentu załączamy plik ze skryptami JavaScript:

<script type="text/javascript" src="swfobject.js"></script>

Kolejnym krokiem będzie wstawienie odtwarzacza w miejscu, którym go potrzebujemy.

Najpierw stworzymy miejsce, w którym wyświetli się odtwarzacz, a następnie stworzymy obiekt SWFObject o nazwie player1.

<div id="odtwarzacz1">Aby plik mógł być odtworzony, musisz zainstalować Macromedia (Adobe) Flash Player</div>
<script type="text/javascript">
	var player1=new SWFObject('player.swf','ply','470','320','9','#000000');
	player1.addParam('allowscriptaccess','always');
	player1.addParam('wmode','opaque');
</script>

Kolejnym krokiem będzie dodanie odpowiednich atrybutów do naszego obiektu. Pierwszym z nich będzie oczywiście link do pliku, który chcemy odtworzyć:

<div id="odtwarzacz1">Aby plik mógł być odtworzony, musisz zainstalować Macromedia (Adobe) Flash Player</div>
<script type="text/javascript">
	var player1=new SWFObject('player.swf','ply','470','320','9','#000000');
	player1.addParam('allowscriptaccess','always');
	player1.addParam('wmode','opaque');
	player1.addVariable('file','video.flv');
</script>

Należy wiedzieć, że JW Player odtwarza pliki flv, mpeg4, a także filmy z serwisu YouTube.

Jeśli chcemy skorzystać z filmu zamieszczonego w serwisie YouTube, wystarczy, że wstawimy jako zmienną file, link do filmu.

Teraz przyjdźmy do kolejnego etapu - styl odtwarzacza. Możemy wybrać 4 kolory, które będą użyte w poszczególnych miejscach odtwarzacza. Będą to: backcolor - kolor tła paska, frontcolor - kolor czcionek i znaczków na pasku, lightcolor - kolor używany przy pasku postępu i przy regulacji głośności do wskazania poziomu, screencolor - kolor ekranu, na którym wyświetlany będzie film.

<div id="odtwarzacz1">Aby plik mógł być odtworzony, musisz zainstalować Macromedia (Adobe) Flash Player</div>
<script type="text/javascript">
	var player1=new SWFObject('player.swf','ply','470','320','9','#000000');
	player1.addParam('allowscriptaccess','always');
	player1.addParam('wmode','opaque');
	player1.addVariable('file','video.flv');
	player1.addVariable('backcolor','001b00');
	player1.addVariable('frontcolor','fff');
	player1.addVariable('lightcolor','001b00');
	player1.addVariable('screencolor',dbdbdb');
</script>

Teraz zajmiemy się funkcjonalnością odtwarzacza. Wszystkiego nie pokażę (poczytajcie sobie oficjalną stronę ;), ale postaram się przybliżyć parę ciekawszych funkcji.

<div id="odtwarzacz1">Aby plik mógł być odtworzony, musisz zainstalować Macromedia (Adobe) Flash Player</div>
<script type="text/javascript">
	var player1=new SWFObject('player.swf','ply','470','320','9','#000000');
	player1.addParam('allowscriptaccess','always');
	player1.addParam('wmode','opaque');
	player1.addVariable('file','video.flv');
	player1.addVariable('backcolor','001b00');
	player1.addVariable('frontcolor','fff');
	player1.addVariable('lightcolor','001b00');
	player1.addVariable('screencolor',dbdbdb');
	player1.addVariable('volume','85');
	player1.addParam('allowfullscreen','true');
	player1.addVariable('autostart','true');
	player1.write('odtwarzacz1');
</script>

Dodaliśmy domyślny poziom głośności, przycisk pozwalający na wyświetlanie filmu na pełnym ekranie, automatyczny start filmu zaraz po załadowaniu strony.

Ostatnia linijka skryptu (przedostatnia całego kodu) umieszcza wynik działania skryptu wewnątrz elementu o id odtwarzacz1.

Aktualna wersja skryptu sama rozróżnia typ odtwarzanego pliku i otwiera odpowiedni odtwarzacz. W poprzednich był osobny plik z odtwarzaczem do plików video i osobny do plików mp3.

Na koniec powiem jak zamieścić film z serwisu YouTube. Bardzo prosto! Wystarczy jako wartość zmiennej file podać link do filmu. Najlepiej w najczystszej postaci. Można taki uzyskać klikając na przycisk Udostępnij pod filmem w serwisie. Kiedyś wystarczyło skopiować zawartość paska adresu, jednak teraz YouTube działa na nowym skrypcie, który dodaje różne "odpadki" do adresu, które informują o playlistach itp.

Więcej o ustawieniach odtwarzacza przeczytasz tutaj: http://www.longtailvideo.com/support/jw-player-setup-wizard.