Flex4.6 【原创】IOS(iphone/ipad)视频播放解决方案
Flex的video类对于视频播放在ios操作系统下表现出不兼容,采用调用ios源生播放器的思路,那么怎么调呢?
话说Html5 和Flex是竞争关系,这次利用Html5的video标签实现ios播放视频,因为ios下safari浏览器解析Html5页面的video标签时自动调出源生播放器,相信聪明的你已经明白了
环境:Flex4.6
1:首先明白Flex要做的事情就是在Mobile项目中加载Html5页面
Flex封装一个用来加载Html5的容器 (HTML5Video.mxml)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?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)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?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)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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测试)
源码下载地址:http://files.cnblogs.com/loveFlex/Sample_Video.rar
谢谢支持~
<!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>