Im Frühjahr hat YouTube eine Flash API herausgebracht, die zahlreiche Funktionen anbietet. Besonders interessant sind z.B. der „Chromeless Player“, der sich mit einem eigenen Skin versehen lässt. Aber auch das Integrieren des YouTube-Players in eigene Flashprojekte oder das Anpassen des YouTube-Players gehören dazu.
Grund genug, eine kleine Reihe an Beiträge zur YouTube API zu schreiben, die zeigt, wie die YouTube API genau funktioniert. Die verwendete Flash API (AS2) ist übrigens quasi identisch im Befehlsatz mit der JavaScript API.
Im ersten Teil geht es um die ersten Schritte: die grundsätzliche Einbettung in Flash und das Event für den Player-Zustand. Der Quellcodes (.fla) können am Ende des Beitrags heruntergeladen werden.
YouTube-Player in eine Flashdatei laden
Das erste Beispiel zeigt einfach, wie man den YouTube-Player in ein Flashfile lädt. Es handelt sich dabei einfach um einen SWF-Loader, der das SWF-File von YouTube lädt und in einem MovieClip ablegt. In der Funktion loadClip muss man die entsprechende Video-ID des eigenen Videos einsetzen. Diese findet man in der URL, wenn man das YouTube-Video online anschaut.
[ad]
[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube01.swf“ width=“500″ height=“450″ /]
[as]
// neuer MovieClip für den YouTube-Player
myYouTubePlayer = createEmptyMovieClip(„myYouTubePlayer“, 1);
// event listener erstellen
myLoaderListener = {};
// neues Interval
var loadInterval:Number;
// sofort damit …
myLoaderListener.onLoadInit = function() {
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
loadInterval = setInterval(checkPlayerLoaded, 250);
}
function checkPlayerLoaded():Void {
// wenn Player geladen …
if ( myYouTubePlayer.isPlayerLoaded() ) {
// Preloader ausblenden
myProgressIndicator._visible = false;
trace(„Player geladen“);
// Überprüfungsinterval wieder löschen
clearInterval(loadInterval);
}
}
// MovieClipsLoader zum Laden des Players
myLoader = new MovieClipLoader();
// Event Listener hinzufügen
myLoader.addListener(myLoaderListener);
// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
myLoader.loadClip(„http://www.youtube.com/v/92hnMmrxnJ4“, myYouTubePlayer);
// positionieren
myYouTubePlayer._x = 10;
myYouTubePlayer._y = 40;
[/as]
Statusmeldungen des YouTube-Players (state)
Der YouTube-Player kann sich in verschiedenen Zuständen (states) befinden, die durch Nummern abgekürzt sind. Jedes Mal, wenn sich der Zustand ändert, wird ein Event mit der Nummer ausgelöst.
- -1 (unstarted): Das Video wurde noch nicht gestartet.
- 0 (ended): Das Video wurde beendet.
- 1 (playing): Das Video wird abgespielt.
- 2 (paused): Das Video ist im Pause-Zustand.
- 3 (buffering): Das Video wird gerade zwischengespeichert
- 5 (video cued): Mhh .. dieses Event konnte ich nicht auslösen :-)
Im folgenden Beispiel wird das Event abgehört. Als Reaktion wird in der oberen Leiste jeweils ein Text eingeblendet, der den aktuellen Zustand des Videoplayers anzeigt.
[ad]
[kml_flashembed movie=“/wp-content/uploads/2008/07/YouTube02.swf“ width=“500″ height=“450″ /]
[as]
// neuer MovieClip für den YouTube-Player
myYouTubePlayer = createEmptyMovieClip(„myYouTubePlayer“, 1);
// event listener erstellen
myLoaderListener = {};
// neues Interval
var loadInterval:Number;
// sofort damit …
myLoaderListener.onLoadInit = function() {
// .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
loadInterval = setInterval(checkPlayerLoaded, 250);
}
function checkPlayerLoaded():Void {
// wenn Player geladen …
if ( myYouTubePlayer.isPlayerLoaded() ) {
// Preloader ausblenden
myProgressIndicator._visible = false;
// Preloader ausblenden
myStatusTxt.text = „Player loaded …“;
// Überprüfungsinterval wieder löschen
clearInterval(loadInterval);
// event listener, wenn sich der videostatus (play, pause, etc.) ändert
myYouTubePlayer.addEventListener(„onStateChange“, onPlayerStateChange);
// event listener für fehler
myYouTubePlayer.addEventListener(„onError“, onPlayerError);
}
}
// MovieClipsLoader zum Laden des Players
myLoader = new MovieClipLoader();
// Event Listener hinzufügen
myLoader.addListener(myLoaderListener);
// Ladevorgang starten (nach ../v/ die Video-ID eintragen)
myLoader.loadClip(„http://www.youtube.com/v/92hnMmrxnJ4“, myYouTubePlayer);
// positionieren
myYouTubePlayer._x = 10;
myYouTubePlayer._y = 40;
function onPlayerStateChange(newState:Number) {
// Status des Players (= Zahl)
switch (newState) {
case -1: myStatusTxt.text = „Unstarted …“;
break;
case 0: myStatusTxt.text = „Ended …“;
break;
case 1: myStatusTxt.text = „Playing …“;
break;
case 2: myStatusTxt.text = „Paused …“;
break;
case 3: myStatusTxt.text = „Buffering …“;
break;
case 5: myStatusTxt.text = „Video cued …“;
break;
}
}
function onPlayerError(errorCode:Number) {
trace(„Fehler aufgetreten „+ errorCode);
}
[/as]
Die weiteren Beiträge zur YouTube-API finden sich unter dem Tag YouTube API.
Link: YouTube ActionScript 2.0 Player API Reference
Download: Beispiel 1 (.fla), Beispiel 2 (.fla)
Hier der Link zu einer interessanten Präsentation von Geoff Stearns, einem der Entwickler bei YouTube.
Hallo zusammen,
der Beitrag ist klasse. Ich kann ihn ganz gut für meine Zwecke verwerten.
Ich habe jedoch noch eine alles entscheidende Frage: Wie kann ich den erzeugten MC in den Hintergrund setzten?
_root.myYouTubePlayer.swapDepths(1);
funktioniert irgendwie nicht.
Gruß
Christian
Danke. Versuch’s mal z.B. damit, die anderen Sachen in den Vordergrund zu holen:
movieclip.swapDepths(this.getNextHighestDepth());
Wow ein super Beitrag, kamm mir genau recht.
Werde mir natürlich auch noch die anderen Teile euerer Einführung anschauen.
Gruß,
devno
Die YouTube API gibt jetzt auch für AS3. Näheres im Artikel Chromeless Player für ActionScript 3
http://www.video-flash.de/index/youtube-api-chromeless-player-actionscript3/
Hy, der Code ist total Hilfreich für mich und es klappt auch alles wunderbar. Danke dafür! =).. Nur wenn ich wieder auf andere Seiten innerhalb meiner Flash HP möchte, reagiert der Button nicht, in der Offline vorschau schon. Bin Flash Neuling, was mach' ich falsch????? Bin am verzweifeln -.-
LG
Muss mich korriegen, der Button funzt. Nur wenn ich die Frame innerhalb des Flash wechseln, verschwindet der Player nicht. Wie bekomme ich ihn weg, wenn man eine andere Seite aufruft???
Liebe Grüße
myYouTubePlayer._visible = false;
sollte den Player ausblenden.
Vielen Dank für Deine Antwort =)
Ich habs hinbekommen, klappt.
Nur jetzt blendet der Player zwar aus, jedoch spielt der Ton im Hintergrund noch weiter.
Habe im AS in den Frames, in denen der Player nicht ist den Code "myYoutubeplayer.stop();" hinterlegt, aber das zeigt keine Wirkung.
Könntest Du mir vllt. Bitte den richtigen Code geben, damit der Player stoppt, sobald ich den Frame mit dem Player verlasse?
Liebe Grüße und weiter so!!
Versuch es mal mit
myYouTubePlayer.pauseVideo();
(stammt aus diesem Artikel http://www.video-flash.de/index/youtube-api-teil-3-chomeless-player/ )
Vielen, vielen Dank!! Hast mir echt geholfen, klappt!! =)
Ja den Artikel konnte ich Gestern leider nich aufrufen.. Kam nur schwarzer bg..
Wünsche Dir einen schönen Sonntag und Danke nochmal! =)
Zuerst einmal ein großes Lob. Habe über das Tutorial hier ne Menge gelernt. Leider kann ich die Beispiel.fla's mit Macromedia Flash Pro 8 nicht öffnen. Kann mir da vielleicht wer weiterhelfen?
Danke im voraus
Vicane
Sind leider für CS3 abgespeichert. Evtl. mit der Flash CS5 Trialversion öffnen…
Danke für den Hinweis.^^
Mein Problem ist, dass der Player wunderbar bei mir läuft, er sich aber nach dem Start nicht mehr stoppen lässt.
Ich habe in Ebene 5 den Player liegen. Lade ich in diese Ebene einen anderen Inhalt ist zwar das Video weg und der neue Inhalt wird auch geladen, aber der Sound des Videos läuft weiter.
So habe ich es bis jetzt versucht:
loadmovie("inhalt-leer.swf",5);
_level5.gotoandplay(1);
habe auch bereits mit:
this.ytplayer.stopVideo();
this.ytplayer.clearVideo();
this.ytplayer.destroy();
delete this.ytplayer;
this.ytplayer.removeMovieClip();
experimentiert, aber ohne Erfolg. Was mache ich falsch?
LG Vicane
Hallo zusammen.
Ich bin recht unerfahren mit der Programmierung, habe jetzt aber ein akutes "Projekt" und hoffe, jemand kann mir helfen.
Ich möchte auf meiner Website unter der URL: "http://www.meinedomain.com/hochzeit"
eine Seite erstellen, in der ich den YouTube-Player einbinde. Dort soll lediglich EIN Video gezeigt werden, nämlich eine zum Video konvertierte Dia-Show mit Musik.
Da ich hierfür (also für rein private Zwecke) ein urheberrechtlich geschütztes Lied ("unser Lied" halt) benutze, wirft die automatische Musikerkennung auf Youtube das Video sofort raus.
Leider ist es mir bisher nicht gelungen, YouTube klar zu machen, dass ich das Video ausschließlich für private Zwecke nutze – und das auch nur ein paar Wochen für die Hochzeitsgäste.
Mein Plan ist es, auf meiner eigenen Website die als MP4, AVI oder FLV encodierten Videos abzulegen und diese eben über einen angepassten YouTube-Player zu starten.
Ich möchte den YouTube-Player benutzten, weil man dort ja recht bequem verschiedene Auflösungen wählen kann. Hierzu würde ich das Video in entsprechenden Auflösungen vorcodieren und als verschiedene Dateien ablegen.
Lässt sich das irgendwie machen?
Bin für jeden Tipp und jede Hilfestellung sehr dankbar!!!
LG,
Kiu
Nee, das klappt nicht. Du müsstest einen eigenen Player verwenden, z.B. diesen hier:
http://www.video-flash.de/flv-flash-fullscreen-video-player/