FLEX 播放 flv文件

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<?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组件，一般的视频控制都有了：播放、暂停、进度拖动、声音控制、是否全屏

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?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，以及在视频播放完毕时执行事件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<?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>