Flex的video类对于视频播放在ios操作系统下表现出不兼容，采用调用ios源生播放器的思路，那么怎么调呢？
话说Html5 和Flex是竞争关系，这次利用Html5的video标签实现ios播放视频，因为ios下safari浏览器解析Html5页面的video标签时自动调出源生播放器，相信聪明的你已经明白了
环境：Flex4.6
1：首先明白Flex要做的事情就是在Mobile项目中加载Html5页面
Flex封装一个用来加载Html5的容器 (HTML5Video.mxml)
<?xml version="1.0" encoding="utf-8"?> <!-- VideoPlayer depend on HTML5 ============================ Explain:this is a StageWebView object looad HTML5 with a VideoPlayer Code by: yaoyf 2012-04-28 --> <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="0xEEEEEE" width = "100%" height = "100%" addedToStage="callLater(addedToStageHandler)"> <fx:Script> <![CDATA[ import flash.utils.setTimeout; import mx.events.FlexEvent; /**this is a StageWebView**/ private var webView:StageWebView; /**the video‘s url**/ [Bindable]public var videourl:String; private var isShow:Boolean = true; private var rect:Rectangle; protected function addedToStageHandler():void { webView = new StageWebView(); webView.stage = this.stage; webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE,onLocationChange); webView.addEventListener(Event.COMPLETE,onComplete); webView.addEventListener(ErrorEvent.ERROR,onError); webView.loadURL(videourl); } protected function onComplete(event:Event):void { trace("onComplete : " + event); } protected function onError(event:ErrorEvent):void { trace(event.text); } protected function onLocationChange(event:Event):void { trace("url located : " + videourl); if(isShow){ webView.viewPort = rect; } isShow = false; } public function redrawRectangle(_x:Number , _y:Number , _width:Number , _height:Number):void { rect = null; drawRectangle(_x , _y , _width , _height); if(!webView)return; webView.viewPort = rect; } private function drawRectangle(_x:Number , _y:Number , _width:Number , _height:Number):void{ rect = new Rectangle( _x, _y, _width, _height); } ]]> </fx:Script> <fx:Declarations> </fx:Declarations> </s:SkinnableContainer>
2：第一视图：传递视频url，监听屏幕转向事件并处理 (Sample_VideoView.mxml)
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Video" backgroundColor="0x030303" xmlns:video="views.video.*" actionBarVisible="true" addedToStage="callLater(addedToStageHandler)"> <fx:Declarations> </fx:Declarations> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import views.video.HTML5Video; [Bindable]public var vdoUrl:String = "http://10.4.6.117:8080/video/video.jsp?videourl=2.mp4"; private function onOrientationChange(event:StageOrientationEvent):void { this.orientationChanged(event.afterOrientation); } protected function addedToStageHandler():void { stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE,onOrientationChange); this.orientationChanged(stage.orientation); } private function orientationChanged(orientation:String):void { html5_video.redrawRectangle(0, this.actionBarVisible == true ? 45 : 0,this.width,this.height); } ]]> </fx:Script> <video:HTML5Video id="html5_video" videourl="{vdoUrl}" horizontalCenter="0" verticalCenter="0"/> </s:View>
3：部署一个jsp页面到Tomcat
jsp页面代码：(video.jsp)
<!doctype html>
<head>
<meta charset=utf-8>
<title>HTML5 Video Player</title>
<style>
body{
margin-top:10%;
color:#EEEEEE;
}
</style>
</head>
<body id=home bgcolor="#030303">
<center>
<video id=home_video controls="controls" autoplay="autoplay" loop="loop" preload="auto" width=600 height=480>
<source src="<%=request.getParameter("videourl")%>" type="video/mp4; codecs=‘avc1.42E01E, mp4a.40.2‘"/>
Your browser does not support the video tag.
</video>
</center>
</body>
</html>
部署：
我本机的请求地址：http://10.4.6.117:8080/video/video.jsp?videourl=2.mp4
先用支持Html5的浏览器测试（谷歌浏览器等）
最后，打包Flex项目到ios设备上（我这里用的ipad测试）