Auch im vierten Teil zur YouTube API gibt es wieder zwei Beispiele. Das eine zeigt, wie man den Embed-Code und die Video-URL ausliest. Das zweite liefert eine einfache Lösung, wie man eine Zeitanzeige erstellt.

Die Quellcodes (.fla) gibt es am Ende des Artikels zum Download

YouTube API: Embed Code und Video-URL

Die Funktion getVideoEmbedCode() liefert einen String zurück, der den HTML-Code zum Einbetten in eine Website enthält. Den Direkt-Link zur YouTube-Seite erhält man mit der Methode getVideoUrl(). Hier das passende 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("QOJdIJzIqzc");
  25.        
  26.         // Größe setzen
  27.         myYouTubePlayer.setSize (320, 240);
  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.         // Embed Code darstellen
  50.         myEmbedCode.text = myYouTubePlayer.getVideoEmbedCode();
  51.        
  52.         // Video URL darstellen
  53.         myVideoURL.htmlText = myYouTubePlayer.getVideoUrl();
  54.        
  55.     }
  56. }
  57.  
  58.  
  59. // MovieClipsLoader zum Laden des Players
  60. myLoader = new MovieClipLoader();
  61.  
  62. // Event Listener hinzufügen
  63. myLoader.addListener(myLoaderListener);
  64.  
  65. // Ladevorgang starten (nach ../v/ die Video-ID eintragen)
  66. myLoader.loadClip("http://www.youtube.com/apiplayer", myYouTubePlayer);
  67.  
  68. // positionieren
  69. myYouTubePlayer._x = 10;
  70. myYouTubePlayer._y = 40;
  71.  
  72.  
  73.  
  74. function onPlayerStateChange(newState:Number) {
  75.    
  76.    
  77.     // Status des Players (= Zahl)
  78.     switch (newState)  {
  79.        
  80.         case -1: myStatusTxt.text = "Unstarted ...";
  81.         break;
  82.        
  83.         case 0: myStatusTxt.text = "Ended ...";
  84.         break;
  85.        
  86.         case 1: myStatusTxt.text = "Playing ...";
  87.         // Symbol und Funktionalität umstellen
  88.         myPlayButton.gotoAndStop(2);
  89.         myPlayButton.onRelease = pauseVid;
  90.         break;
  91.        
  92.         case 2:  myStatusTxt.text = "Paused ...";
  93.         // Symbol und Funktionalität umstellen
  94.         myPlayButton.gotoAndPlay(1);
  95.         myPlayButton.onRelease = playVid;
  96.         break;
  97.        
  98.         case 3:  myStatusTxt.text = "Buffering ...";
  99.         break;
  100.        
  101.         case 5:  myStatusTxt.text = "Video cued ...";
  102.         break;
  103.        
  104.     }
  105.        
  106.    
  107. }
  108.  
  109. function onPlayerError(errorCode:Number) {
  110.     trace("Fehler aufgetreten "+ errorCode);
  111. }
  112.  
  113.  
  114.  
  115. // ::::::::::: Start and Pause Button ::::::::::
  116.  
  117. // init with start function
  118. myPlayButton.onRelease = playVid;
  119.  
  120. function playVid():Void {
  121.     myYouTubePlayer.playVideo();
  122. }
  123.  
  124. function pauseVid():Void {
  125.     myYouTubePlayer.pauseVideo();
  126. }
  127.  
  128.  
  129.  
  130. // ::::::::::: Mute Button ::::::::::
  131.  
  132. myMuteButton.onRelease = function():Void {
  133.    
  134.     // wenn nicht gemutet
  135.     if (myYouTubePlayer.isMuted() == false) {
  136.        
  137.         // Video muten
  138.         myYouTubePlayer.mute();
  139.        
  140.         // Symbol umstellen
  141.         myMuteButton.mySpeaker.gotoAndStop(2);
  142.     }
  143.    
  144.     // wenn gemutet
  145.     else {
  146.         // Video unmuten
  147.         myYouTubePlayer.unMute();
  148.        
  149.         // Symbol umstellen
  150.         myMuteButton.mySpeaker.gotoAndStop(1);
  151.     }
  152. }

