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
Quellcodes des YouTube API Beispiels
-
<?xml version="1.0" encoding="utf-8"?>
-
:Application xmlns:fx="http://ns.adobe.com/mxml/2009" -
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/halo"
-
creationComplete="init()" width="500" height="500">
-
:Script> -
import flash.display.Loader;import flash.events.*;import mx.controls.Alert;private var player:Object;private var loader:Loader;[Bindable]private var controlsEnabled:Boolean = false;/** Beim Start der Applikation YT-Player laden*/private function init():void {// neuen Loaderloader = new Loader();// Event Listener für Loaderloader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);// YouTube Player ladenloader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));}private function onLoaderInit(event:Event):void {// Video Container zur Bühne hinzufügenvidContainer.addChild(loader);// Event Listener hinzufügenloader.content.addEventListener("onReady", onPlayerReady);loader.content.addEventListener("onError", onPlayerError);loader.content.addEventListener("onStateChange", onPlayerStateChange);loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);}private function onPlayerReady(event:Event):void {debugTxt.text += "Player ready: " + Object(event).data + "\r";player = loader.content;// Groesse des Player festlegenplayer.setSize(vidContainer.width, vidContainer.height);// Video inkl. Vorschaubild ladenplayer.cueVideoById("V_MmgpGWqpA");}private function onPlayerError(event:Event):void {debugTxt.text += "Fehler:" + Object(event).data + "\r";}private function onPlayerStateChange(event:Event):void {debugTxt.text += "Player State gewechselt: " + Object(event).data + "\r";// sobald der Player abspielt, die untere Buttonleiste einblendenif ( Object(event).data == 1 ) {controlsEnabled = true;}}private function onVideoPlaybackQualityChange(event:Event):void {// small, medium, large oder hd720debugTxt.text += "Video Qualität: " + Object(event).data + "\r";}]]>:Script>
:layout>:VerticalLayout />:layout>:UIComponent id="vidContainer" width="480" height="360" /> :HGroup>:Button label="Play" click="player.playVideo()" />:Button label="Pause" click="player.pauseVideo()" />:Button label="Mute" click="player.mute()" />:Button label="Unmute" click="player.unMute()" />:HGroup>:Spacer height="50" /> :HGroup>:Button label="Show Video Duration" click="Alert.show (player.getDuration() )" enabled="{controlsEnabled}" />:Button label="Show Video URL" click="Alert.show (player.getVideoUrl() )" enabled="{controlsEnabled}" />:Button label="Show Embed" click="Alert.show (player.getVideoEmbedCode() )" enabled="{controlsEnabled}" />:Button label="Show playback quality" click="Alert.show (player.getPlaybackQuality() )" enabled="{controlsEnabled}" />:HGroup>:TextArea width="200" height="100" id="debugTxt"/>:Application>
Link: YouTube ActionScript 3.0 Player API Reference
8 Kommentare zum Beitrag "YouTube API: Chromeless Player für ActionScript 3"
na Zeit wird es!!! Super Sache!
super! eine Frage: Gibt es den Chromed Youtube Player auch in AS3?
Nein, den Chromed Player gibt's noch nicht für AS3. Ich vermute, dass es den erst gibt, wenn auch der normale Player auf der Webseite von YouTube in AS3 ausgeliefert wird.
[…] 3 API for their Chromeless Player. I looked at some availabe code snippets on different blogs and unfortunateley, I had to realize that the API is not really object-oriented and a little bit […]
Hi Flo,
dank dir für die Codesnippets :-) Finde die API ein bissl eklig zu benutzen, so ohne mögliche Code-Completion und wirkliche Klassen. Habe mich deshalb mal daran gemacht ein bissl OOP Struktur in diese API einzuführen. Herausgekommen sind 3 Klassen und Komponenten für Flash, Flex und Air.
http://blog.derhess.de/2009/10/27/the-new-youtube-as3-chromeless-api-in-flex-air-flash/
Vielleicht kann es ja der ein oder andere gebrauchen?! Im gebrochen English habe ich das Ganze auch dokumentiert.
Grüße nach Offenburg
von auch einem Flo ;-)
Danke für die Ergänzung. Hilfreiche Sache!
Ich habe gerade einen Container für den Chromeless-Player geschrieben, der es erlaubt, auf alle öffentlichen Methoden der Youtube Api zuzugreifen:
http://bjornson.inhb.de/?p=133
Zusätzlich sind die Infos aus der Dokumentation als ASDoc eingefügt. Endlich Autocomplete und ASDoc bei Youtube-Playern :)
Hi Björn, klingt gut. Danke für den Hinweis, dann gibt es eine weitere Alternative zu der oben bereits verlinkten Hilfsklassen.
Schreibe einen Kommentar