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

原文链接：http://www.iyoya.com/2011/05/30/popup-video-with-titlewindow-and-videoplayer-component.html

找Flash Builder4.6相关的移动开发的实例实在是不多，下面么这个其实还不算是移动开发，但还是先留着，以备不时之需。

Adobe在Flex4后提供了一个VideoPlayer组件，它是可以设置外观的视频播放器组件，并支持渐进式下载、多比特率流和流视频。它支持播放 FLV 和 F4v 文件。VideoPlayer控件包含控制视频播放的全能 UI。我们只要利用这个组件就可以快速的创作自己的视频播放器。如果将TitleWindow和VideoPlayer组件接合一起使用便可以轻松的实现视频弹出播放的效果。

组件CustomTitleWin.mxml

<?xml version="1.0" encoding="utf-8"?>
<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" width="400" height="300">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			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" 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">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import spark.components.TitleWindow;
		import mx.core.IFlexDisplayObject;
		import mx.managers.PopUpManager;
		import mx.events.CloseEvent;	
			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>

最后实现的效果我不知道怎么放到这个页面上，想看的话去这个网址，也就是转载的原网址

http://www.iyoya.com/2011/05/30/popup-video-with-titlewindow-and-videoplayer-component.html

也可以自己再FB4.6中编写了试一下。

注：在Flex3里面对于视频组件好像是只有VideoDisPlay  在Flash Builder4.6里面 有了一个VideoPlayer，直接就是一个播放器的样子，是一种进步哇