利用TitleWindow和VideoPlayer组件轻松实现视频弹出播放效果

原文链接：

http://www.iyoya.com

Adobe在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>

利用TitleWindow和VideoPlayer组件轻松实现视频弹出播放效果

利用TitleWindow和VideoPlayer组件轻松实现视频弹出播放效果

你可能感兴趣的:(利用TitleWindow和VideoPlayer组件轻松实现视频弹出播放效果)