Dieser Artikel wurde von einem externen Entwickler verfasst und eingereicht. Das YouTube API-Team bedankt sich bei Ben Longoria für seine Zeit und sein Fachwissen.
Ben Longoria, University of Wisconsin – Madison, Academic Technology
Februar 2009
- Einführung
- Die Ausgangslage
- Movie.as verwenden
- MovieSprite.as verwenden
- Welche Nummer kann ich anrufen und was bekomme ich?
- Schlusswort
Einführung
Abbildung 1: Demo des TubeLoc-Chromeless-Players
Wow. In nur einem Monat, also zum Zeitpunkt der Veröffentlichung dieses Artikels, wird die YouTube Player API ein Jahr alt. Wie viele Internetjahre sind das? Es gibt eine Reihe von großartigen Projekten, die auf der API basieren. Wenn du dem YouTube Developer API-Blog folgst, siehst du, dass viele Entwickler tolle Dinge damit geschaffen haben.
Die aktuellen Playeranwendungen der YouTube API sind in ActionScript 2 geschrieben. Diese Sprache ist nach wie vor sehr gut geeignet, aber viele Nutzer verwenden jetzt ActionScript 3 und/oder Flex. Das Problem ist, dass Sie einige Hürden überwinden müssen, damit ActionScript 2-Anwendungen mit ActionScript 3-Anwendungen kommunizieren können. „Aber Moment mal… Ich glaube, ich habe das schon einmal gehört. Gibt es dafür nicht schon etwas?“, fragen Sie vielleicht.
Viele Entwickler haben das bereits herausgefunden und ihre Erkenntnisse in den YouTube API-Entwicklerforen geteilt. Außerdem gab es die Projekte AS3 Chromeless Wrapper und Flex Embedded Player, um die Nutzung für Entwickler zu vereinfachen.
Ich wollte eine einfache Möglichkeit haben, die Funktionen der Player API ausschließlich in ActionScript 3 oder MXML wiederzuverwenden. Eine Flex-kostenlose Klasse für Projekte, die nicht auf Flex basieren, und eine nutzerfreundliche Flex-Komponente für Projekte, die Flex verwenden. TubeLoc erfüllte beide Anforderungen
TubeLoc (ein Mashup aus YouTube und LocalConnection) ist eine ActionScript 3-Bibliothek, die als Adapter für die YouTube ActionScript 2 Player API dient. Mit dem YouTube-Player mit oder ohne Rahmen können Sie Ihren ActionScript 3- oder Flex-Anwendungen ganz einfach YouTube-Videofunktionen hinzufügen. TubeLoc verwendet die LocalConnection-Klasse, um mit einem ActionScript 2-Mediator-SWF zu kommunizieren. Das ActionScript 2-SWF kommuniziert mit dem offiziellen YouTube API-Player. Wie verwenden wir das Ding?
Die Lage des Landes
Laden Sie zuerst die aktuelle Version der Bibliothek aus dem Google Code-Projekt herunter. Nachdem Sie das ZIP-Archiv der Version entpackt haben, finden Sie darin das Verzeichnis as3. Darunter befindet sich das Verzeichnis src mit einigen Beispielklassen. Sie können diese als Ausgangspunkt verwenden. Im Verzeichnis src befinden sich unter com/enefekt/tubeloc zwei Dateien. Die Movie.as können Sie in Ihren Flex-Projekten verwenden, die MovieSprite.as in Ihren ActionScript 3-Projekten. In com/enefekt/tubeloc/event gibt es verschiedene Ereignisklassen für die verschiedenen Benachrichtigungen, die vom Player gesendet werden können.
Bevor Sie die Beispiele in dieser Anleitung ausprobieren, muss sich das Verzeichnis src im Verzeichnis as3 in Ihrem Klassenpfad befinden. Die Vorgehensweise unterscheidet sich je nach Entwicklungstool. Lesen Sie daher die Dokumentation für Ihre Entwicklungsumgebung.
Nachdem du deine Demo oder Anwendung kompiliert hast, benötigst du das ActionScript 2-SWF, das mit der YouTube Player API kommuniziert. Sie finden dieses SWF im Release-Archiv unter as3/lib/as2_tubeloc.swf. Achten Sie darauf, dass sie sich neben der HTML-Datei befindet, in die Ihre SWF-Anwendung eingebettet ist, z. B. so:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Hinweis: Sie können den Pfad zu diesem SWF mit der Bibliothek über die Property playerWrapperUrl ändern.
Movie.as verwenden
Sehen wir uns an, wie Sie die Flex-Version von TubeLoc verwenden. Wir sehen uns zuerst den Player mit Chrome-Oberfläche (mit allen Steuerelementen) und dann den Chromeless Player für BYOC an. So verwendest du den Full-Chrome-Player in MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Ich weiß, ich weiß, das ist schmerzhaft. Nein, gewiss nicht. Also machen wir es ganz ohne Rahmen:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Wir machen es noch schlimmer und fügen ein weiteres Attribut hinzu. Die vollständige MXML-Datei würde also so aussehen:
<?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>
Hinweis: Im Element mx:Application fügen wir den Namespace tubeloc mit dem Paket für die Movie-Komponente hinzu. Danach können wir die Komponente wie gezeigt verwenden. Später sehen wir uns an, was sich für diese Komponente festlegen und aufrufen lässt.
MovieSprite.as verwenden
Sehen wir uns nun an, wie Sie die ActionScript 3-Version von TubeLoc verwenden. Für diese Version sind keine Klassen aus dem Flex-Framework erforderlich. Es werden nur native Flash Player-Klassen verwendet. Wir sehen uns zuerst den Player mit Chrome an und dann den Chromeless Player. Hier ein vollständiges Beispiel:
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;
}
}
}
Zuerst importieren wir die erforderlichen TubeLoc-Klassen. Im Konstruktor erstellen wir dann eine Instanz der Klasse MovieSprite und übergeben unsere Video-ID an den Konstruktor von MovieSprite. Als Nächstes fügen wir einen Event-Listener für PlayerReadyEvent hinzu. Im onPlayerReady-Ereignis-Handler legen wir die Größe des Films fest. Hinweis: Da wir den Full-Chrome-Player verwenden, nutzen wir die statische Property CHROME_HEIGHT der Klasse MovieSprite. So können wir die Größe des Films unter Berücksichtigung der Höhe des Chroms festlegen.
Okay, und wie sieht es mit dem Player ohne Tabs aus?
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");
}
}
}
Was ist also anders? Im Konstruktor übergeben wir null als Video-ID und der zweite Parameter true teilt der Klasse MovieSprite mit, dass wir ohne Chrome arbeiten. Auch beim Ereignis-Handler für onPlayerReady gibt es einen Unterschied. Hier laden wir unser Video anhand der ID mit der Methode loadVideoById.
Was kann ich anrufen und was bekomme ich?
Was kann ich also aufrufen und mit welchen Ereignissen muss ich arbeiten? Im heruntergeladenen Release-Archiv finden Sie die vollständige Codedokumentation mit allen Details. Hier eine kurze Übersicht über die Methoden für Movie.as und 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
Zusätzlich zu diesen Methoden hast du in der Movie.as-Komponente Zugriff auf die folgenden Properties:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Hier sind die Ereignisse, die Sie abonnieren können. Weitere Informationen finden Sie in der Dokumentation.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Fazit
Ich hoffe, dass dieser Artikel Ihnen dabei geholfen hat, YouTube-Funktionen und -Inhalte in Ihre Flash-Anwendungen einzubinden. Bei der Entwicklung mit TubeLoc gibt es eine Einschränkung: Es können nicht gleichzeitig zwei YouTube-Player auf der Bühne sein.
Wir hoffen, dass das Problem bald behoben wird. Wenn Sie also Fehler finden oder eine Funktion vermissen, rufen Sie das Google Code-Projekt auf und melden Sie den Fehler im Issue Tracker. Vielen Dank, dass Sie sich die Zeit zum Lesen dieser E-Mail genommen haben.
Biografie des Autors
Ben Longoria ist Entwickler von akademischen Anwendungen an der University of Wisconsin-Madison. Er entwickelt seit Flash 5 mit Flash und seit der Veröffentlichung von Flex 2 mit Flex. In den letzten zwei Jahren hat er auch Mozilla-gestützte Anwendungen entwickelt. Ben hat an einer Reihe von Bildungs- und akademischen Projekten gearbeitet, darunter plattformübergreifende Anwendungen, die sowohl für den Browser als auch für den Desktop konzipiert sind. Er nimmt eine aktive Rolle im Interface- und Interaktionsdesign ein und genießt die Herausforderung, nutzerfreundliche Software zu entwickeln. Sie finden seinen Blog unter http://enefekt.com/sansbrowser/ und seine Beiträge zu InsideRIA.
Dieses Werk unterliegt der Creative Commons Attribution 3.0 United States License.