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之HTML5视频播放解决方案

最新文章

热门文章