[FLEX]Flex4制作Flv视频播放器

1.先来做一个最简单的例子，使用VideoDisplay组件

<?xml version="1.0" encoding="utf-8"?> 
<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" minWidth="955" minHeight="600"> 
    <s:layout> 
        <s:BasicLayout/> 
    </s:layout> 
  
    <fx:Script> 
        <![CDATA[ 
            protected function button1_clickHandler(event:MouseEvent):void 
            { 
                vd.play(); 
            } 
  
            protected function button2_clickHandler(event:MouseEvent):void 
            { 
                vd.pause(); 
            } 
  
  
            protected function button3_clickHandler(event:MouseEvent):void 
            { 
                vd.stop(); 
            } 
  
        ]]> 
    </fx:Script> 
  
    <fx:Declarations> 
        <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  
    </fx:Declarations> 
    <s:VideoDisplay id="vd" source="http://localhost/flex/M2U00883.flv" x="59" y="83" width="496" height="335" autoPlay="false"> 
</s:VideoDisplay> 
    <s:BorderContainer x="63" y="427" width="496" height="43"> 
        <s:Button x="105" y="10" label="播放" click="button1_clickHandler(event)"/> 
        <s:Button x="212" y="10" label="暂停" click="button2_clickHandler(event)"/> 
        <s:Button x="327" y="10" label="停止" click="button3_clickHandler(event)"/> 
    </s:BorderContainer>  
</s:Application> 

这个例子非常简单，就是设置好Flv文件的位置，然后通过三个按钮控制视频播放

2.不妨改用VideoPlayer组件，一般的视频控制都有了：播放、暂停、进度拖动、声音控制、是否全屏

<?xml version="1.0" encoding="utf-8"?> 
<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" minWidth="955" minHeight="600"> 
    <s:layout> 
        <s:BasicLayout/> 
    </s:layout> 
  
    <fx:Declarations> 
        <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  
    </fx:Declarations> 
    <s:VideoPlayer id="vd" source="http://localhost/flex/M2U00883.flv" x="59" y="83" width="496" height="335" autoPlay="false"> 
</s:VideoPlayer> 
      
</s:Application> 

执行一下看看效果，很简单吧！
3.VideoPlayer组件添加全屏按钮tooltip，以及在视频播放完毕时执行事件

<?xml version="1.0" encoding="utf-8"?> 
<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" minWidth="955" minHeight="600"> 
    <s:layout> 
        <s:BasicLayout/> 
    </s:layout> 
  
    <fx:Script> 
        <![CDATA[ 
            import mx.controls.Alert; 
            import mx.events.FlexEvent; 
              
            import org.osmf.events.TimeEvent; 
  
  
            protected function vd_initializeHandler(event:FlexEvent):void 
            { 
                vd.fullScreenButton.toolTip = "进入全屏"; 
            } 
  
  
            protected function vd_completeHandler(event:TimeEvent):void 
            { 
                Alert.show("视频播放完毕"); 
            } 
  
        ]]> 
    </fx:Script> 
  
    <fx:Declarations> 
        <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
  
    </fx:Declarations> 
    <s:VideoPlayer id="vd" source="http://localhost/flex/M2U00883.flv" x="59" y="83" width="496" height="335" autoPlay="false" initialize="vd_initializeHandler(event)" complete="vd_completeHandler(event)"> 
</s:VideoPlayer> 
</s:Application>