Ten artykuł został napisany i przesłany przez zewnętrznego dewelopera. Zespół YouTube ds. interfejsów API i narzędzi podziękował Matthewowi Richmondowi za czas i wiedzę.
Matthew Richmond, The Choping Block, Inc.
Październik 2008 r.
- Wprowadzenie
- Ważne materiały
- Podsumowanie
- Interakcja z odtwarzaczem
- Dostępne operacje
- Informacje o wersji demonstracyjnej
- Podsumowanie
Wprowadzenie
W tym artykule przedstawiamy i skrócimy niezawodny omówienie kodu ActionAction 3.0 w odtwarzaczu YouTube Chromeless. Kod korzysta z klasy ExternalInterface języka JavaScript i interfejsu API JavaScript w YouTube.
Narzędzia YouTube i odtwarzacz Chromeless umożliwiają projektantom/programistom szybkie i łatwe integrowanie możliwości YouTube ze swoimi projektami online. Ta metoda najlepiej sprawdza się w przypadku małych projektów o stałych budżetach, które nie pozwalają na hostowanie filmów, oraz dużych projektów dla klientów, którzy chcą zapewnić swoim użytkownikom niestandardowe wrażenia i nie oddzielić ich od odbiorców z YouTube.
Ilustracja 1. Zrzut ekranu obudowy Dialogflow 3.0
Interfejs API Flash YouTube oraz umieszczone na stronie odtwarzacze są napisane i dobrze współpracują z kodem JavaScript 2.0. Jeśli jednak Twój projekt to kod w języku Action 3.0, płynna integracja staje się nieco bardziej złożona. Chociaż ładowanie odtwarzaczy w języku ActionScript w języku ustawionym w języku KML 3.0 jest proste, nie można bezpośrednio do niego przekazywać ani przekazywać żadnych funkcjonalnych wywołań. Jest to dodatkowo skomplikowane, ponieważ plik swf pochodzący z serwerów firmy YouTube jest wczytywany do niego film. Kod musi być w pełni świadomy tych faktów i odpowiednio zareagować. Na szczęście język TalkBack zawiera 2 możliwe sposoby obejścia tego problemu: ponownie łączy zagnieżdżone i niepołączone elementy, klasę LocalConnection lub ExternalInterface. W tym eksponacie skupimy się na tym drugim, ponieważ interfejs ExternalInterface współpracuje z dobrze udokumentowanym interfejsem API JavaScript i dlatego bezproblemowo współpracuje ze wszystkimi innymi elementami strony {8/}.
Ważne zasoby
Zanim zaczniemy, zapoznaj się z listą powiązanych zasobów i plików, z których możesz korzystać. Wiele tematów omawianych w tym artykule zawiera bardziej szczegółowe informacje, do których linki znajdują się poniżej.
- Wyświetlić kod JavaScript 3.0 i pobrać pliki źródłowe.
- Oficjalna strona o interfejsie API JavaScript w YouTube
- Dokumentacja klasy Adobe ExternalInterface
- Umieszczanie obiektu Flash w języku JavaScript na potrzeby obiektu ObjectObject
Odkrywanie
Omówienie wersji demonstracyjnej paczki
Ilustracja 3. Plik JavaScript
Ilustracja 2. Pliki zajęć w standardzie ONIX
Kod VPAID 3.0 składa się zasadniczo z dwóch połączonych części: plików klas JavaScript 3.0 znajdujących się w src/chopingblock/video/ (ilustracja 2) oraz pliku JavaScript „youTubeLoader.js” znajdującego się we wdrażaniu/_assets/js/ (ilustracja 3). Plik źródłowy w formacie Flash/Flex utworzy instancję klasy YouTubeLoader Script; strona Flash zostanie umieszczona w pliku Flash, a następnie zarejestrowana za pomocą funkcji dostępnych w pliku JavaScript youTubeLoader. Pamiętaj, że wszystko, co YouTubeLoader robi w pliku Flash, można kontrolować za pomocą funkcji JavaScriptu.
Ponieważ wszystkimi funkcjami Flash można zarządzać za pomocą interfejsu JavaScript API, NIE można załadować żadnych treści z YouTube za pomocą odtwarzacza „Film testowy”. Działa tylko wtedy, gdy jest umieszczona na stronie {8/} i prawidłowo połączona z funkcjami JavaScript w YouTube.
Uwaga: aby przetestować dowolne z tych wywołań, musisz korzystać z pliku uruchomionego na serwerze WWW lub zmienić Ustawienia zabezpieczeń programu Flash Player, ponieważ ogranicza on połączenia między plikami lokalnymi a internetem.
Tworzenie obiektu YouTubeLoader
Przed utworzeniem wystąpienia obiektu YouTubeLoader w projekcie Flash/Flex musisz najpierw upewnić się, że pakiet (folder) wymaganych plików znajduje się w tym samym katalogu co projekt (zobacz rysunek 2) lub jest zdefiniowany za pomocą klasy Classpath. Następnie możesz zaimportować pliki pakietów:
import choppingblock.video.*;
Umożliwi to dostęp do pliku w języku ONIX do klas „YouTubeLoader.as” i „YouTubeLoaderEvent.as”. Teraz możesz łatwo utworzyć instancję klasy YouTubeLoader i niezbędne odbiorniki zdarzeń:
import choppingblock.video.*;
public class YouTubeDemo extends Sprite {
private var _youTubeLoader:YouTubeLoader;
// ------------------------------------
// CONSTRUCTOR
// ------------------------------------
public function YouTubeDemo () {
// create YouTubeLoader object
_youTubeLoader = new YouTubeLoader();
// add event listener to call youTubePlayerLoadedHandler method on load
_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
// create the actual loader
_youTubeLoader.create();
// add object to the display stack
addChild(_youTubeLoader);
};
// ------------------------------------
// EVENT METHODS
// ------------------------------------
/**
Called via player loaded event, lets you know you are all clear to send player commands.
*/
private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeDemo: youTubePlayerLoadedHandler");
// you are now clear to start making calls to the YouTubeLoader object
};
};
Jeśli plik JavaScript jest skonfigurowany i połączony prawidłowo, należy wywołać metodę youTubePlayerLoadedHandler i gotowe do wysłania żądań.
Umieszczanie pliku swf i połączenie kodu JavaScript z YouTube
Nie będzie można załadować treści z YouTube, dopóki plik swf nie zostanie umieszczony w pliku XHTML i połączony z kodem JavaScript YouTube. Zalecamy umieszczanie plików Player przy użyciu JavaScript API za pomocą osadzonego odtwarzacza. Umożliwi to wykrycie wersji Flash Playera użytkownika (interfejs API JavaScript wymaga wtyczki Flash Player 8 lub nowszej), a także wyeliminowanie pola „Kliknij, aby aktywować ten element sterujący” w przeglądarce Internet Explorer do wyświetlania odtwarzacza.
W części <head> pliku XHTML łączysz pliki swfobject i youTubeLoader:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
Poniżej znajduje się przykład użycia obiektu {/6}Object do umieszczenia pliku swf z biblioteki KML 3.0 z włączonym JavaScript API, a następnie przekazania odwołania do pliku swf do interfejsu API YouTubeLoader JavaScript.
<script type="text/javascript">
var flashvars = {};
var params = {
menu: "false",
allowScriptAccess: "always",
scale: "noscale"
};
var attributes = {
id: "youtubewrapper"
};
swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
//init the youTubeLoader JavaScript methods
SWFID = "youtubewrapper"
</script>
Parametr allowScriptAccess w kodzie jest potrzebny, aby plik SWF mógł wywoływać funkcje na stronie HTML, na której się on znajduje, ponieważ odtwarzacz Chromeless jest hostowany w innej domenie niż strona XHTML.
Jedyny przekazywany atrybut to identyfikator obiektu umieszczonego na stronie – w tym przypadku jest to youtubewrapper. Ten identyfikator będzie używany przez plik youTubeLoader.js do pobrania odwołania do odtwarzacza za pomocą metody getElementById().
swfobject.embedSWF wczyta odtwarzacz z YouTube i umieści go na Twojej stronie.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr– adres URL pliku SWF. Aby umożliwić wywołanie JavaScript API, dodaliśmy parametryenablejsapiiplayerapiiddo normalnego adresu URL filmu w YouTube.replaceElemIdStr– identyfikator elementu DIV na stronie HTML, który zostanie zastąpiony umieszczoną treścią. W powyższym przykładzie jest toytapiplayer.widthStr– szerokość odtwarzacza.heightStr– wysokość odtwarzacza.swfVersionStr– minimalna wymagana wersja treści użytkownikowi. W tym przypadku potrzebna jest wersja 8 lub nowsza. Jeżeli użytkownik nie ma oprogramowania w wersji 8 lub nowszej, to w tagu DIV zobaczy domyślną linię tekstu.xiSwfUrlStr– (opcjonalny) określa adres URL pliku SWF instalacji ekspresowej. Nieużywany w tym przykładzie.flashVarsObj– (opcjonalny) określa zmienne FlashVar w parach nazwa:wartość. Nieużywany w tym przykładzie.parObj– (opcjonalne) parametry umieszczonego obiektu, W tym przypadku ustawiliśmyallowScriptAccess.AttObj– (opcjonalne) atrybuty umieszczonego obiektu; W tym przypadku ustawiliśmy identyfikator namyytplayer.
Dokładniejsze objaśnienia znajdziesz w dokumentacji SWFObject.
SWFID ≡ zapisze odwołanie do identyfikatora obiektu umieszczonego na potrzeby interfejsu JavaScript API. Musisz użyć tego samego identyfikatora obiektu umieszczonego co w pliku swf.
SWFID ≡ "youtubewrapper"
Teraz będziesz mieć możliwość przetestowania projektu. Obiekt YouTubeLoader powinien wczytać odtwarzacz Chromeless, a moduł obsługi zdarzeń YouTubeLoaderEvent.LOADED powinien zostać wywołany. Możemy teraz wysłać żądanie wideo i wchodzić w interakcję z obiektem YouTubeLoader.
Interakcja z odtwarzaczem
Ta metoda tworzenia opakowania Script 3.0 dla odtwarzacza Chromeless korzysta z klasy ExternalInterface JavaScript, więc teraz możemy kontrolować nasz wczytywany odtwarzacz za pomocą dowolnych działań w interfejsie YouTube JavaScript Player API. W pliku JavaScript „youTubeLoader.js” znajdującym się we wdrażaniu/_assets/js/ (ilustracja 3) okaże się, że zawiera on większość dostępnych funkcji. Każda funkcja operacyjna najpierw sprawdza działanie funkcji checkObj, aby sprawdzić, czy zmienna SWFID została prawidłowo ustawiona przed wykonaniem.
//------------------------------------
// UTILITY METHODS
//------------------------------------
function checkObj () {
// alert("youTubeLoader.js : checkObj");
if (SWFID) {
createObj();
return true;
} else{
alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
return false;
};
}
//------------------------------------
// YOUTUBE METHODS
//------------------------------------
function loadVideoById(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.loadVideoById(id,startSeconds);
};
};
function cueNewVideo(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.cueVideoById(id, startSeconds);
}
}
function clearVideo() {
// alert("youTubeLoader.js : clearVideo");
if (checkObj()) {
obj.clearVideo();
}
}
// plus 17 more...
Biorąc pod uwagę fakt, że celem naszego opakowania kodu JavaScript 3.0 dla odtwarzacza Chromeless jest zapewnienie bezproblemowej interakcji z interfejsem API YouTube z poziomu projektu Flash/Flex w języku Action 3.0, dodaliśmy dokładnie te same metody publiczne do pliku klasy „YouTubeLoader.as” w katalogu src/chopingblock/video/ (ilustracja 2). Oznacza to, że możesz wywoływać te same działania bezpośrednio do obiektu YouTubeLoader we Flashu/Flex. W pliku zajęć znajdziesz:
// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------
public function loadVideoById (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: loadVideoById");
ExternalInterface.call("loadVideoById", id, startSeconds);
};
public function cueNewVideo (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: cueNewVideo");
ExternalInterface.call("cueNewVideo", id, startSeconds);
};
public function clearVideo ():void{
//trace("YouTubeLoader: clearVideo");
ExternalInterface.call("clearVideo");
};
// plus 17 more...
Metody języka Java korzystają z klasy ExternalInterface do wywoływania odpowiedniej funkcji w interfejsie API JavaScript.
Prośba o film
Teraz możesz zażądać filmu z poziomu pliku w języku ONIX 3.0, wywołując funkcje za pomocą odwołania do odtwarzacza. Jeśli na przykład chcesz odtworzyć film po kliknięciu przycisku, musisz dodać do przycisku detektor zdarzeń CookieEvent.CLICK. W ten sposób:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
Utwórz metodę obsługi zdarzeń w celu obsługi tego żądania. W ten sposób:
private function youtubeLoadVideoHandler (event:MouseEvent):void{
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};
Poza plikiem Flash/Flex możesz opcjonalnie wysłać żądanie filmu wideo, wywołując bezpośrednio odpowiednią funkcję JavaScript. W ten sposób:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>
Wykonywanie dodatkowych połączeń
Dodatkowe wywołania działają dokładnie tak samo jak wysyłanie prośby o film. W JavaScript 3 możesz po prostu wywoływać metodę za pomocą odwołania do odtwarzacza. Pełną listę dostępnych metod znajdziesz poniżej.
Subskrypcja zdarzeń
Dodanie odbiornika do odniesień do odtwarzacza pozwala subskrybować zdarzenia. Na przykład aby otrzymywać powiadomienia o zmianie stanu odtwarzacza, dodaj odbiornik zdarzenia YouTubeLoaderEvent.STATE_CHANGE. W ten sposób:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
Utwórz metodę obsługi zdarzeń w celu obsługi tego żądania. W ten sposób:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Dostępne operacje
Aby móc wywoływać metody interfejsu YouTubePlayer API, musisz najpierw utworzyć w klasie pliku wystąpienie klasy YouTubePlayer i przechowywać odwołanie do obiektu, który chcesz kontrolować. Aby to zrobić, zadzwoń pod numer:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Metody publiczne
player.loadVideoById(id:String, startSeconds:Number = 0):void- Wczytuje i odtwarza film na podstawie określonego identyfikatora.
player.cueNewVideo(id:String, startSeconds:Number = 0):void- Wczytuje się, ale nie odtwarza automatycznie filmu na podstawie określonego identyfikatora.
player.clearVideo():void- Usuwa obecnie wskazany lub wczytany film.
player.setSize(w:Number, h:Number):void- Określa rozmiar instancji YouTubePlayer.
player.play():void- Odtwarza aktualnie wskazany/wczytany film.
player.pause():void- Wstrzymaje aktualnie wskazany lub wczytany film.
player.stop():void- Zatrzymuje aktualnie wczytany/wczytany film.
player.seekTo(seconds:Number):void- Przechodzi do określonego czasu w filmie.
player.getPlayerState():String- Zwraca bieżący stan aktualnie wskazanego/wczytanego filmu.
player.getBytesLoaded():Number- Zwraca wartość bieżących bajtów wczytanych aktualnie wczytanych/wczytanych filmów.
player.getBytesTotal():Number- Zwraca wartość wszystkich bajtów wczytanego aktualnie wskazanego lub wczytanego filmu.
player.getCurrentTime():Number- Zwraca bieżącą pozycję w czasie aktualnie wskazanego lub wczytanego filmu.
player.getDuration():Number- Zwraca bieżący czas trwania aktualnie wskazanego/wczytanego filmu.
player.getStartBytes():Number- Zwraca bajty początkowe obecnie wczytanego/wczytanego filmu.
player.setVolume(newVolume:Number):void- Określa głośność aktualnie wczytanego/wczytanego filmu.
player.getVolume():Number- Zwraca bieżący poziom aktualnie wskazanego lub wczytanego filmu.
player.mute():void- Przechowuje bieżący poziom głośności i zmienia głośność aktualnie wczytanego/wczytanego filmu na 0.
player.unmute():void- Po zignorowaniu zwraca głośność obecnie wczytanego filmu lub ostatnio wczytanej wartości.
player.getEmbedCode():String- Zwraca aktualny kod YouTube umieszczony na stronie aktualnie wskazanego lub wczytanego filmu.
player.getVideoUrl():String- Zwraca bieżący adres URL filmu w YouTube aktualnie wskazanego lub wczytanego filmu.
Zdarzenia
YouTubeLoaderEvent.LOADED- Uruchomiono odtwarzacz odtwarzacza Chromeless, który został załadowany i jest gotowy do odbierania wywołań operacji.
YouTubeLoaderEvent.STATE_CHANGE- Uruchamia się przy każdej zmianie stanu gracza. Klasa YouTubeLoader tłumaczy wartości interfejsu JavaScript API na powiązane z nimi wartości, a klasa YouTubeLoaderEvent przechowuje bieżące zdarzenie w zmiennej o nazwie
state. Możliwe wartości to: nieuruchomiona, zakończona, odtwarzanie, wstrzymana, buforowanie, sygnał wideo. Przy pierwszym wczytaniu pliku SWF sygnalizuje ono nierozpoczęte zdarzenie. Gdy film zostanie wskazany i jest gotowy do odtwarzania, rozgłasza zdarzenie związane z filmem. YouTubeLoaderEvent.IO_ERROR- Uruchamiany, gdy pojawi się błąd w odtwarzaczu. Dostępne są 2 kody błędów: 100 jest rozpowszechniane, gdy żądany film nie zostanie znaleziony. Dzieje się tak, gdy film został usunięty (z dowolnego powodu) lub oznaczony jako prywatny. Komunikat 101 jest transmitowany, gdy żądany film nie umożliwia odtwarzania w odtwarzaczach umieszczonych na stronie.
Prezentacja dotycząca wersji demonstracyjnej
Dla celów demonstracyjnych chcieliśmy umieścić pola formularza, przyciski oraz wyświetlacz interfejsu użytkownika poniżej umieszczonego kodu opakowującego Script 3. Aby zaktualizować plik swf i jednocześnie edytować kod XHTML, musieliśmy umieścić dwa wiersze kodu w pliku JavaScript „youTubeLoader.js” znajdującym się na stronie „deploy/_assets/js/” (ilustracja 3). Podczas integrowania tego pliku z projektem chcesz usunąć następujące dwa wiersze [69, 79]:
//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------
function onYouTubePlayerReady(playerId) {
if (checkObj()) {
obj.addEventListener("onStateChange", "onytplayerStateChange");
};
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnYouTubePlayerReady(playerId);
}
function onytplayerStateChange(newState) {
//alert("Player's new state: " + newState);
obj.playerStateUpdateHandler(newState);
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnytplayerStateChange(newState)
}
Plik demonstracyjny wraz z dołączonymi bibliotekami ONIX jest bezpłatnym oprogramowaniem. Możesz go rozpowszechniać lub modyfikować zgodnie z zasadami licencji publicznej GNU Mniej. Te pliki są rozpowszechniane z nadzieją, że będą przydatne, ale bez gwarancji.
Podsumowanie
Ten artykuł zawiera informacje o prostym i pliku źródłowym tego artykułu. Zawiera kompleksowe, proste i niezawodne rozwiązanie umożliwiające integrację interfejsu YouTube API i odtwarzaczy umieszczonych w środowisku w języku Actionscript 3 przy użyciu biblioteki kodu, którą stworzyliśmy na potrzeby naszych własnych projektów. Ponieważ został przeze mnie skomentowany dużą część kodu, eksplorowanie bibliotek i przeprojektowanie ich będzie całkiem proste. Nie ma ograniczeń, ale zawsze można coś poprawić, zmienić i ulepszyć. Jeżeli masz jakieś uwagi na ten temat, skontaktuj się ze mną.
Biogram autora
Matthew Richmond może się pochwalić 14-letnim doświadczeniem w zakresie interaktywnego projektowania, rozwoju i architektury. Poza studio można znaleźć jego cyfrowe zajęcia z ilustracjami i fotografią oraz zaawansowane skrypty w szkole sztuki wizualnej. Mateusz jest partnerem i projektantem strony chopingblock.com.