Dieser Artikel wurde von einem externen Entwickler verfasst. Das YouTube API-Team dankt Ben Longoria für seine Zeit und seine Fachkenntnisse.
Ben Longoria, University of Wisconsin – Madison, Academic Technology
Februar 2009
- Einführung
- Die Lage des Landes
- Movie.as verwenden
- MovieSprite.as verwenden
- Was kann ich anrufen und was bekomme ich?
- Schlusswort
Einführung
Abbildung 1: Chromeless Player-Demo
Wow. In etwa einem Monat wird die YouTube Player API ab dem aktuellen Datum ein Jahr alt sein. Wie viele Internetjahre sind das? Es wurden bereits einige tolle Projekte mit der API entwickelt. Im YouTube Developer API-Blog siehst du, dass dort eine Reihe großartiger Entwickler mitarbeitet haben.
Die aktuelle Version der YouTube API Player-Anwendungen ist in der Skriptsprache ActionScript 2 geschrieben. Die Sprache ist zwar weiterhin eine tolle Sprache, aber viele Nutzer verwenden heute ActionScript 3 und/oder Flex. Das Problem ist, dass Sie ein paar Schritte ausführen müssen, damit die Anwendungen von ActionScript 2 mit den Anwendungen von ActionScript 3 kommunizieren können. „Aber warte... Ich glaube, das habe ich schon einmal gehört. Gibt es dafür schon etwas?“, fragen Sie sich vielleicht.
Viele Nutzer haben sich bereits überlegt, wie man das macht, und uns in den YouTube API-Entwicklerforen um Rat fragen. Es gibt auch die Projekte AS3 Chromeless Wrapper und Flex Embedded Player, die Entwicklern die Nutzung erleichtern.
Ich wollte die Player API-Funktionalität ganz einfach in ActionScript 3 oder MXML wiederverwenden. Ein Flex-kostenloser Kurs für diese Flex-Allergic-Projekte und eine nutzerfreundliche Flex-Komponente für diese Flex-Lieblingsprojekte. TubeLoc erfüllt beide Anforderungen.
TubeLoc (eine Kombination aus YouTube und LocalConnection) ist eine ActionScript 3-Bibliothek, die als Adapter für die YouTube ActionScript 2 Player API dient. Sie können YouTube Video-Funktionen ganz einfach zu Ihren ActionScript 3- oder Flex-Anwendungen hinzufügen. Verwenden Sie dazu entweder den YouTube-Player in Chrome oder Chromeless. TubeLoc verwendet die LocalConnection-Klasse für die Kommunikation mit einer ActionScript 2-Media- SWF-Datei. Die SWF-Datei von ActionScript 2 kommuniziert mit dem offiziellen YouTube API-Player. Wie verwenden wir das?
Die Lage des Landes
Laden Sie zuerst die aktuelle Version der Bibliothek aus dem Google Code-Projekt herunter. Nach dem Entpacken des Release-ZIP-Archivs befindet sich ein as3-Verzeichnis. Darunter befindet sich das Verzeichnis src mit einigen Beispielklassen. Sie können diese als Ausgangspunkt verwenden. Unter com/enefekt/tubeloc im Verzeichnis src gibt es zwei Dateien. Sie können Movie.as in Ihren Flex-Projekten und Ihre ActionScript 3-Projekte in MovieSprite.as verwenden. 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, prüfen Sie, ob sich das Verzeichnis src im Verzeichnis as3 im Klassenpfad befindet. Wie Sie dabei vorgehen, hängt davon ab, wofür Sie die Entwicklungsumgebung verwenden. Sehen Sie sich daher die Dokumentation Ihrer Entwicklungsumgebung an.
Nachdem du deine Demo oder Anwendung kompiliert hast, benötigst du die ActionScript 2 SWF, die mit der YouTube Player API kommuniziert. Du findest diese SWF-Datei im Release-Archiv hier: as3/lib/as2_tubeloc.swf. Achten Sie darauf, dass es sich neben der HTML-Datei befindet, in die Ihre SWF-Anwendung eingebettet ist. Beispiel:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Hinweis: Sie können den Pfad zu dieser SWF-Datei mithilfe der Eigenschaft playerWrapperUrl mit der Bibliothek ändern.
Movie.as verwenden
Sehen wir uns an, wie die Flex-Version von TubeLoc verwendet wird. Wir sehen uns zuerst den gesamten Chrome-Player (mit allen Steuerelementen) an, dann den BYOC Chromeless Player. So verwenden Sie den Chrome-Player in MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Das weiß ich wirklich. Nein, gewiss nicht. Gehen wir also verrückt nach Chrome:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Wir ergänzen den Schmerz mit einem weiteren Attribut. Das ist alles. So sieht die gesamte MXML-Datei aus:
<?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 mx:Application-Element 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, welche Komponenten für diese Komponente verfügbar sind und festgelegt werden.
MovieSprite.as verwenden
Sehen wir uns nun an, wie Sie die ActionScript 3-Version von TubeLoc verwenden. Diese Version erfordert keine Klassen aus dem Flex-Framework und verwendet nur native Flash Player-Klassen. Wir werden uns zuerst damit befassen, wie der vollwertige Player funktioniert, dann sehen wir uns den Chromeless Player an. 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. Anschließend erstellen wir im Konstruktor eine Instanz der Klasse MovieSprite und übergeben unsere Video-ID an den Konstruktor von MovieSprite. Als Nächstes fügen wir einen Ereignis-Listener für PlayerReadyEvent hinzu. Im Event-Handler onPlayerReady legen wir die Größe des Films fest. Hinweis: Da wir den Chrome-Player verwenden, nutzen wir eine statische CHROME_HEIGHT-Eigenschaft für die MovieSprite-Klasse. So können wir die Größe des Films unter Berücksichtigung der Chrome-Höhe anpassen.
Was ist mit dem Chromeless Player?
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 anders? Im Konstruktor übergeben wir null für die Video-ID und der zweite true-Parameter teilt der MovieSprite-Klasse mit, dass wir „chromeless“ verwenden werden. Außerdem bemerken Sie im Event-Handler onPlayerReady einen Unterschied. Hier wird das Video mithilfe der Methode loadVideoById nach ID geladen.
Was kann ich anrufen und was bekomme ich?
Welche Anrufe sind möglich und mit welchen Veranstaltungen müssen wir zusammenarbeiten? Im heruntergeladenen Release-Archiv finden Sie eine vollständige Code-Dokumentation, um die Details zu erhalten. Kurzer Überblick über 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 haben Sie in der Movie.as-Komponente Zugriff auf folgende Eigenschaften:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Hier sind die Ereignisse, die du abonnieren kannst. Weitere Informationen finden Sie in der Dokumentation.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Fazit
Ich hoffe, dass du mit diesem Artikel YouTube-Funktionen und -Inhalte in deine Flash-Anwendungen integrieren kannst. Beachten Sie bei der Entwicklung mit TubeLoc die folgende Einschränkung: Es können nicht zwei YouTube-Player gleichzeitig auf der Bühne sein.
Wir hoffen, dass sich das Problem so schnell beheben lässt. Wenn Sie Fehler finden oder Funktionen fehlen, rufen Sie das Google Code-Projekt auf und melden Sie es in der Problemverfolgung. Vielen Dank, dass Sie sich die Zeit zum Lesen dieser E-Mail genommen haben.
Biografie des Autors
Ben Longoria ist Entwickler von akademischen Anwendungen für die University of Wisconsin-Madison. Er entwickelt seit Flash 5 Flash, seit Flex 2 Flex. In den letzten zwei Jahren hat er außerdem Mozilla-gestützte Anwendungen entwickelt. Er hat an einer Reihe von Bildungs- und wissenschaftlichen Projekten mitgearbeitet, darunter plattformübergreifende Anwendungen, die sowohl auf den Browser als auch auf den Desktop ausgerichtet sind. Er nimmt aktiv an der Gestaltung von Benutzeroberflächen und Interaktionen teil und genießt die Herausforderung, nutzerfreundliche Software zu entwickeln. Sein Blog ist unter http://enefekt.com/sansbrowser/ verfügbar und seine Beiträge zu InsideRIA sind verfügbar.
Dieses Werk ist unter einer Creative Commons Attribution 3.0-Lizenz für die USA lizenziert.