以下代码经过android系统平板电脑和网页实际测试，转载请注明出处
最近在做一个任务，要求flex的手机项目嵌套html页面，并且能够播放视频flv和音频（我只用了mp3）这两个功能，在android平板电脑上经过测验，发现android不支持html页面的插件embed，最后警告笔者的研究，做了一个简单例子，效果如下：
实现步骤：这里播放flv文件是用dw的插入flv多媒体直接操作，声音文件为外置swf调用，具体代码如下
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="js/jquery-1.7.1.min.js" charset="utf-8"></script> <script language="javascript" src="js/popupWin.js" charset="utf-8"></script> <script language="javascript" src="js/artDialog.js?skin=blue" charset="utf-8"></script> <script language="javascript" src="js/iframeTools.js" charset="utf-8"></script> <title>测试页面</title> <style type="text/css"> body{ width:1260px; height:600px; text-align:center; font-size:12px; padding:0px; margin:0px; } a{ text-decoration:none; color:blue; } </style> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type="text/javascript" > $(function(){ $('a.click').click(function(){ $('embed').remove(); $('body').append('<embed src="mp3/yhs.mp3" autostart="true" hidden="true" loop="false">'); }); $('a.hover').mouseover(function(){ $('embed').remove(); $('body').append('<embed src="mp3/yhs.mp3" autostart="true" hidden="true" loop="false">'); }); }); </script> </head> <body> <!-- 显示边界 --> <div style="1260px; height:600px; background-image:url(images/bj.jpg); " align="center"> <!-- 视频播放 --> <div id="div_jxsp"> <a href="javascript:navWinPage('word1','shipin.html',430,350);" title="教学视频" id="word1">教学视频</a> </div> <!-- 声音播放 --> <div id="div_jxyp"> <a href="javascript:navWinPage('yinpin','yinpin.html',510,350);" title="教学音频" id="yinpin">教学音频</a> </div> </div> </body> </html>
yinpin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> body { background-color: #eeeeee; } object { margin: 50px; display: block; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" src="js/jquery-1.7.min.js"></script> <script language="javascript" src="js/jquery.jmp3.js" ></script> <title>无标题文档</title> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="40" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <param name="movie" value="singlemp3player.swf?file=yhs.mp3&showDownload=false" /> <param name="wmode" value="transparent" /> <embed wmode="transparent" width="400" height="40" src="singlemp3player.swf?file=yhs.mp3&showDownload=false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="40" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <param name="movie" value="singlemp3player.swf?file=yhs.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90" /> <param name="wmode" value="transparent" /> <embed wmode="transparent" width="300" height="40" src="singlemp3player.swf?file=yhs.mp3&autoStart=false&backColor=000000&frontColor=ffffff&songVolume=90" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="25" height="40" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <param name="movie" value="singlemp3player.swf?file=yhs.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&songVolume=30" /> <param name="wmode" value="transparent" /> <embed wmode="transparent" width="25" height="40" src="singlemp3player.swf?file=yhs.mp3&backColor=990000&frontColor=ddddff&repeatPlay=true&songVolume=30" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </div> </body> </html>
shipin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="405" height="324" id="FLVPlayer"> <param name="movie" value="FLVPlayer_Progressive.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/ssj_dxh&autoPlay=true&autoRewind=false" /> <param name="swfversion" value="8,0,0,0" /> <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="405" height="324"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=flv/ssj_dxh&autoPlay=true&autoRewind=false" /> <param name="swfversion" value="8,0,0,0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 --> <div> <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <script type="text/javascript"> swfobject.registerObject("FLVPlayer"); </script> </body> </html>
因为有其他js文件需要调用，笔者在这里直接将源码一起打包上传，希望对需要的朋友能有所帮助~
源码地址：http://115.com/file/bevck2xy#
html_example.rar
在flex手机项目调用的步骤如下：
1. 新建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" creationComplete="creationCompleteHandler(event)" title="教材实例"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ private function creationCompleteHandler(evt:Event):void { //这里必须要使用添加监听事件的办法解决stage还没有初始化的问题，参考解决： //http://www.cnblogs.com/yjmyzz/archive/2010/04/15/1712561.html addEventListener(Event.ADDED_TO_STAGE,AddedToStageHandler); } private function loadCompleteHandler(evt:Event):void { //加载完成的事件在这里进行处理 trace("完成的加载工作！"); } public function AddedToStageHandler(e:Event):void { var webView:StageWebView = new StageWebView(); webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight); webView.stage = this.stage; //加载远程文件的办法 webView.addEventListener(Event.COMPLETE, loadCompleteHandler); //webView.loadURL("http://www.sohu.com"); //加载本地文件的办法： //var testPath:String = File.applicationDirectory.nativePath; //var fPath:String = new File(new File(File.userDirectory.url + "/html_example/index.html").nativePath).url; webView.loadURL(File.userDirectory.url + "/html_example/index.html"); } ]]> </fx:Script> </s:View>
这里链接网页路径分为两种，一种是平板电脑本地文件，一种是网页文件，本地的连接写法为： “File.userDirectory.url”路径为平板电脑的SD卡跟路径，所以要将解压后的文件夹放入SD卡根目录下，如果要链接网页，可以直接写网页地址，都是经过测试的。
经过测试，在android系统的平板电脑和网页均可正常运行~