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.

Actionscript:

  1. // neuer MovieClip für den YouTube-Player
  2. "myYouTubePlayer", 1);
  3.  
  4. // event listener erstellen
  5. // neues Interval
  6. // sofort damit ...
  7. // .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
  8. // wenn Player geladen ...
  9. // Preloader ausblenden
  10. "Player geladen");
  11.  
  12.         // Überprüfungsinterval wieder löschen
  13. // MovieClipsLoader zum Laden des Players
  14. // Event Listener hinzufügen
  15. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  16. "http://www.youtube.com/v/92hnMmrxnJ4"// positionieren
  17.  

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.

Actionscript:

  1. // neuer MovieClip für den YouTube-Player
  2. "myYouTubePlayer", 1);
  3.  
  4. // event listener erstellen
  5. // neues Interval
  6. // sofort damit ...
  7. // .. ständig zu überprüfen, ob der Player bereits vollständig geladen ist
  8. // wenn Player geladen ...
  9. // Preloader ausblenden
  10. // Preloader ausblenden
  11. "Player loaded ...";
  12.        
  13.         // Überprüfungsinterval wieder löschen
  14. // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  15. "onStateChange"// event listener für fehler
  16. "onError"// MovieClipsLoader zum Laden des Players
  17. // Event Listener hinzufügen
  18. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  19. "http://www.youtube.com/v/92hnMmrxnJ4"// positionieren
  20. // Status des Players (= Zahl)
  21. "Unstarted ...""Ended ...""Playing ...""Paused ...""Buffering ...""Video cued ...""Fehler aufgetreten "

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)