将flex页面嵌入到jsp页面中-阿里云开发者社区

将flex页面嵌入到jsp页面中

2017-11-02 1251

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

在eclipse下新建一个web工程，将刚才下载的工程解压缩，然后将webtier文件夹下的内容覆盖服务器根目录下，如本人的：

注意要将lib文件夹和jars文件夹下的jar包添加到到类路径下，这样就算是整合完成了吧。

接着新建一个flex的mxml文件PlayVideo.mxml，将其放在WebContent下，代码如下所示：

[html]view plaincopyprint?
     
   
<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute"  
creationComplete="init()">  
<mx:Script>  
<![CDATA[ 
    import mx.controls.Alert; 
    private var rtmpURL:String="rtmp://localhost/oflaDemo"; 
    private var nc:NetConnection=new NetConnection(); 
    private var playerVideo:Video=new Video(); 
    [Bindable] 
    private var stream:NetStream; 
    private function init():void{ 
       playerVideo.width = 500; 
       playerVideo.height = 400; 
       connect(); 
    } 
    private function connect():void{ 
       nc.addEventListener(NetStatusEvent.NET_STATUS,netStatus); 
       nc.connect(rtmpURL); 
    } 
    private function netStatus(e:NetStatusEvent):void{ 
       trace(e.info.code); 
       if(e.info.code=="NetConnection.Connect.Success"){ 
           stream=new NetStream(nc); 
           playerVideo.attachNetStream(stream); 
           stream.play("chirisyu_ytywn.flv"); 
           container.addChild(playerVideo); 
       } 
    } 
]]>  
</mx:Script>  
    <mx:UIComponent id="container"></mx:UIComponent>   
</mx:Application>  

这个文件实现的是之前用Red5播放视频的减缩版。

接着新建一个jsp文件，如下所示：

[html]view plaincopyprint?
     
   
<%@page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>   
<%@taglib uri="FlexTagLib" prefix="mm" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>  
<head>  
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">  
<title>测试</title>  
<style type="text/css">  
    #mess{  
       position: absolute;  
       left: 250px;  
       top: 25px;  
       font-size: 22px;  
    }  
    #video{  
       position: absolute;  
       left: 250px;  
       top: 70px;  
    }  
</style>  
</head>  
<body>  
    <div id="mess">   
    这是测试视频：  
    </div>   
    <div id="video">   
       <mm:mxml source="PlayVideo.mxml" width="500" height="400">   
       </mm:mxml>   
    </div>   
     
</body>  
</html>  

可以看出将mxml文件引入jsp需要做的事是：

1.声明引入标签，如<%@taglib uri="FlexTagLib" prefix="mm"%>。如果web.xml文件中没有添加

[html]view plaincopyprint?
     
   
<taglib>  
        <taglib-uri>FlexTagLib</taglib-uri>   
        <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>   
</taglib>  