Ten artykuł został napisany i przesłany przez zewnętrznego dewelopera. Zespół YouTube API dziękuje Benowi Longorii za czas i doświadczenie.
Ben Longoria, Uniwersytet Wisconsin - Madison, technologia akademicka
Luty 2009 r.
- Wprowadzenie
- Poukładany ląd
- Korzystanie z Moviesas
- Korzystanie z aplikacji MovieSprite.as
- Jak mogę mówić, co mogę otrzymać?
- Podsumowanie
Wprowadzenie
Ilustracja 1. Wersja demonstracyjna odtwarzacza Chromeless w TubeLoc
Niesamowite. Jak mówi, w ciągu niecałego miesiąca interfejs YouTube Player API minie rok. Ile to lat temu jest internet? Opracowaliśmy wiele ciekawych projektów związanych z tym interfejsem API. Wystarczy, że będziesz obserwować bloga YouTube Developer API, aby sprawdzić, czy ktoś z jego miłośników robił świetne rzeczy.
Obecny zestaw aplikacji odtwarzacza YouTube API jest napisany w języku Script 2 i Choć język ten jest nadal wspaniałym językiem, wiele osób korzysta obecnie z języka ActionScript 3 lub Flex. Problem polega na tym, że aby komunikować się z aplikacjami w takim języku, trzeba będzie wykonać kilka czynności. „Chyba jednak...Słyszałem już, czy to już jest gotowe?” – pytasz.
Wiele osób już się zastanawiało, jak to zrobić, i rzetelnie dzieli się wiedzą na forach dla programistów YouTube API. Aby ułatwić deweloperom korzystanie z tego rozwiązania, przeprowadzono również projekty opakowania Chromeless w języku AS3 i odtwarzacza osadzonego Flex.
Potrzebowałem(-am) prostego i prostego sposobu na ponowne wykorzystanie funkcji odtwarzacza Player wyłącznie w języku ONIX 3 lub MXML. Zajęcia w elastycznym stylu dla projektów alergicznych oraz łatwy w użyciu komponent Flex. TubeLoc spełnia oba te wymagania
TubeLoc (mashup w YouTube i LocalConnection) to biblioteka języka JavaScript 3 służąca jako adapter do YouTube API 2 Player API. Funkcje wideo w YouTube możesz łatwo dodawać do aplikacji działających w wersji Chrome 3 lub Flex, korzystając z przeglądarki YouTube w pełnej wersji Chrome lub bez Chrome. TubeLoc używa klasy LocalConnection do komunikacji z mediatorem w pliku DDEX 2. Komunikacja Bigtable 2 z komunikacją z oficjalnym odtwarzaczem YouTube API Jak to wykorzystać?
Laye of the Land
Najpierw musisz pobrać bieżącą wersję biblioteki z projektu Google Code. Po rozpakowaniu archiwum wersji znajdziesz w nim katalog as3. Pod tym katalogiem src znajdują się przykładowe klasy. Możesz je wykorzystać jako punkt wyjścia. W katalogu com/enefekt/tubeloc w katalogu src są dwa pliki. W projektach Flex możesz używać Movie.as, a w projektach w języku Action 3 – MovieSprite.as. W aplikacji com/enefekt/tubeloc/event dostępne są różne klasy zdarzeń dla różnych powiadomień, które można wysyłać z odtwarzacza.
Zanim wypróbujesz przykłady w tym samouczku, upewnij się, że katalog src w katalogu as3 znajduje się w ścieżce Twoich zajęć. Ten proces różni się w zależności od tego, z czego korzystasz, dlatego zapoznaj się z dokumentacją środowiska programistycznego.
Po skompilowaniu wersji demonstracyjnej lub aplikacji potrzebny będzie plik Bigtable 2 do komunikacji z interfejsem YouTube Player API. Ten plik SWF znajduje się w archiwum wersji: as3/lib/as2_tubeloc.swf. Upewnij się tylko, że znajduje się on obok pliku HTML, w którym jest umieszczona aplikacja SWF. Na przykład:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Uwaga: ścieżkę do tego pliku SWF możesz zmienić, używając właściwości playerWrapperUrl z biblioteką.
Korzystanie z Movie.as
Zobaczmy, jak korzystać z TubeLoc w wersji Flex. Najpierw przyjrzymy się pełnemu odtwarzaczowi chrome (ze wszystkimi elementami sterującymi), a następnie odtwarzaczowi BYOC Chrome. Oto jak korzystać z odtwarzacza Full Chrome w MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Wiem, bo wiem, bolesne, prawda? Wcale nie rozumiem. Dajmy czadu wszystko.
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Dodajemy kolejny atrybut – to już wszystko. Tak będzie wyglądać cały plik MXML:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
Uwaga: w elemencie mx:Application dodajemy przestrzeń nazw tubeloc z pakietem komponentu Film. Gdy to zrobisz, możemy użyć komponentu pokazanego poniżej. Później przyjrzymy się temu, co można ustawić i wywoływać w tym komponencie.
Korzystanie z witryny MovieSprite.as
Zobaczmy teraz, jak korzystać z TubeLoc w wersji w języku ActionS. Ta wersja nie wymaga żadnych klas z platformy Flex i używa tylko klas natywnych Flash Playera. Najpierw sprawdzimy odtwarzacz w pełni Chrome, a potem odtwarzacz bez Chrome. Pełny przykład:
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
Najpierw importujemy niezbędne klasy TubeLoc. Następnie w konstruktorze tworzymy instancję klasy MovieSprite i przekazujemy identyfikator filmu do konstruktora MovieSprite. Następnie dodamy detektor zdarzeń PlayerReadyEvent. W module obsługi zdarzeń onPlayerReady ustawiamy rozmiar filmu. Uwaga: ponieważ używamy odtwarzacza w pełnej wersji Chrome, używamy klasy statycznej CHROME_HEIGHT w klasie MovieSprite. Pomaga nam to dopasować rozmiar filmu, biorąc pod uwagę wysokość Chrome.
Co z odtwarzaczem uproszczonym?
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
Czym się to różni? W konstruktorze przekazujemy null dla identyfikatora filmu, a drugi parametr true informuje klasę MovieSprite, że mamy chromeless. Zauważysz też różnicę w module obsługi zdarzeń onPlayerReady. Tutaj wczytujemy film według identyfikatora loadVideoById.
Jak mogę się nazywać, co mogę otrzymać?
Czego można się od nas dowiedzieć i jakie wydarzenia muszę podjąć? W pobranym archiwum znajdziesz pełną dokumentację kodu, aby wyświetlić szczegóły. W skrócie: w przypadku Movie.as i MoviesSprite.as możesz użyć tych metod:
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
Oprócz tych metod w komponencie Movies.as masz dostęp do tych właściwości:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Oto wydarzenia, które możesz zasubskrybować. Więcej informacji znajdziesz w dokumentacji.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Podsumowanie
Mam nadzieję, że ten artykuł pomógł Ci w zintegrowaniu funkcji YouTube i treści w aplikacjach Flash. Podczas programowania w TubeLoc musisz pamiętać o kilku ograniczeniach. Na scenie nie można mieć dwóch odtwarzaczy YouTube jednocześnie.
Mamy nadzieję, że wkrótce uda się rozwiązać ten problem. Jeśli znajdziesz błędy lub jakieś funkcje nie działają, przejdź do projektu Google Code i zgłoś go w narzędziu do śledzenia błędów. Dziękujemy za uwagę!
Biogram autora
Ben Longoria jest deweloperem aplikacji akademickich na Uniwersytecie Wisconsin-Madison Pracuje nad Flashem od wersji 5 i Flex od wersji Flex 2. Przez ostatnie 2 lata pracował też nad aplikacjami opartymi na technologii Mozilla. Pracował nad wieloma projektami edukacyjnymi i nauczycielskimi. Dotyczył między innymi aplikacji na wiele platform kierowanych na przeglądarkę i komputer. Aktywnie uczestniczy w projektowaniu interfejsu i interakcji oraz z trudnościami w tworzeniu oprogramowania. Jego bloga znajdziesz na stronie http://enefekt.com/sansbrowser/. Możesz tam też przeczytać, co dodał w InsideRIA.
Ten utwór jest objęty licencją Creative Commons Attribution 3.0.