Ten artykuł został napisany i przesłany przez zewnętrznego dewelopera. Zespół YouTube API dziękuje Benowi Longoria za poświęcony czas i wkład.
Ben Longoria, University of Wisconsin – Madison, Academic Technology
Luty 2009
- Wprowadzenie
- The Lay of the Land
- Korzystanie z Movie.as
- Używanie MovieSprite.as
- Jakie są możliwości kontaktu i co mogę uzyskać?
- Podsumowanie
Wprowadzenie
Rysunek 1. Demonstracja odtwarzacza TubeLoc bez Chrome
Niesamowite. W momencie pisania tego tekstu interfejs API odtwarzacza YouTube obchodzi roczek. Ile to w internetowych latach? Na podstawie tego interfejsu API powstało już wiele świetnych projektów. Wystarczy, że zaczniesz śledzić blog interfejsu YouTube API dla deweloperów, aby przekonać się, że jest wielu ludzi, którzy osiągnęli dzięki niemu świetne wyniki.
Obecny zestaw aplikacji odtwarzacza interfejsu YouTube API jest napisany w języku ActionScript 2. Choć nadal jest to świetny język, wiele osób używa teraz ActionScript 3 lub Flex. Problem polega na tym, że musisz wykonać kilka czynności, aby aplikacje ActionScript 2 mogły komunikować się z aplikacjami ActionScript 3. „Ale chwila… Chyba już to słyszałem. Czy nie ma już czegoś takiego?” – możesz zapytać.
Wiele osób już wie, jak to zrobić, i udostępniło swoje porady na forach dla programistów interfejsów YouTube API. Aby ułatwić programistom korzystanie z tych funkcji, stworzyliśmy też projekty AS3 Chromeless Wrapper i Flex Embedded Player.
Chcieliśmy znaleźć łatwy sposób na ponowne użycie funkcji interfejsu Player API tylko w ActionScript 3 lub MXML. Klasa bez Flexa dla projektów, które nie potrzebują Flexa, oraz łatwy w użyciu komponent Flexa dla projektów, które go potrzebują. TubeLoc spełnia oba wymagania
TubeLoc (hybryda YouTube i LocalConnection) to biblioteka ActionScript 3, która służy jako adapter dla interfejsu YouTube ActionScript 2 Player API. Możesz łatwo dodać do aplikacji ActionScript 3 lub Flex funkcję odtwarzania filmów z YouTube, korzystając z odtwarzaczy YouTube z pełnym lub bez ramki. TubeLoc używa klasy LocalConnection do komunikacji z pośrednikiem SWF ActionScript 2. Plik SWF ActionScript 2 komunikuje się z oficjalnym odtwarzaczem interfejsu API YouTube. Jak z niego korzystać?
Rozkład sił
Najpierw pobierz najnowszą wersję biblioteki z projektu Google Code. Po rozpakowaniu archiwum ZIP znajdziesz w nim katalog as3. W jego obrębie znajduje się katalog src, który zawiera przykładowe klasy. Możesz ich użyć jako punktu wyjścia. W katalogu com/enefekt/tubeloc znajdują się 2 pliki.src Movie.as możesz używać w projektach Flex, a MovieSprite.as – w projektach ActionScript 3. W com/enefekt/tubeloc/event występują różne klasy zdarzeń odpowiadające różnym powiadomieniom, które mogą być wysyłane z odtwarzacza.
Zanim spróbujesz użyć przykładów w tym samouczku, upewnij się, że katalog src w katalogu as3 znajduje się na ścieżce klasy. Proces ten różni się w zależności od tego, czego używasz do programowania, więc zapoznaj się z dokumentacją środowiska programistycznego.
Po skompilowaniu wersji demonstracyjnej lub aplikacji potrzebujesz pliku SWF ActionScript 2, który komunikuje się z interfejsem YouTube Player API. Ten plik SWF znajdziesz w archiwum wersji: as3/lib/as2_tubeloc.swf. Upewnij się tylko, że znajduje się on obok pliku HTML, który zawiera aplikację 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 w bibliotece.
Korzystanie z Movie.as
Zobaczmy, jak korzystać z wersji Flex aplikacji TubeLoc. Najpierw przyjrzymy się odtwarzaczowi z pełnym interfejsem (ze wszystkimi przyciskami), a następnie odtwarzaczowi bez interfejsu BYOC. Oto jak korzystać z pełnego odtwarzacza w MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Wiem, wiem, boli, prawda? Wcale nie! Zróbmy coś szalonego i zastosujmy metodę bez ramki:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Dodajemy jeszcze jeden atrybut, który może być kłopotliwy. Oto jak 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 dla elementu Movie. Po wykonaniu tych czynności możemy używać komponentu w sposób pokazany na filmie. Później przyjrzymy się temu, co można ustawić i wywołać w tym komponencie.
Używanie pliku MovieSprite.as
Teraz przyjrzyjmy się, jak używać wersji TubeLoc na ActionScript 3. Ta wersja nie wymaga żadnych klas z ramy Flex i korzysta tylko z klas natywnych Flash Playera. Najpierw omówimy odtwarzacz z pełnym paskiem, a potem odtwarzacz bez paska. 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 dodajemy detektor zdarzeń dla zdarzenia PlayerReadyEvent. W obiekcie onPlayerReady ustawiamy rozmiar filmu. Uwaga: ponieważ używamy odtwarzacza z pełnym paskiem, korzystamy z właściwości statycznej CHROME_HEIGHT w klasie MovieSprite. Pomoże nam to dostosować rozmiar filmu do wysokości ramki.
A co z odtwarzaczem bez ramki?
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");
}
}
}
Co się zmieniło? W konstruktorze przekazujemy parametr null jako identyfikator filmu, a drugi parametr true informuje klasę MovieSprite, że nie będzie ona zawierać ramki. Różnicę zauważysz też w obiekcie onPlayerReady. Tutaj wczytujemy film według identyfikatora za pomocą metody loadVideoById.
Jakie są możliwości kontaktu i co mogę uzyskać?
Co można wywołać i z jakimi zdarzeniami trzeba pracować? W pobranym archiwum wersji znajduje się pełna dokumentacja kodu, która zawiera szczegółowe informacje. Oto krótkie omówienie metod Movie.as i MovieSprite.as:
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 Movie.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 zdarzenia, które możesz subskrybować. Więcej informacji znajdziesz w dokumentacji.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Podsumowanie
Mam nadzieję, że ten artykuł pomógł Ci zintegrować funkcje i treści YouTube w Twoich aplikacjach Flash. Podczas tworzenia aplikacji za pomocą TubeLoc należy pamiętać o jednym ograniczeniu: nie można mieć na scenie dwóch odtwarzaczy YouTube jednocześnie.
Mamy nadzieję, że w krótce uda się to naprawić. Jeśli znajdziesz błędy lub brakujące funkcje, odwiedź projekt Google Code i zgłoś je w systemie śledzenia błędów. Dziękujemy za uwagę!
Biogram autora
Ben Longoria jest deweloperem aplikacji akademickich na Uniwersytecie Wisconsin-Madison. Programista, który używał Flasha od wersji 5, a Flexa od wersji 2. Przez ostatnie 2 lata pracował też nad aplikacjami opartymi na Mozilla. Ben pracował nad wieloma projektami edukacyjnymi i akademickimi, w tym nad aplikacjami wieloplatformowymi przeznaczonymi zarówno na przeglądarkę, jak i na komputery. Bierze aktywny udział w projektowaniu interfejsów i interakcji oraz lubi tworzyć użyteczne oprogramowanie. Jego bloga znajdziesz pod adresem http://enefekt.com/sansbrowser/. Możesz też przeczytać jego artykuły w witrynie InsideRIA.
Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa 3.0 – Stany Zjednoczone.