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.

PLAIN TEXT
Actionscript:
  1. // neuer MovieClip für den YouTube-Player
  2. myYouTubePlayer = createEmptyMovieClip("myYouTubePlayer", 1);
  3.  
  4. // event listener erstellen
  5. myLoaderListener = {};
  6.  
  7. // neues Interval
  8. var loadInterval:Number;
  9.  
  10. // sofort damit ...
  11. myLoaderListener.onLoadInit = function() {
  12.     // .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
  13.     loadInterval = setInterval(checkPlayerLoaded, 250);
  14. }
  15.  
  16. function checkPlayerLoaded():Void {
  17.    
  18.     // wenn Player geladen ...
  19.     if ( myYouTubePlayer.isPlayerLoaded() ) {
  20.  
  21.         // Preloader ausblenden
  22.         myProgressIndicator._visible = false;
  23.        
  24.         trace("Player geladen");
  25.  
  26.         // Überprüfungsinterval wieder löschen
  27.         clearInterval(loadInterval);
  28.     }
  29. }
  30.  
  31.  
  32. // MovieClipsLoader zum Laden des Players
  33. myLoader = new MovieClipLoader();
  34.  
  35. // Event Listener hinzufügen
  36. myLoader.addListener(myLoaderListener);
  37.  
  38. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  39. myLoader.loadClip("http://www.youtube.com/v/92hnMmrxnJ4", myYouTubePlayer);
  40.  
  41. // positionieren
  42. myYouTubePlayer._x = 10;
  43. myYouTubePlayer._y = 40;

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.

PLAIN TEXT
Actionscript:
  1. // neuer MovieClip für den YouTube-Player
  2. myYouTubePlayer = createEmptyMovieClip("myYouTubePlayer", 1);
  3.  
  4. // event listener erstellen
  5. myLoaderListener = {};
  6.  
  7. // neues Interval
  8. var loadInterval:Number;
  9.  
  10. // sofort damit ...
  11. myLoaderListener.onLoadInit = function() {
  12.     // .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
  13.     loadInterval = setInterval(checkPlayerLoaded, 250);
  14. }
  15.  
  16. function checkPlayerLoaded():Void {
  17.    
  18.     // wenn Player geladen ...
  19.     if ( myYouTubePlayer.isPlayerLoaded() ) {
  20.  
  21.         // Preloader ausblenden
  22.         myProgressIndicator._visible = false;
  23.        
  24.         // Preloader ausblenden
  25.          myStatusTxt.text = "Player loaded ...";
  26.        
  27.         // Überprüfungsinterval wieder löschen
  28.         clearInterval(loadInterval);
  29.        
  30.         // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  31.         myYouTubePlayer.addEventListener("onStateChange", onPlayerStateChange);
  32.        
  33.         // event listener für fehler
  34.         myYouTubePlayer.addEventListener("onError", onPlayerError);
  35.        
  36.     }
  37. }
  38.  
  39.  
  40. // MovieClipsLoader zum Laden des Players
  41. myLoader = new MovieClipLoader();
  42.  
  43. // Event Listener hinzufügen
  44. myLoader.addListener(myLoaderListener);
  45.  
  46. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  47. myLoader.loadClip("http://www.youtube.com/v/92hnMmrxnJ4", myYouTubePlayer);
  48.  
  49. // positionieren
  50. myYouTubePlayer._x = 10;
  51. myYouTubePlayer._y = 40;
  52.  
  53.  
  54.  
  55. function onPlayerStateChange(newState:Number) {
  56.    
  57.    
  58.     // Status des Players (= Zahl)
  59.     switch (newState)  {
  60.        
  61.         case -1: myStatusTxt.text = "Unstarted ...";
  62.         break;
  63.        
  64.         case 0: myStatusTxt.text = "Ended ...";
  65.         break;
  66.        
  67.         case 1: myStatusTxt.text = "Playing ...";
  68.         break;
  69.        
  70.         case 2:  myStatusTxt.text = "Paused ...";
  71.         break;
  72.        
  73.         case 3:  myStatusTxt.text = "Buffering ...";
  74.         break;
  75.        
  76.         case 5:  myStatusTxt.text = "Video cued ...";
  77.         break;
  78.        
  79.     }
  80.        
  81.    
  82. }
  83.  
  84. function onPlayerError(errorCode:Number) {
  85.     trace("Fehler aufgetreten "+ errorCode);
  86. }

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)