Dokumentacja Media Player Dokument zawiera podstawowe scenariusze użycia oraz bardziej zaawansowane funkcje API służące integracji odtwarzacza. Wersja dokumentacji: 2.0.0 Zawartość Osadzanie odtwarzacza na stronie... 2 Wklejenie kodu EMBED... 2 Osadzenie obiektu SWFObject... 2 Flashvary... 4 Konfiguracja z pliku xml... 8 Obszary aktywne specyfikacja... 10 Wymagania... 10 Zawartośd katalogów... 10 Zasada działania obszarów aktywnych w playerze... 11 Przykład - warstwa html otwierana z obszaru aktywnego... 12 JavaScript... 18 Umieszczane Reklam... 20 Preroll... 20 Overlayer... 21 Postroll... 22 Skórka odtwarzacza... 23 Crossdomain.xml... 23
Osadzanie odtwarzacza na stronie Istnieje kilka możliwości osadzenia odtwarzacza na swojej stronie. Poniżej zaproponowaliśmy najpopularniejsze rozwiązania. Wklejenie kodu EMBED Wystarczy że w dowolne miejsce strony wstawimy kod o następującej formie: Gdzie: <object width="szekorość" height="wysokość" type="application/xshockwave-flash" id="videoplayer" name="videoplayer" data=http://player.videocms.pl/player.swf> <param name="movie" value="http://player.videocms.pl/player.swf"/> <param name="allowfullscreen" value="true"/> <param name="allowscriptaccess" value="always"/> <param name="bgcolor" value="kolor tła"/> <param name="wmode" value="transparent"/> <param name="flashvars" value="flashvary"/> </object> szerokość i wysokość wymiary odtwarzacza w pikselach kolor tła kolor tła za odtwarzaczem flashvary zmienne przekazywane aplikacji. Definiują treśd i zachowanie odtwarzacza. Więcej na temat flashvarów w rozdziale na ich temat W razie potrzeb istnieje możliwośd edycji pozostałych parametrów jak id czy wmode zgodzie z dokumentacją html. Osadzenie obiektu SWFObject Istnieje również możliwośd osadzenia odtwarzacza za pomocą biblioteki SWFObject. Przykład takiego zastosowania: ( ) <head> ( ) <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; flashvars.zmienna = "wartość"; var params = {}; params.movie = "http://player.videocms.pl/player.swf"; params.allowfullscreen = true; params.allowscriptaccess = "always"; params.bgcolor = "kolor tła"; params.wmode = "transparent"; 2
swfobject.embedswf("http://player.videocms.pl/player.swf", "videoplayerdivid", "szerokość", "wysokość", "9.0.0", "expressinstall.swf", flashvars, params); </head> <body> </body> </script> ( ) ( ) <div id="videoplayerdivid"> <p>treść alternatywna</p> </div> ( ) Gdzie: swfobject.js link do biblioteki swfobject zmienna i wartość nazwa zmiennej flashvar oraz jej wartośd. Więcej informacji na temat flashvarów w rozdziale na ich temat kolor tła kolor tła za odtwarzaczem videoplayerdivid id elementu w którym ma zostad osadzony odtwarzacz szerokość i wysokość wymiary odtwarzacza w pikselach expressinstall.swf link do pliku expressinstall.swf (opcja, patrz dokumentacje SWFObject ) Treść alternatywna ten element będzie się wyświetlał do czasu załadowania odtwarzacza, lub w przypadku błędu gdy się nie załaduje. Więcej informacji na temat biblioteki SFWObject, opisy poszczególnych zmiennych, przykłady zaawansowanego zastosowania oraz pliki źródłowe znajdziemy na stronie projektu: http://code.google.com/p/swfobject/ 3
Flashvary Flashvary to zmienne podawane do odtwarzacza video, dzięki którym można go dostosowad do swoich potrzeb. Jeżeli korzystamy z kodu embed generowanego przez Video CMS to najważniejsze funkcje możemy ustawid poprzez panel administracyjny a pozostałe niestandardowe można dopasowad do swoich potrzeb korzystając z opcji Dodatkowe opcje w konfiguracji odtwarzacza w panelu Video CMS. W przypadku ręcznego osadzania odtwarzacza na stronie musimy podad zmienne do prawidłowego działania. Poniżej znajduje się lista wszystkich dostępnych zmiennych. Obszar Nazwa zmienej Opis działania i przyjmowane wartości pseudostream jeśli ustawiony player obsługuje pseudo streaming, możliwe jest przesuwanie paska postępu poza obszar zbuforowany. Możliwe wartości to true, false, 1, 0 token to wynik z funkcji hashującej następujące flashvary w podanej kolejności, jeśli wartośd nie jest ustawiona we flashvarze powinien byd przypisany pusty string i tak samo pusty string powinien byd dodawany do innych parametrów dla funkcji hashującej basic activeareasurl ścieżka do pliku xml ze strefami aktywnymi addef string JSON z reklamami lub adres do JSON. Format zapisu dostępny w rozdziale Umieszczanie reklam basic advertiseurl ścieżka do pliku xml z reklamami basic autoplay player zaczyna odtwarzanie automatycznie kiedy true lub 1. Możliwe wartości to true, false, 1, 0 basic buffertime czas bufora w sekundach, domyślnie 4 basic cinemafunction nazwa odpowiedniej funkcji JavaScript, wywoływana jest z playera z parametrem 0 lub 1, jeśli flashvar nie jest ustawiony odpowiedni przycisk się nie pokazuje basic dblclickurl adres otwierany po podwójnym kliknięciu myszką basic duration czas trwania filmu, wyświetlany jeszcze przed rozpoczęciem buforowania basic embedcodeurl url do pliku txt UTF 8 z kodem do embedowania basic gazetaadbaseurl podstawowy url zliczający wywołania reklam, do którego dodawane są parametry basic ha true lub 1 (domyślnie wyłączone, działa w przypadku flash playera 9.115 i nowszych) włącza akcelerację sprzętową w trybie pełno ekranowym, możliwośd włączenia/wyłączenia również w menu kontekstowym (uwaga w trybie tym gui jest przeskalowane i nie wygląda dobrze, podobnie video jeśli ma mały rozmiar). Możliwe wartości to true, false, 1, 0 basic hqbw szerokośd pasma w MB/s. Jeśli pasmo zmierzone jest większe lub równe podanej wartości odtwarzany domyślnie będzie materiał HQ. Działa tylko jeśli qualitybtn jest ustawiony. 4
basic listener nazwa obiektu obsługującego zdarzenia basic logo adres do loga, jeśli podany logo pokazuje się w prawym górnym rogu, logo może byd plikiem PNG z przeźroczystością basic playlist adres url do play listy, jeśli nie jest ustawiony play lista się nie pokazuje basic related adres url do listy dla materiału dla ustawionego flashvara url basic title tytuł odtwarzanego materiału przy ustawieniu flashvara url basic url adres url to pliku flv, który ma byd odtwarzany lub adres pierwszej klatki znak pipe i adres pliku flv. Pierwsza klatka będzie wyświetlana jeśli autoplay jest ustawiony na false gui bgbarcolor color hex np. #FF000 lub 0xFF0000 ustawia kolor tła paska gui bgcolor color hex np. #FF000 lub 0xFF0000 ustawia kolor tła playera gui bufferingbarcolor color hex np. #FF000 lub 0xFF0000 ustawia kolor paska ładowania gui checkpolicyfile domyślnie false, sprawdza i ładuje crossdomain.xml jeśli jest na serwerze gui closebtn gui embedbtn włączanie/wyłączanie przycisku embed, wartości true lub false gui fitthumbto Skalowanie wielkości miniaturek obrazków. Możliwe wartości to all skalowanie proporcjonalne do wielkości miniatury lub width skalowanie proporcjonalne tylko do szerokości, nadmiar wysokości jest maskowany gui fixedbarheight jeśli podana jest wartośd liczbowa obszar aktywny playera oraz video będzie mniejsze o tą wysokośd a pasek nawigacji będzie na stałe, nie będzie się chowad gui fullscreenbtn włączanie/wyłączanie przycisku full screen. Ponadto przy osadzaniu flasha powinien byd ustawiony parametr allowfullscreen na true. Możliwe wartości to true, false, 1, 0. Domyślnie 1 gui progressbarcolor color hex np. #FF000 lub 0xFF0000 ustawia kolor paska postępu gui qualitybtn włączenie/wyłączenie przycisku quality w na pasku kontroli, play liście i related. Możliwe wartości to true, false, 1, 0. Przycisk jest wyłączany jeśli wersja Flash Playera jest mniejsza niż 9.115 (ze względu na brak wsparcia video HQ kodowanego za pomocą H.264) gui skin url do skina, jeśli nie podany playerem można sterowad z poziomu JavaScript gui themecolor color hex np. #FF000 lub 0xFF0000 ustawia kolor skórki gui thumbbarcolor color hex np. #FF000 lub 0xFF0000 ustawia kolor gałki 5
na pasku lang ad_title Tłumaczenie, domyślnie REKLAMA lang ha_off Tłumaczenie, domyślnie Wyłącz akcelerację na pełnym ekranie lang ha_on Tłumaczenie, domyślnie Włącz akcelerację na pełnym ekranie lang hint_hide_playlist Tłumaczenie, domyślnie Schowaj listę lang hint_pause Tłumaczenie, domyślnie Pauza lang hint_play Tłumaczenie, domyślnie Odtwarzaj lang hint_show_playlist Tłumaczenie, domyślnie Lista odtwarzania lang hint_stop Tłumaczenie, domyślnie Zatrzymaj lang hint_turn_off_cinema Tłumaczenie, domyślnie Wyłącz tryb kinowy lang hint_turn_off_fullscreen Tłumaczenie, domyślnie Wyłącz pełny ekran lang hint_turn_on_cinema Tłumaczenie, domyślnie Włącz tryb kinowy lang hint_turn_on_fullscreen Tłumaczenie, domyślnie Włącz pełny ekran lang hint_turn_on_hq Tłumaczenie, domyślnie Włącz wysoką jakośd lang hint_turn_on_lq Tłumaczenie, domyślnie Włącz niską jakośd lang live_info Tłumaczenie, domyślnie...transmisja na żywo... lang loading_data Tłumaczenie, domyślnie Pobieranie danych... lang playlist_title Tłumaczenie, domyślnie Warto zobaczyd lang relatedlist_title Tłumaczenie, domyślnie Warto zobaczyd stats gs_encoding Dotyczy tylko Gemius Stream, kodowanie, domyślnie UTF 8 stats gs_hitcollector Dotyczy tylko Gemius Stream, pełny url do hit collectora (wymagane) stats gs_id Dotyczy tylko Gemius Stream, identyfikator klienta GemiusStream (wymagane) stats gs_playerid Dotyczy tylko Gemius Stream, można podad id playera jeśli nie id jest generowany stats statendurl adres URL który ma zostad wywołany przez player jeśli użytkownik obejrzy film do kooca stats statpauseurl adres URL który ma zostad wywołany przez player jeśli użytkownik kliknie w play stats statplayurl adres URL który ma zostad wywołany przez player jeśli użytkownik stats statprogress100url adres URL który ma zostad wywołany przez player jeśli użytkownik obejrzy 100% materiału stats statprogress25url adres URL który ma zostad wywołany przez player jeśli użytkownik obejrzy 25% materiału stats statprogress50url adres URL który ma zostad wywołany przez player jeśli użytkownik obejrzy 50% materiału stats statprogress75url adres URL który ma zostad wywołany przez player jeśli użytkownik obejrzy 75% materiału stats statstopurl adres URL który ma zostad wywołany przez player jeśli użytkownik kliknie stop stream a0,a1,a2 parametry służące do autoryzacji przekazywane przy połączeniu z media serwerem stream islive jeśli ustawione znika pasek postępu, pojawia się 6
zamiast niego napis zdefiniowany przez flashvar liveinfo. Możliwe wartości to true, false, 1, 0 stream liveconnectionissue link do obrazka lub pliku xml definiujący informację o problemach z połączeniem, działa tylko gdy islive=true stream liveinfo definiuje napis pokazywany podczas transmisji live, działa tylko gdy islive=true stream livenostream link do obrazka lub pliku xml definiujący informację o tym, że stream jest już/jeszcze nie dostępny, o czasie transmisji itd., działa tylko gdy islive=true stream liverefresh co ile sekund ma ponawiad połączenie z serwerem, domyślnie 5, działa tylko gdy islive=true stream usebalancer jeśli ma wartośd true, przy streamingu pobiera url docelowy do streamu na zapytując dany adres url. Możliwe wartości to true, false, 1, 0. Działa tylko gdy islive=true 7
Konfiguracja z pliku xml Nie musimy jednak podawad za każdym razem wszystkich flashvarów, możemy generowad sobie plik xml zawierający wybrane przez nas zmienne. W takim wypadku należy ustawid jedynie jeden flashvar xmlconfig który za wartośd przyjmuje link do pliku xml z konfiguracją. Struktura pliku xml powinna przybrad następującą postad: <?xml version="1.0" encoding="utf-8"?> <config> <basic> <listener></listener> <duration></duration> <ha></ha> <hqbw></hqbw> <autoplay></autoplay> <buffertime></buffertime> <cinemafunction></cinemafunction> <url>v-lq.flv</url> <title></title> <logo></logo> <dblclickurl></dblclickurl> <playlist></playlist> <related></related> <activeareasurl></activeareasurl> <advertiseurl></advertiseurl> <embedcodeurl></embedcodeurl> </basic> <gui> <skin>default_skin.swf</skin> <themecolor></themecolor> <bgcolor></bgcolor> <fitthumbto></fitthumbto> <qualitybtn></qualitybtn> <closebtn></closebtn> <fullscreenbtn></fullscreenbtn> <embedbtn></embedbtn> </gui> <stats> <statstreamurl></statstreamurl> <statplayurl></statplayurl> <statstopurl></statstopurl> <statpauseurl></statpauseurl> <statendurl></statendurl> <statprogress25url></statprogress25url> <statprogress50url></statprogress50url> 8
<statprogress75url></statprogress75url> <statprogress100url></statprogress100url> </stats> <stream> <islive></islive> <liveinfo></liveinfo> <a0></a0> <a1></a1> <a2></a2> </stream> <lang> <live_info>...transmisja na żywo...</live_info> <playlist_title>warto zobaczyć</playlist_title> <relatedlist_title>warto zobaczyć</relatedlist_title> <ad_title>reklama</ad_title> <ha_on>włącz akcelerację na pełnym ekranie</ha_on> <ha_off>wyłącz akcelerację na pełnym ekranie</ha_off> <loading_data>pobieranie danych...</loading_data> <hint_pause>pauza</hint_pause> <hint_play>odtwarzaj</hint_play> <hint_stop>zatrzymaj</hint_stop> <hint_hide_playlist>schowaj listę</hint_hide_playlist> <hint_show_playlist>lista odtwarzania</hint_show_playlist> <hint_turn_on_cinema>włącz tryb kinowy</hint_turn_on_cinema> <hint_turn_off_cinema>wyłącz tryb kinowy</hint_turn_off_cinema> <hint_turn_on_fullscreen>włącz pełny ekran</hint_turn_on_fullscreen> <hint_turn_off_fullscreen>włącz pełny ekran</hint_turn_off_fullscreen> <hint_turn_on_lq>włącz niską jakość</hint_turn_on_lq> <hint_turn_on_hq>włącz wysoką jakość</hint_turn_on_hq> </lang> </config> Elementy przyjmują wartości zgodnie z opisem z sekcji Flashvar 9
Obszary aktywne specyfikacja Wymagania Flash CS3/CS4 Export do Flash Player 9/ActionScript 3 Zawartośd katalogów 1. Pliki źródłowe. W katalogu sources znajdują się źródła, wszystkie potrzebne klasy (ActionScript 3) i plik FLA obszaru źródłowego (Flash CS3). Zawartośd katalogu sources: active_area.fla plik FLA przykładowy obszar aktywny assets/activeareas/activearea.as klasa główna przykładowego obszaru aktywnego assets/activeareas/ ActiveAreaEvent.as zdarzenie generowane przez obszar aktywny assets/activeareas/ IActiveArea.as podstawowy interfejs, który musi implementowad obszar aktywny assets/activeareas/ianimable interfejs ten musi byd implementowany jeśli obszar aktywny ma się animowad przy pokazywaniu się i chowaniu assets/activeareas/irollable interfejs ten musi byd implementowany jeśli obszar aktywny ma się zwijad/rozwijad W celu utworzenia własnych obszarów aktywnych należy edytowad plik active_area.fla oraz klasę ActiveArea.as. Pozostałych plików nie można zmieniad. 2. Pliki przykładowe/testowe. W katalogu example znajduje się przykład z playerem i obszarem aktywnym. Zawartośd katalogu example: index.html plik uruchamiający przykład, z osadzonym playerem i skryptami JavaScript active_area.swf plik wynikowy active_area.fla Player.swf plik playera default_skin.swf skórka do playera playlist.xml plik xml ze zdefiniowaną listą do odtwarzania active.xml plik xml ze zdefiniowanymi obszarami aktywnymi video.flv przykładowy plik video odtwarzany w playerze obrazek.jpg przykładowy plik graficzny odtwarzany w playerze thumb.jpg obrazek do play listy Na żółto zaznaczono pliki, które należy zmodyfikowad. 10
Zasada działania obszarów aktywnych w playerze Są dwa typy obszarów aktywnych: subtitle i custom. Typ subtitle wymaga wgranej skórki gdyż jest zintegrowany z interfejsem. Stosowany jest do zwykłych opisów pod filmami. Typ custom to obszary aktywne o dowolnym kształcie i funkcjonalności. Wszystkie obszary aktywne muszą implementowad interfejs IActiveArea ( klasa dokumentu musi implementowad IActiveArea). Dodatkowo te, które mają własne animacje znikania i pojawiania się muszą implementowad IAnimable, a te które się rozwijają i zwijają IRollable. Pliki swf muszą byd eksportowane do Flasha 9 i ActionScript 3. Przykładowa klasa ActiveArea implementuje zarówno IActiveArea jak i IAnimable i IRollable. Fps playera to 31 i również taki sam powinien byd fps obszarów aktywnych. Obszary aktywne pojawiają się w czasie i pozycji definiowanej w odpowiednim pliku xml. W pliku tym można także zdefiniowad tekst przekazywany do obszaru, link przy kliknięciu na obszar i inne parametry. Dla każdej pozycji z play listy może byd zdefiniowany jeden plik z obszarami aktywnymi. W każdym pliku może byd zdefiniowanych wiele obszarów aktywnych. Przykładowy plik to active.xml. Można definiowad następujące parametry: 1. id unikalny identyfikator obszaru aktywnego 2. typ subtitle lub custom 3. x, y położenie wewnątrz playera 4. timestart, timehide czas, w którym obszar pojawia się i znika 5. timerollup czas, po którym obszar się zwija 6. text tekst jaki ma się wyświetlad w obszarze, tekst może byd również ustawiony na stałe w danym obszarze 7. url ścieżka do pliku swf danego obszaru, który ma byd załadowany i pokazany 8. navigate adres http:// jeśli jest zdefiniowany kliknięcie na obszar otwiera adres w nowym oknie 9. click nazwa funkcji JavaScript, funkcja ta będzie wywoływana przy kliknięciu na obszar 10. mouseover, mouseout nazwy funkcji JavaScript wywoływane przy najechaniu na i poza obszar 11. onshow, onhide nazwy funkcji JavaScript wywoływane przy pokazaniu i chowaniu się obszaru 12. onrollup, onrollout nazwy funkcji JavaScript wywoływane przy zwijaniu i rozwijaniu się obszaru 13. W elemencie attributes można definiowad inne parametry obszaru, które zostaną w nim ustawione za pomocą metody setattribute: <item> </item> <name>atrybut 1</name> <value>111</value> Za pomocą elementu name ustala się nazwę atrybutu, a w elemencie value podaje się jego wartośd. Atrybuty mogą byd później odczytane za pomocą metody getattribute. 11
Przykładowy plik active.xml zawiera definicję obszaru aktywnego, animowanego, który pojawia się w pierwszej sekundzie odtwarzania materiału i znika po 30 sekundach. Obszar aktywny może animowad się przy pokazywaniu/znikaniu oraz zwijaniu/rozwijaniu jeśli klasa obszaru aktywnego implementuje odpowiednie interfejsy i definiuje odpowiadające im metody. Interfejs IActiveArea jest to podstawowy interfejs, który musi implementowad obszar aktywny. Klasa obszaru aktywnego musi mied zdefiniowane pary setter/getter id, link, title, type, text oraz metody setattribute, getattribute służące do ustawiania odpowiednich wartości obszaru aktywnego zdefiniowanego w pliku xml, a także do odczytu tych wartości. Ponadto musi mied zdefiniowane metody: reset służącą do ustawienia obszaru aktywnego w stan początkowy oraz setenabled służącą do włączania/wyłączania interakcji z obszarem przy pomocą myszki. 1. Interfejs IRollable jeśli obszar aktywny ma się zwijad/rozwijad musi implementowad ten interfejs i mied zdefiniowane wszystkie jego metody: rollup uruchamia animację zwijania obszaru rollout uruchamia animację rozwijania onrollupcomplete metoda wywoływana przez obszar w chwili zakooczenia animacji zwijania. W ciele metody powinno byd generowane zdarzenie ActiveAreaEvent.ROLLUP_COMPLETE onrolloutcomplete metoda wywoływana przez obszar w chwili zakooczenia animacji rozwijania. W ciele metody powinno byd generowane zdarzenie ActiveAreaEvent.ROLLOUT_COMPLETE 2. Interfejs IAnimable musi byd implementowany gdy pojawianiu się /znikaniu obszaru aktywnego ma towarzyszyd animacja. Obszar aktywny musi mied wtedy zdefiniowane następujące metody: runstartanimation uruchamia animację pojawiania się obszaru runendanimation uruchamia animację chowania się obszaru onstartanimationcomplete metoda wywoływana przez obszar w chwili zakooczenia animacji pokazywania się. W ciele metody powinno byd generowane zdarzenie ActiveAreaEvent.START_ANIMATION_COMPLETE onendanimationcomplete metoda wywoływana przez obszar w chwili zakooczenia animacji chowania się. W ciele metody powinno byd generowane zdarzenie ActiveAreaEvent.END_ANIMATION_COMPLETE Przykład - warstwa html otwierana z obszaru aktywnego Przykładowy obszar aktywny zawiera pole tekstowe, do którego przekazywany jest tekst z pliku xml oraz przycisk w kształcie strzałki, który otwiera warstwę html nad playerem. 12
W pliku active.xml zdefiniowane zostały współrzędne x, y na których znajdzie się obszar oraz czas, w którym się pojawia i jest chowany. Klasa ActiveArea, znajdująca się w katalogu /sources/assets/activeareas/, jest określona jako klasa dokumentu dla pliku active_area.fla. Znajdują się w niej wszystkie skrypty określające funkcjonalnośd obszaru. 13
W przykładowym pliku active_area.fla znajdują się elementy graficzne i animacje obszaru aktywnego. Na pierwszej warstwie znajduje się parę skryptów służących głównie do zatrzymywania animacji. W klatce nr 10 znajduje się wywołanie metody onstartanimationcomplete klasy ActiveArea na zakooczenie animacji pojawiania się tła obszaru (animacja warstwa bg). W Klatce ostatniej znajduje się wywołanie metody onendanimationcomplete na zakooczenie animacji zanikania obszaru aktywnego. Na warstwie maskmc znajduje się klip maskujący cały kontent obszaru, zawarta w nim animacja służy do uzyskania efektu zwijania/rozwijania obszaru. Na warstwie bg znajduje się animacja tła obszaru służąca do uzyskania efektu pojawiania się/znikania obszaru. W klatce nr 10 znajdują się: przycisk strzałki oraz pole tekstowe. Oba elementy są oskryptowane w funkcji handleradded klasy ActiveArea obszaru aktywnego. Klasa ActiveArea implementuje interfejs podstawowy IActiveArea oraz dwa dodatkowe interfejsy IAnimable, IRollable dzięki, którym obszar posiada animacje pojawiania się/znikania oraz zwijania/rozwijania. W konstruktorze klasy ActiveArea znajduje się funkcja trace, która powinna wyrzucid komunikat o treści kasa obszaru aktywnego w panelu Output Flasha jeśli klasa jest odpowiednio wpisana w panelu Properties uwzględniając nazwy pakietów i ścieżki do katalogów. W konstruktorze jest także wywoływana metoda construct, która ma za zadanie zainicjalizowanie obiektu _attributes przechowującego dodatkowe atrybuty przekazywane z pliku z xml. Przypisana jest też funkcja handleradded nasłuchuja obiekty dodawane do klipu oraz oskryptowana jest maska maskmc. 14
Za pomocą metody addframescript do odpowiednich klatek maski dodawany jest skrypt powodujący wywołanie metod onrollupcomplete, onrolloutcomplete. Metody te wywoływane są przy koocu animacji. Zastosowanie maski pozwala na uzyskanie funkcji zwijania i rozwijania obszaru aktywnego. Efekt ten można też uzyskad w inny sposób, najważniejsze żeby zdefiniowane zostały przy tym odpowiednie metody rollup, rollout oraz onrollupcomplete, onrolloutcomplete. Player wywołując metodę rollup obszaru aktywnego powoduje jego zwinięcie. W metodzie tej wywoływana jest animacja zwijania maski oraz blokowana jest interakcja obszaru za pomocą metody setenabled(false). Metoda rollout służy do wywołania animacji rozwijania obszaru. Metody onrollupcomplete i onrolloutcomplete wywoływane są na zakooczenie animacji. Ich podstawowym zadaniem jest wygenerowanie odpowiednich zdarzeo informujących player o zakooczeniu animacji. Przywracają również aktywnośd obszaru, wyłączoną na czas animacji, za pomocą metody setenabled(true). 15
Funkcjonalnośd pokazywania się/chowania obszaru zrealizowana jest za pomocą animacji warstwy bg i obiektu na niej będącego tłem obszaru. Od klatki początkowej zwiększana jest przeźroczystośd tła, od klatki 11 przeźroczystośd jest zmniejszana. W klatce 10, gdy tło jest całkowicie widoczne dodawane są do obszaru dodatkowe obiekty: pole tekstowe i przycisk włączający warstwę nad playerem. W celu uzyskania funkcjonalności pokazywania się/chowania trzeba zdefiniowad następujące metody: runstartanimation, runendanimation oraz onstartanimationcomplete, onendanimationcomplete. Zadaniem metod runstartanimation, runendanimation jest uruchomienie animacji pokazywania się i chowania obszaru oraz zablokowanie jego aktywności. Natomiast zadaniem metod onstartanimationcomplete, onendanimationcomplete jest włączenie aktywności obszaru i generacja odpowiednich zdarzeo. 16
Zadaniem funkcji handleradded jest oskryptowanie pewnych obiektów, które nie są dostępne od razu na scenie. Do pola tekstowego o nazwie txt przypisywany jest tekst uprzednio przypisany przez player za pomocą metody set text. Natomiast do przycisku o nazwie button przypisywany jest skrypt wywołujący funkcję JavaScript openlayer otwierającą warstwę html nad playerem. Własny obszar aktywny można stworzyd całkowicie od początku lub modyfikując pliki przykładowe. W obydwu przypadkach najlepiej jest użyd własnej nazwy klasy obszaru aktywnego. 17
JavaScript Istnieje możliwośd sterowania pracą odtwarzacza za pomocą JavaScript. Poniżej znajduje się pełna lista dostępnych komend: _play() _play(n) _play(url) _isplaying() _pause() _ispaused() _toggle() _seek(n) _stop() _mute() _unmute() _ismuted() _setvolume(0-100) _getvolume() _isfullscreen() _togglefullscreen() _gettime() _getstate() Start odtwarzania Zaczyna odtwarzad n-tą pozycję na play liście Zaczyna odtwarzad film o podanym adresie url Zwraca true jeśli player odtwarza Wstrzymuje odtwarzanie Zwraca true jeśli dotwarzanie jest wstrzymane Przełącza między pause i play Przewija video do n sekundy. Aby przewinąd na początek należy wpisad 1. Zatrzymuje odtwarzanie, zamyka strumieo video, po wciśnięciu play video startuje i jest buforowane od początku Wyłącza dźwięk bez zmiany wartości głośności Włącza poprzednio wyłączony dźwięk Zwraca true jeśli głośnośd jest wyłączona lub false w przeciwnym razie Ustawia głośnośd Pobiera głośnośd (0-100) Zwraca true jeśli player jest w trybie pełnoekranowym Nie działa ze względu na ograniczenie flash playera Zwraca aktualny czas odwarzania materiału 0 player nie jest załadowany 1 player jest załadowany 2 player ładuje lub buforuje 3 player odtwarza 4 pausa 5 koniec odtwarzania aktualnej pozycji z play listy 6 player jest zastopowany 18
_getstatus() _isloaded() _iscinemamode() _id() Zwraca następujący obiekt: { state: 0-6 time: czas w s muted: true false volume: 0-100 } Zwraca true jeśli player lub/i skin są załadowane Zwraca true jeśli w playerze jest włączony przycisk cinema Zwraca wartośd id obiektu flashowego Obiekt nasłuchujący zdefiniowany we flashvarze listener powinien implementowad dwie metody onuseraction i onplayerevent. onuseraction( action, parametr ) gdzie action może byd równe: play, pause, repeat, changevolume, seek, playlistitemclick, toggleplaying, fullscreen, mute onplayerevent(action,parametry..) gdzie action może byd równe: play, pause, end, stop Zdarzenie postępu odtwarzania wywoływane co 5 sekund: onplayerprogressevent( url, title, total_time, current_time ) Aby wywoład daną funkcję można zastosowad taką składnię umieszczoną za kodem wywołującym odtwarzacz: <script type="text/javascript"> document.getelementbyid('videoplayerdivid')._play(); </script> Gdzie videoplayerdivid oznacza identyfikator odtwarzacza, a _play jest nazwą wywoływanej funkcji. 19
Umieszczane Reklam Video CMS posiada wbudowany moduł do zarządzania reklamami. Poniższa instrukcja dotyczy manualnej integracji z zewnętrznym serwerem reklamowym. Istnieje możliwośd umieszczania reklam w odtwarzaczu. Dostępnych jest kilka ich wariantów: preroll (reklama przed materiałem), overlay (półprzeźroczysta warstwa w trakcie odtwarzania materiału), postroll (reklama po materiale) oraz możliwośd brandowania playera, czyli zintegrowania z nim swojej marki. Aby dodad reklamę, należy przygotowad plik konfiguracyjny zapisany w notacji JSON. Następnie podajemy odnośnik do tego pliku we flashvarze addef. Przykładowo do kodu embed w parametrze flashvars musimy dopisad: <param name="flashvars" value="xmlconfig=http://divante.videocms.pl/wpcontent/plugins/videocms/config_xml.php?params=1&addef=http://reklama.di vante.pl/kodreklamy.js"/> A w przypadku użycia biblioteki swfobject: flashvars.addef = "http://reklama.divante.pl/kodreklamy.js"; Domena w której znajdowad się będzie plik kodreklamy.js musi mied odpowiednio skonfigurowany plik crossdomain.xml, więcej informacji na ten temat na koocu rozdziału. Poniżej przedstawiamy przykłady konstrukcji plików JSON wraz z parametrami jakie można zdefiniowad dla poszczególnych rodzajów reklam. Preroll Reklama wyświetlana przed materiałem wideo Dostępne parametry: Nazwa zmiennej file duration extrafile Opis url do pliku reklamy (flv, swf, jpg, png, gif) czas trwania reklamy url do dodatkowego pliku reklamy mp3, odtwarzanego w trakcie pokazywania planszy preroll (opcja) size_width szerokośd reklamy (px lub %) size_height alien navigateurl wysokosc reklamy kod JavaScript który ma zostad wykonany w momencie pokazania reklamy url do ktorego linkuje reklama 20
Przykład pliku konfiguracyjnego: {"preroll":{ "file":"http://reklama.divante.pl/reklama.flv", "size_width":"100%", "size_height":"100%", "alien":"function()", "navigateurl":"http://divante.pl }} Overlayer W zależności od pliku źródłowego i ustawionych parametrów, reklama wyświetlana w trakcie trwania materiału może przesłonid tylko częśd obrazu, albo zatrzymad i całkiem przesłonid. Nazwa zmiennej file duration extra file Opis url do pliku reklamy (swf, jpg, png, gif) czas trwania reklamy url do dodatkowego pliku reklamy mp3, odtwarzanego w trakcie pokazywania planszy preroll (opcja) size_width szerokośd reklamy (px lub %) size_height alien navigateurl count_time startdelay position_x position_y korner wysokosc reklamy kod JavaScript który ma zostad wykonany w momencie pokazania reklamy url do ktorego linkuje reklama po jakim czasie następuje zliczenie na pauzie po jakim czasie ma sie pokazac kreacja liczba pikseli w takiej odleglosci od rogu pozycjonujemy w poziomie liczba pikseli pozycjonowanie w pionie od podanego rogu róg od ktorego pozycjonujemy reklamę. Dostępne wartości: lt lewa góra, rt prawa góra, lb lewy dół, rb prawy dół closebackgroundcolor pause kolor w zapisie hex tła guziczka do zamykania reklamy, jesli puste nie pokazujemy guziczka czy w momencie wyswietlenia reklamy ma zostac zapauzowany materiał, 21
opcja używana do midroll ów Przykład użycia dla overlay a: {"overlayer":{ "file":"http://reklama.divante.pl/reklama_przezroczysta.png", "size_width":"100%", "size_height":"100%", "alien":"function()", "navigateurl":"http://divante.pl", "duration":20, "startdelay":30, "corner":"lb" }} Postroll Forma reklamy wyświetlana po skooczeniu materiału. Nazwa zmiennej file duration extra file Opis url do pliku reklamy (flv, swf, jpg, png, gif) czas trwania reklamy url do dodatkowego pliku reklamy mp3, odtwarzanego w trakcie pokazywania planszy preroll (opcja) size_width szerokośd reklamy (px lub %) size_height alien navigateurl count_time onpause url1_navigateurl wysokośd reklamy kod JavaScript który ma zostad wykonany w momencie pokazania reklamy url do którego linkuje reklama po jakim czasie następuje zliczenie na pauzie czy ma pokazywad się pokazywad w momencie wciśnięcia pauzy dowolny link do miejsca w które nawiguje reklama 22