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 = 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.         // wichtig beim Chromeless-Player
  22.         // loadVideoById (laden und abspielen)
  23.         // bzw. cueVideoById (vorschaubild)
  24.         myYouTubePlayer.cueVideoById("QOJdIJzIqzc");
  25.        
  26.         // Größe setzen
  27.         //myYouTubePlayer.setSize (400, 300);
  28.        
  29.         // Preloader ausblenden
  30.         myProgressIndicator._visible = false;
  31.        
  32.         // Preloader ausblenden
  33.          myStatusTxt.text = "Player loaded ...";
  34.        
  35.            
  36.         // Überprüfungsinterval wieder löschen
  37.         clearInterval(loadInterval);
  38.        
  39.         // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  40.         myYouTubePlayer.addEventListener("onStateChange", onPlayerStateChange);
  41.        
  42.         // event listener für fehler
  43.         myYouTubePlayer.addEventListener("onError", onPlayerError);
  44.        
  45.     }
  46. }
  47.  
  48.  
  49. // MovieClipsLoader zum Laden des Players
  50. myLoader = new MovieClipLoader();
  51.  
  52. // Event Listener hinzufügen
  53. myLoader.addListener(myLoaderListener);
  54.  
  55. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  56. myLoader.loadClip("http://www.youtube.com/apiplayer", myYouTubePlayer);
  57.  
  58. // positionieren
  59. myYouTubePlayer._x = 10;
  60. myYouTubePlayer._y = 40;
  61.  
  62.  
  63.  
  64. function onPlayerStateChange(newState:Number) {
  65.    
  66.    
  67.     // Status des Players (= Zahl)
  68.     switch (newState)  {
  69.        
  70.         case -1: myStatusTxt.text = "Unstarted ...";
  71.         break;
  72.        
  73.         case 0: myStatusTxt.text = "Ended ...";
  74.         break;
  75.        
  76.         case 1: myStatusTxt.text = "Playing ...";
  77.        
  78.         case 2:  myStatusTxt.text = "Paused ...";
  79.         // Symbol und Funktionalität umstellen
  80.         break;
  81.        
  82.         case 3:  myStatusTxt.text = "Buffering ...";
  83.         break;
  84.        
  85.         case 5:  myStatusTxt.text = "Video cued ...";
  86.         break;
  87.        
  88.     }
  89.        
  90.    
  91. }
  92.  
  93. function onPlayerError(errorCode:Number) {
  94.     trace("Fehler aufgetreten "+ errorCode);
  95. }

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 = 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.         // wichtig beim Chromeless-Player
  22.         // loadVideoById (laden und abspielen)
  23.         // bzw. cueVideoById (vorschaubild)
  24.         myYouTubePlayer.cueVideoById("FgQwopwiqvU");
  25.        
  26.         // Größe setzen
  27.         myYouTubePlayer.setSize (400, 300);
  28.        
  29.         // Preloader ausblenden
  30.         myProgressIndicator._visible = false;
  31.        
  32.         // Preloader ausblenden
  33.          myStatusTxt.text = "Player loaded ...";
  34.        
  35.         // Falls player gemutet, button anpassen
  36.         if (myYouTubePlayer.isMuted() == true) {
  37.             myMuteButton.mySpeaker.gotoAndStop(2);
  38.         }
  39.            
  40.         // Überprüfungsinterval wieder löschen
  41.         clearInterval(loadInterval);
  42.        
  43.         // event listener, wenn sich der videostatus (play, pause, etc.) ändert
  44.         myYouTubePlayer.addEventListener("onStateChange", onPlayerStateChange);
  45.        
  46.         // event listener für fehler
  47.         myYouTubePlayer.addEventListener("onError", onPlayerError);
  48.        
  49.     }
  50. }
  51.  
  52.  
  53. // MovieClipsLoader zum Laden des Players
  54. myLoader = new MovieClipLoader();
  55.  
  56. // Event Listener hinzufügen
  57. myLoader.addListener(myLoaderListener);
  58.  
  59. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  60. myLoader.loadClip("http://www.youtube.com/apiplayer", myYouTubePlayer);
  61.  
  62. // positionieren
  63. myYouTubePlayer._x = 10;
  64. myYouTubePlayer._y = 40;
  65.  
  66.  
  67.  
  68. function onPlayerStateChange(newState:Number) {
  69.    
  70.    
  71.     // Status des Players (= Zahl)
  72.     switch (newState)  {
  73.        
  74.         case -1: myStatusTxt.text = "Unstarted ...";
  75.         break;
  76.        
  77.         case 0: myStatusTxt.text = "Ended ...";
  78.         break;
  79.        
  80.         case 1: myStatusTxt.text = "Playing ...";
  81.         // Symbol und Funktionalität umstellen
  82.         myPlayButton.gotoAndStop(2);
  83.         myPlayButton.onRelease = pauseVid;
  84.         break;
  85.        
  86.         case 2:  myStatusTxt.text = "Paused ...";
  87.         // Symbol und Funktionalität umstellen
  88.         myPlayButton.gotoAndPlay(1);
  89.         myPlayButton.onRelease = playVid;
  90.         break;
  91.        
  92.         case 3:  myStatusTxt.text = "Buffering ...";
  93.         break;
  94.        
  95.         case 5:  myStatusTxt.text = "Video cued ...";
  96.         break;
  97.        
  98.     }
  99.        
  100.    
  101. }
  102.  
  103. function onPlayerError(errorCode:Number) {
  104.     trace("Fehler aufgetreten "+ errorCode);
  105. }
  106.  
  107.  
  108.  
  109. // ::::::::::: Start and Pause Button ::::::::::
  110.  
  111. // init with start function
  112. myPlayButton.onRelease = playVid;
  113.  
  114. function playVid():Void {
  115.     myYouTubePlayer.playVideo();
  116. }
  117.  
  118. function pauseVid():Void {
  119.     myYouTubePlayer.pauseVideo();
  120. }
  121.  
  122.  
  123.  
  124. // ::::::::::: Mute Button ::::::::::
  125.  
  126. myMuteButton.onRelease = function():Void {
  127.    
  128.     // wenn nicht gemutet
  129.     if (myYouTubePlayer.isMuted() == false) {
  130.        
  131.         // Video muten
  132.         myYouTubePlayer.mute();
  133.        
  134.         // Symbol umstellen
  135.         myMuteButton.mySpeaker.gotoAndStop(2);
  136.     }
  137.    
  138.     // wenn gemutet
  139.     else {
  140.         // Video unmuten
  141.         myYouTubePlayer.unMute();
  142.        
  143.         // Symbol umstellen
  144.         myMuteButton.mySpeaker.gotoAndStop(1);
  145.     }
  146. }

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)