Flex 视频监控多屏播放

视频监控WEB观看端，用flash播放监控的视频的小例子

实现主要功能如下

1. 多屏切换，这里主要是tileLayout布局的使用

2. 单个视频双击全屏，整屏全屏

3. 右键菜单和屏蔽系统的右键菜单 主要是这个属性 params.wmode="transparent";

4. flex与JS的交互，（通过js向flex中传递视频播放地址）

1.swf预览图

2. 插入到html的预览图（根据大华的网页弄的一个样式）

3.FlashBuilder目录结构图

4.主应用（BXPlayer.mxml）

  
  
	  
		 = new Vector.();
			[Bindable]
			private var sqrScreens:int = 1;
			[Bindable]
			private var text:String;
			
			private function playVideo(videoHost:String, videoName:String):void{
				for(var i:int = 0; i < fVector.length; i++){
					var flv:FLVideo = fVector[i];
					if(!flv.isConStream){
						flv.init(videoHost, videoName);
						break
					}
				}
			}
			protected var rightClickRegisted:Boolean = false;
			
			//初始化
			protected function init(event:FlexEvent):void
			{
				ExternalInterface.addCallback("playVideo",playVideo);
				if (!rightClickRegisted)  
				{  
					RightClickManager.regist();  
					rightClickRegisted = true;  
				} 
				
				this.addFLVideo(49);  //添加视频
				flvContainer.addElement(fVector[0]);  //初始化第一屏
			}
			
			//切换屏幕
			protected function changeScreen(event:MouseEvent):void
			{
				//初始化选择框的位置
				selectRect.width = 0; 
				selectRect.height = 0;
				//获取几屏
				var screen:int = int(Button(event.currentTarget).label);
				sqrScreens = Math.sqrt(screen);
				flvContainer.removeAllElements(); //删除所有元素
				for(var i:int = 0; i < screen; i++){
					var flVideo:FLVideo = fVector[i];
					flVideo.toolTip = flVideo.name;
					flvContainer.addElement(flVideo);
				}
			}
			
			//初始化视频窗口
			private function addFLVideo(num:int):void{
				var flVideo:FLVideo = null;
				for(var i:int = 0; i < num; i++){
					flVideo = new FLVideo();
					flVideo.name = "第" + i + "个";
					flVideo.doubleClickEnabled = true; //允许双击
					//视频双击全屏事件
					flVideo.addEventListener(MouseEvent.DOUBLE_CLICK,dbFullScreen);
					//视频单击事件
					flVideo.addEventListener(MouseEvent.CLICK, flVideoClick);
					//鼠标右键事件
					flVideo.addEventListener(RightClickManager.RIGHT_CLICK, EventArgExtend.create(rightClickHandler,flVideo));
					flVideo.addEventListener(MouseEvent.MOUSE_OVER, overHandle);
					fVector.push(flVideo);
				}
			}
			
			private var menu:Menu;
			//控件右击事件
			private function rightClickHandler(event:ContextMenuEvent, ...arg):void{
				removeMenu();
				initMenu(arg[0]);
			}
			//删除右键菜单
			private function removeMenu():void 
			{  
				if(menu!=null)  
				{  
					menu.hide();
					menu.removeEventListener(MenuEvent.ITEM_CLICK,menuItemSelected);  
					menu=null;  
				}  
			}
			
			//生成右键菜单
			private function initMenu(flVideo:FLVideo):void
			{
				menu = Menu.createMenu(this, createMenuItems(), false);
				//menu.iconField="itemIcon";//右键菜单的图标
				//menu.labelField="label";  //右键菜单的名称 
				menu.variableRowHeight = true;     
				menu.width=120;
				menu.addEventListener(MenuEvent.ITEM_CLICK, EventArgExtend.create(menuItemSelected, flVideo));  //右键菜单的事件
				var point:Point = new Point(mouseX,mouseY);  
				point = localToGlobal(point);   
				menu.show(point.x,point.y);  //显示右键菜单
			}
			
			//创建菜单项
			private function createMenuItems():Array  
			{  
				
				var menuItems:Array = new Array();
				var menuItem1:Object = new Object;  
				menuItem1.label = '查看URL'; //菜单项名称
				//menuItem.itemIcon = this.menu_SX;//菜单项图标
				var menuItem2:Object = new Object;  
				menuItem2.label = '关闭'; //菜单项名称
				menuItems.push(menuItem1);
				menuItems.push(menuItem2);
				return menuItems;  
			}
			
			//菜单项点击事件
			private function menuItemSelected(event:MenuEvent, ...arg):void
			{
				var menuItem:Object = event.menu.selectedItem as Object;
				var flVideo:FLVideo = arg[0];
				if(flVideo.isConStream){
					switch(menuItem.label){
						case "查看URL":
							Alert.show("视频URL: " + flVideo.videoHost + "/" + flVideo.videoName)
							break;
						case "关闭":
							flVideo.close();
							break;
					}
				}
			}
			private function dbFullScreen(event:MouseEvent):void{
				this.fullScreen(event.currentTarget as UIComponent);
			}
			//全屏代码
			private function fullScreen(displayObject:UIComponent):void{
				if(FullScreenUtil.isFullScreen){
					FullScreenUtil.exitFullScreen();
					//初始化选择框的位置
					selectRect.width = 0; 
					selectRect.height = 0;
				}else{
					FullScreenUtil.goFullScreen();
					// 加入要全屏的对像．videoDisplay
					FullScreenUtil.addChild(displayObject, true, true, true);
				}
			}
			
			//点击视频窗口的时候重新画一个矩形包围视频
			private var closeVideo:FLVideo;
			private function flVideoClick(event:MouseEvent):void{
				var obj:FLVideo = event.currentTarget as FLVideo;
				selectRect.x = obj.x + 2;
				selectRect.y = obj.y + 2;
				selectRect.width = obj.width;
				selectRect.height = obj.height;
				closeVideo = obj;
			}
			
			private function overHandle(event:MouseEvent):void{
				text = event.currentTarget.name + ": (" + event.currentTarget.x + "," + event.currentTarget.y + "),(" + event.currentTarget.width
					+ "," + event.currentTarget.height + ")";
			}
			
			private function close(event:MouseEvent):void
			{
				Alert.show(flvContainer.numChildren + "," + flvContainer.numElements);
			}
			
			protected function clickPlay(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				closeVideo.init("rtmp://42.121.0.108:9122/RpServer", "S1304180142");
			}
			
		]]>  
	  
	  
		  
	 
	
	
		
			
		
		
	
	
		
			
			
			
			
			
			
			
			
			
			
			
		
	
	
		
			
		 
	
  

5.组件（FLVideo.mxml）

主要就是这两个文件，若需要源代码的话到这下载  http://download.csdn.net/detail/soanl/6922791

说明：在源代码bin-debug文件夹中有bx文件夹，这个文件夹就是上面那个html预览页，打开index.html就可以看到预览图，视频地址是测试的例子