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>