Flex【原創】IOS(iphone/ipad)視頻播放解決方案

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)

View Code

<?xml version="1.0" encoding="utf-8"?><!--VideoPlayer depend on HTML5============================Explain:this is a StageWebView object looad HTML5 with a VideoPlayerCode 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)

View Code

<?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)

View Code

<!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的瀏覽器測試（Google瀏覽器等）

 

最後，打包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>