YouTube API: Zeitanzeige

Für eine Zeitanzeige nutzt man die Funktion getCurrentTime(). Sie liefert die aktuelle Abspielposition zurück, allerdings nur in vollen Sekunden (z.B. "150" für 2min30sec). Man kann jedoch die TimeCode-Klasse von Lee Brimelow nutzen, die ich etwas modifiziert habe. Diese rechnet die kompletten Sekunden in das Format mm:ss (z.B. 02:30) um. Eine AS3-Variante von mir gibt es übrigens hier: ActionScript 3: TimeCode Klasse für Video-Zeitanzeige).

Die TimeCode-Klasse kann man ebenfalls auf getDuration() anwenden, wodurch man die Gesamtzeit des Videos erhält.

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.         // 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.     loadInterval = setInterval(checkTime, 250);
  71.    
  72.     // Status des Players (= Zahl)
  73.     switch (newState)  {
  74.        
  75.         case -1: myStatusTxt.text = "Unstarted ...";
  76.         break;
  77.        
  78.         case 0: myStatusTxt.text = "Ended ...";
  79.         break;
  80.        
  81.         case 1: myStatusTxt.text = "Playing ...";
  82.         // Symbol und Funktionalität umstellen
  83.         myPlayButton.gotoAndStop(2);
  84.         myPlayButton.onRelease = pauseVid;
  85.         break;
  86.        
  87.         case 2:  myStatusTxt.text = "Paused ...";
  88.         // Symbol und Funktionalität umstellen
  89.         myPlayButton.gotoAndPlay(1);
  90.         myPlayButton.onRelease = playVid;
  91.         break;
  92.        
  93.         case 3:  myStatusTxt.text = "Buffering ...";
  94.         break;
  95.        
  96.         case 5:  myStatusTxt.text = "Video cued ...";
  97.         break;
  98.        
  99.     }
  100.        
  101.    
  102. }
  103.  
  104. function onPlayerError(errorCode:Number) {
  105.     trace("Fehler aufgetreten "+ errorCode);
  106. }
  107.  
  108.  
  109.  
  110. // ::::::::::: Start and Pause Button ::::::::::
  111.  
  112. // init with start function
  113. myPlayButton.onRelease = playVid;
  114.  
  115. function playVid():Void {
  116.     myYouTubePlayer.playVideo();
  117. }
  118.  
  119. function pauseVid():Void {
  120.     myYouTubePlayer.pauseVideo();
  121. }
  122.  
  123.  
  124.  
  125. // ::::::::::: Mute Button ::::::::::
  126.  
  127. myMuteButton.onRelease = function():Void {
  128.    
  129.     // wenn nicht gemutet
  130.     if (myYouTubePlayer.isMuted() == false) {
  131.        
  132.         // Video muten
  133.         myYouTubePlayer.mute();
  134.        
  135.         // Symbol umstellen
  136.         myMuteButton.mySpeaker.gotoAndStop(2);
  137.     }
  138.    
  139.     // wenn gemutet
  140.     else {
  141.         // Video unmuten
  142.         myYouTubePlayer.unMute();
  143.        
  144.         // Symbol umstellen
  145.         myMuteButton.mySpeaker.gotoAndStop(1);
  146.     }
  147. }
  148.  
  149.  
  150. // ::::::::::: Time Button ::::::::::
  151.  
  152. // TimeCode Variable
  153. var tc:TimeCode;
  154. tc = new TimeCode();
  155.  
  156. function checkTime():Void {
  157.    
  158.     // String zum Abspeichern
  159.     var timeString:String;
  160.    
  161.     // aktuelle Zeit / Gesamtzeit
  162.     timeString = tc.getTimeCode (myYouTubePlayer.getCurrentTime() );
  163.     timeString += " / ";
  164.     timeString += tc.getTimeCode (myYouTubePlayer.getDuration() );
  165.    
  166.     myTimeDisplay.myTextField.text = timeString;
  167. }

Die anderen Artikel zur YouTube-API sind unter dem Tag YouTube API abgelegt.

Download: Beispiel 6 (.fla)
Download: Beispiel 7 (.fla)