利用TitleWindow和VideoPlayer組件輕松實現視頻彈出播放效果
原文鏈接:http://www.iyoya.comAdobe在Flex4后提供了一個VideoPlayer組件,它是可以設置外觀的視頻播放器組件,并支持漸進式下載、多比特率流和流視頻。它支持播放 FLV 和 F4v 文件。VideoPlayer控件包含控制視頻播放的全能 UI。我們只要利用這個組件就可以快速的創作自己的視頻播放器。如果將TitleWindow和VideoPlayer組件接合一起使用便可以輕松的實現視頻彈出播放的效果。
下面為一個示例的代碼:
組件CustomTitleWin.mxml
<?xml version="1.0" encoding="utf-8"?> <!-- Simple custom MXML Spark TitleWindow component. The TitleWindowApp application displays this component. You cannot run it independently. --> <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" title="Video Player" width="400" height="300" close="titlewindow1_closeHandler(event)"> <s:layout> <s:VerticalLayout /> </s:layout> <fx:Script> <![CDATA[ import mx.controls.Text; import mx.events.CloseEvent; import mx.managers.PopUpManager; [Bindable] private static var playState:Boolean=true; protected function titlewindow1_closeHandler(event:CloseEvent):void { video.stop(); playState=false; PopUpManager.removePopUp(this); } ]]> </fx:Script> <s:HGroup width="100%" height="100%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"> <s:VideoPlayer width="100%" height="100%" id="video" autoPlay="{playState}" loop="false" source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"/> </s:HGroup> </s:TitleWindow> |
主程序SampleApp.mxml
<?xml version="1.0"?> <!-- Main application to demonstrate Halo TitleWindow layout container. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="350" backgroundColor="#F3F3F0"> <fx:Script> <![CDATA[ import flash.events.Event; import mx.core.IFlexDisplayObject; import mx.managers.PopUpManager; import spark.components.TitleWindow; private function showWindow():void { var videoWin:CustomTitleWin = CustomTitleWin(PopUpManager.createPopUp(this, CustomTitleWin , true)); videoWin.x=(stage.stageWidth-videoWin.width)/2; videoWin.y=(stage.stageHeight-videoWin.height)/2; videoWin.addEventListener("close", closeHandler); } private function closeHandler(event:Event):void { event.target.removeEventListener("close", closeHandler); PopUpManager.removePopUp(event.target as IFlexDisplayObject); } ]]> </fx:Script> <s:Button id="myButton" label="Play Video" click="showWindow();" horizontalCenter="0" verticalCenter="0"/> </s:Application> |
posted on 2011-06-04 20:41 天空布藍 閱讀(1436) 評論(0) 編輯 收藏 所屬分類: Flex4