YouTube hat endlich einen ersten Schritt in Richtung ActionScript 3 getan. Neu ist nun, dass der sogenannte Chromeless Player nativ in AS3 nutzbar ist.

We have some good news for developers who integrate YouTube videos into their ActionScript 3 Flash applications: the official YouTube Chromeless Player API has been updated to natively support ActionScript 3!

Die inoffiziellen Workarounds (z.B. TubeLoc) haben also ein Ende. Beim Chromeless Player handelt es sich um die Variante, die keine eigenen Bedienelemente besitzt. Das Playerskin kann/muss also selbst gestaltet werden.

Im Folgenden ein Beispiel inklusive Quellcode, das alle wichtigen Schritte zeigt. Dazu gehören z.B.:

  • Laden des YouTube Player mit AS3
  • Laden eines bestimmten Videos
  • Bedienelemente (Play, Pause, Stop, Mute, Unmute, etc.)
  • Herausfinden, welche Qualität der Videostream hat
  • Anzeigen der YouTube-URL und des Embed-Codes
  • Dauer des Videos

Außerdem möchte ich nochmal auf die vier etwas älteren Artikel zur YouTube API auf diesem Blog hinweisen. Dort finden sich weitere hilfreichen Informationen.

Beispiel anschauen

Get Adobe Flash player

Quellcodes des YouTube API Beispiels

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/halo"
  5.                creationComplete="init()" width="500" height="500">
  6.     <fx:Script>
  7.         <![CDATA[
  8.             import flash.display.Loader;
  9.             import flash.events.*;
  10.             import mx.controls.Alert;
  11.            
  12.             private var player:Object;
  13.             private var loader:Loader;
  14.            
  15.             [Bindable]
  16.             private var controlsEnabled:Boolean = false;           
  17.  
  18.             /*
  19.             * Beim Start der Applikation YT-Player laden
  20.             */
  21.             private function init():void {
  22.            
  23.                 // neuen Loader
  24.                 loader = new Loader();
  25.                
  26.                 // Event Listener für Loader
  27.                 loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
  28.                
  29.                 // YouTube Player laden
  30.                 loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
  31.             }
  32.  
  33.             private function onLoaderInit(event:Event):void {
  34.            
  35.                 // Video Container zur Bühne hinzufügen
  36.                 vidContainer.addChild(loader);
  37.                
  38.                 // Event Listener hinzufügen
  39.                 loader.content.addEventListener("onReady", onPlayerReady);
  40.                 loader.content.addEventListener("onError", onPlayerError);
  41.                 loader.content.addEventListener("onStateChange", onPlayerStateChange);
  42.                 loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
  43.             }
  44.  
  45.             private function onPlayerReady(event:Event):void {
  46.            
  47.                 debugTxt.text += "Player ready: " + Object(event).data + "\r";
  48.                 player = loader.content;
  49.                
  50.                 // Groesse des Player festlegen
  51.                 player.setSize(vidContainer.width, vidContainer.height);
  52.                
  53.                 // Video inkl. Vorschaubild laden
  54.                 player.cueVideoById("V_MmgpGWqpA");
  55.             }
  56.  
  57.             private function onPlayerError(event:Event):void {
  58.                 debugTxt.text += "Fehler:" + Object(event).data + "\r";
  59.             }
  60.  
  61.             private function onPlayerStateChange(event:Event):void {
  62.                 debugTxt.text += "Player State gewechselt: " + Object(event).data + "\r";
  63.                
  64.                 // sobald der Player abspielt, die untere Buttonleiste einblenden
  65.                 if ( Object(event).data == 1 ) {
  66.                     controlsEnabled = true;
  67.                 }            
  68.                
  69.             }
  70.  
  71.             private function onVideoPlaybackQualityChange(event:Event):void {
  72.                 // small, medium, large oder hd720
  73.                 debugTxt.text += "Video Qualität: " + Object(event).data + "\r";
  74.  
  75.             }
  76.  
  77.         ]]>
  78.     </fx:Script>
  79.  
  80.  
  81.     <s:layout>
  82.         <s:VerticalLayout />
  83.     </s:layout>
  84.  
  85.    
  86.     <mx:UIComponent id="vidContainer" width="480" height="360" />
  87.  
  88.     <s:HGroup>
  89.         <s:Button label="Play" click="player.playVideo()" />
  90.         <s:Button label="Pause" click="player.pauseVideo()" />   
  91.         <s:Button label="Mute" click="player.mute()" />  
  92.         <s:Button label="Unmute" click="player.unMute()" /> 
  93.     </s:HGroup>
  94.    
  95.     <mx:Spacer height="50" />
  96.    
  97.     <s:HGroup> 
  98.         <s:Button label="Show Video Duration" click="Alert.show (player.getDuration() )" enabled="{controlsEnabled}" />   
  99.         <s:Button label="Show Video URL" click="Alert.show (player.getVideoUrl() )" enabled="{controlsEnabled}" />     
  100.         <s:Button label="Show Embed" click="Alert.show (player.getVideoEmbedCode() )" enabled="{controlsEnabled}" />   
  101.         <s:Button label="Show playback quality" click="Alert.show (player.getPlaybackQuality() )" enabled="{controlsEnabled}" />           
  102.     </s:HGroup> 
  103.  
  104.     <s:TextArea width="200" height="100" id="debugTxt"/>
  105. </s:Application>

Link: YouTube ActionScript 3.0 Player API Reference