您的位置：首页 > 移动开发 > IOS开发

Flex4.6 IOS(iphone/ipad)视频播放解决方案结合Html5

2014-10-13 19:49 656 查看

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)

<?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.set
4000
Timeout;

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，监听屏幕转向事件并处理

<?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的浏览器测试（谷歌浏览器等）

源码下载地址：http://files.cnblogs.com/loveFlex/Sample_Video.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Flex4.6 IOS(iphone/ipad)视频播放解决方案 结合Html5

Flex4.6 IOS(iphone/ipad)视频播放解决方案结合Html5