使用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>