Flexで簡単にYoutubeの動画を再生する方法


なにやらYoutubeの動画をPHPなど利用せずFlexから簡単に再生できるようなったとのこで、自分でもやってみました。
サンプルはこちら。右クリックでソースが見れます。
http://moeten.info/flex/20091016_youtubeAPI/bin-release/main.html
#化物語おもしろいですよー

YoutubeでAS3
情報もと。APIへのリンクがあります。
Google FINALLY Releases AS3 Player for YouTube
Flex4でのYoutubeAPIの紹介。今回はこちらのサンプルを使用させていただきました。

すべてのソースはこちら。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="init()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #D0D0D0]">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.ListEvent;
            import flash.display.Loader;
            import flash.events.Event;
            private var player:Object;
            private var loader:Loader;
            [Bindable]
            private var vidCollection:ArrayCollection;
            private function init():void
            {
                vidCollection=new ArrayCollection();
                vidCollection.addItem({data: "fWbgSiNMx3Q", label: "化物語"});
                vidCollection.addItem({data: "0jWaLjCGkec", label: "地獄少女"});
                vidCollection.addItem({data: "79MN_w0VMPE", label: "lain"});
                loader=new Loader();
                loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
                loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
            }
            private function onLoaderInit(event:Event):void
            {
                VidHolder.rawChildren.addChild(loader);
                loader.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
            {
                traceArea.text+="player ready:" + Object(event).data + "\r";
                player=loader.content;
                player.setSize(VidHolder.width, VidHolder.height);
                VidSelection.selectedIndex=0;
                VidSelection.dispatchEvent(new ListEvent(ListEvent.CHANGE, true, false));
            }
            private function cueVideo(event:ListEvent):void
            {
                traceArea.text+="switch to:" + event.target.selectedItem.label + "\r";
                player.cueVideoById(event.target.selectedItem.data);
            }
            private function onPlayerError(event:Event):void
            {
                traceArea.text+="player error:" + Object(event).data + "\r";
            }
            private function onPlayerStateChange(event:Event):void
            {
                traceArea.text+="player state:" + Object(event).data + "\r";
            }
            private function onVideoPlaybackQualityChange(event:Event):void
            {
                traceArea.text+="video quality:" + Object(event).data + "\r";
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="VidHolder"
               width="607"
               height="420"
               y="40">
    </mx:Canvas>
    <mx:ComboBox id="VidSelection"
                 editable="false"
                 dataProvider="{vidCollection}"
                 height="22"
                 change="cueVideo(event)"
                 width="194"
                 x="10"
                 y="10">
    </mx:ComboBox>
    <mx:TextArea left="10"
                 right="442"
                 editable="false"
                 top="468"
                 bottom="331"
                 id="traceArea"
                 backgroundAlpha="0.6"
                 alpha="0.48"/>
</mx:Application>