flex jsp html5,Flex之HTML5视频播放解决方案

Flex的video类对于视频播放在ios操作系统下表现出不兼容，采用调用ios源生播放器的思路，那么怎么调呢？

话说Html5 和Flex是竞争关系，这次利用Html5的video标签实现ios播放视频，因为ios下safari浏览器解析Html5页面的video标签时自动调出源生播放器，相信聪明的你已经明白了

环境：Flex4.6

1：首先明白Flex要做的事情就是在Mobile项目中加载Html5页面

Flex封装一个用来加载Html5的容器 (HTML5Video.mxml)

private varwebView:StageWebView;/**the video's url**/[Bindable]public varvideourl:String;private var isShow:Boolean = true;private varrect:Rectangle;

protectedfunction addedToStageHandler():void{

webView= newStageWebView();

webView.stage= this.stage;

webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE,onLocationChange);

webView.addEventListener(Event.COMPLETE,onComplete);

webView.addEventListener(ErrorEvent.ERROR,onError);

webView.loadURL(videourl);

}

protectedfunction onComplete(event:Event):void{

trace("onComplete : " +event);

}

protectedfunction onError(event:ErrorEvent):void{

trace(event.text);

}

protectedfunction onLocationChange(event:Event):void{

trace("url located : " +videourl);if(isShow){

webView.viewPort=rect;

}

isShow= false;

}public function redrawRectangle(_x:Number , _y:Number , _Number , _height:Number):void{

rect= null;

drawRectangle(_x , _y , _width , _height);if(!webView)return;

webView.viewPort=rect;

}private function drawRectangle(_x:Number , _y:Number , _Number , _height:Number):void{

rect= newRectangle( _x, _y, _width, _height);

}

]]>

2：第一视图：传递视频url，监听屏幕转向事件并处理 (Sample_VideoView.mxml)

[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);

}

protectedfunction 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);

}

]]>

3：部署一个jsp页面到Tomcat

jsp页面代码：(video.jsp)

HTML5 Video Player

margin-top:10%;

color:#EEEEEE;

}

" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"/>

Your browser does not support the video tag.