In den ersten beiden Artikeln zur YouTube-API ging es um den Player im allseits bekannten YouTube-Design. Mit der YouTube-API gibt nun auch die Möglichkeit, Videos von YouTube in einen eigenen Player zu gießen. Dazu kommt der so genannten Chromeless Player zum Einsatz, also ein Player ohne Bedienelemente.

Laden des YouTube Chromeless Player

Beim Chromeless-Player funktioniert der Videoaufruf an einer Stelle etwas anders als bei den zuvor gezeigten Beispielen. Man benötigt im Vergleich zum normalen YouTube-Player zwei Schritte. Zuerst lädt man die Player-SWF-Datei ohne Video-ID. Die Adresse lautet http://www.youtube.com/apiplayer.

Im zweiten Schritt, sobald das SWF vollständig da ist, ruft man die Video-ID auf. Dazu gibt es zwei unterschiedliche Funktionen:

  • Die Funktion loadVideoById("ABCD12345") spielt ein Video direkt ab.
  • cueVideoById("ABCD12345") sorgt für das typische Vorschaubild mit dem Playbutton in der Mitte.

Das Ergebnis ist ein YouTube-Video ohne Steuerungselemente:

PLAIN TEXT
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. // wichtig beim Chromeless-Player
  10.         // loadVideoById (laden und abspielen)
  11.         // bzw. cueVideoById (vorschaubild)
  12. "QOJdIJzIqzc");
  13.        
  14.         // Größe setzen
  15.         //myYouTubePlayer.setSize (400, 300);
  16.        
  17.         // Preloader ausblenden
  18. // Preloader ausblenden
  19. "Player loaded ...";
  20.        
  21.            
  22.         // Überprüfungsinterval wieder löschen
  23. // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  24. "onStateChange"// event listener für fehler
  25. "onError"// MovieClipsLoader zum Laden des Players
  26. // Event Listener hinzufügen
  27. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  28. "http://www.youtube.com/apiplayer"// positionieren
  29. // Status des Players (= Zahl)
  30. "Unstarted ...""Ended ...""Playing ...""Paused ...";
  31.         // Symbol und Funktionalität umstellen
  32. "Buffering ...""Video cued ...""Fehler aufgetreten "

Buttons für den Chromeless Player

Alle gängige Funktionen wie play (playVideo), pause (pauseVideo), stop (stopVideo), spulen (seekTo) oder die Lautstärke (setVolume) sind in der YouTube API enthalten. Im nachfolgenden Beispiel werden zwei Buttons erstellt: ein Play-Pause-Button und Mute-Button (Ton stummschalten).

Ein Hinweis: Beim Entwickeln sollte man sich nicht irritieren lassen, wenn der Ton fehlt. Der Player merkt sich den Stand vom letzten Aufruf, d.h. wenn man den Ton z.B. stummschaltet, steht dieser beim nächsten Aufruf bereits auf lautlos. Deshalb muss man beim Initialisieren des Players immer den Status abfragen ( isMuted() ) und im Mutebutton das passende Symbol einblenden.

Hier das Beispiel:

PLAIN TEXT
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. // wichtig beim Chromeless-Player
  10.         // loadVideoById (laden und abspielen)
  11.         // bzw. cueVideoById (vorschaubild)
  12. "FgQwopwiqvU");
  13.        
  14.         // Größe setzen
  15. // Preloader ausblenden
  16. // Preloader ausblenden
  17. "Player loaded ...";
  18.        
  19.         // Falls player gemutet, button anpassen
  20. // Überprüfungsinterval wieder löschen
  21. // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  22. "onStateChange"// event listener für fehler
  23. "onError"// MovieClipsLoader zum Laden des Players
  24. // Event Listener hinzufügen
  25. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  26. "http://www.youtube.com/apiplayer"// positionieren
  27. // Status des Players (= Zahl)
  28. "Unstarted ...""Ended ...""Playing ...";
  29.         // Symbol und Funktionalität umstellen
  30. "Paused ...";
  31.         // Symbol und Funktionalität umstellen
  32. "Buffering ...""Video cued ...""Fehler aufgetreten "// ::::::::::: Start and Pause Button ::::::::::
  33.  
  34. // init with start function
  35. // ::::::::::: Mute Button ::::::::::
  36. // wenn nicht gemutet
  37. // Video muten
  38. // Symbol umstellen
  39. // wenn gemutet
  40. // Video unmuten
  41. // Symbol umstellen
  42.  

Weitere Artikel zur YouTube-API unter dem Stichwort YouTube API.

Link: YouTube JavaScript Player API Reference (enthält die gleichen Befehle wie die Flash API)
Download: Beispiel 4 (.fla)
Download: Beispiel 5 (.fla)