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)

<?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测试）