·您当前的位置:首页 > 技术教程 > Flex技术 >

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

时间:2013-01-18 00:33CuPlayer.com
Flex4先来做一个最简单的例子,使用VideoDisplay组件,VideoPlayer组件添加全屏按钮tooltip,以及在视频播放完毕时执行事件

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.                xmlns:s="library://ns.adobe.com/flex/spark" 
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
  5.     <s:layout> 
  6.         <s:BasicLayout/> 
  7.     </s:layout> 
  8.   
  9.     <fx:Script> 
  10.         <![CDATA[ 
  11.             protected function button1_clickHandler(event:MouseEvent):void 
  12.             { 
  13.                 vd.play(); 
  14.             } 
  15.   
  16.             protected function button2_clickHandler(event:MouseEvent):void 
  17.             { 
  18.                 vd.pause(); 
  19.             } 
  20.   
  21.   
  22.             protected function button3_clickHandler(event:MouseEvent):void 
  23.             { 
  24.                 vd.stop(); 
  25.             } 
  26.   
  27.         ]]> 
  28.     </fx:Script> 
  29.   
  30.     <fx:Declarations> 
  31.         <!-- 将非可视元素(例如服务、值对象)放在此处 --> 
  32.   
  33.     </fx:Declarations> 
  34.     <s:VideoDisplay id="vd" source="http://localhost/flex/M2U00883.flv" x="59" y="83" width="496" height="335" autoPlay="false"> 
  35. </s:VideoDisplay> 
  36.     <s:BorderContainer x="63" y="427" width="496" height="43"> 
  37.         <s:Button x="105" y="10" label="播放" click="button1_clickHandler(event)"/> 
  38.         <s:Button x="212" y="10" label="暂停" click="button2_clickHandler(event)"/> 
  39.         <s:Button x="327" y="10" label="停止" click="button3_clickHandler(event)"/> 
  40.     </s:BorderContainer>  
  41. </s:Application> 

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

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.                xmlns:s="library://ns.adobe.com/flex/spark" 
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
  5.     <s:layout> 
  6.         <s:BasicLayout/> 
  7.     </s:layout> 
  8.   
  9.     <fx:Declarations> 
  10.         <!-- 将非可视元素(例如服务、值对象)放在此处 --> 
  11.   
  12.     </fx:Declarations> 
  13.     <s:VideoPlayer id="vd" source="http://localhost/flex/M2U00883.flv" x="59" y="83" width="496" height="335" autoPlay="false"> 
  14. </s:VideoPlayer> 
  15.       
  16. </s:Application> 

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

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  3.                xmlns:s="library://ns.adobe.com/flex/spark" 
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
  5.     <s:layout> 
  6.         <s:BasicLayout/> 
  7.     </s:layout> 
  8.   
  9.     <fx:Script> 
  10.         <![CDATA[ 
  11.             import mx.controls.Alert; 
  12.             import mx.events.FlexEvent; 
  13.               
  14.             import org.osmf.events.TimeEvent; 
  15.   
  16.   
  17.             protected function vd_initializeHandler(event:FlexEvent):void 
  18.             { 
  19.                 vd.fullScreenButton.toolTip = "进入全屏"; 
  20.             } 
  21.   
  22.   
  23.             protected function vd_completeHandler(event:TimeEvent):void 
  24.             { 
  25.                 Alert.show("视频播放完毕"); 
  26.             } 
  27.   
  28.         ]]> 
  29.     </fx:Script> 
  30.   
  31.     <fx:Declarations> 
  32.         <!-- 将非可视元素(例如服务、值对象)放在此处 --> 
  33.   
  34.     </fx:Declarations> 
  35.     <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)"> 
  36. </s:VideoPlayer> 
  37. </s:Application> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器