您的位置:首页 > 移动开发 > Objective-C

Flash 与 JavaScript的交互:使用SWFObject来嵌入Flash文件

2011-11-23 15:31 323 查看
开门见山,我们先来了解一下SWFObject是什么?

  swfobject 是一个js类库,它封装了许多方法,用这些方法可以:
    1. 嵌入flash文件到页面中;
    2. 检查客户端的FlashPlayer环境;

  swfobject 的优点:

 该模块中的JS脚本能够自动检测客户端机器上各种主流浏览器对Flash插件的支持情况。使得插入Flash媒体资源尽量简捷、安全。

 它非常符合搜索引擎优化的原则。能够避免您的HTML、XHTML文件中出现object、embed等非标准标签,从而符合更加标准。

  swfobject的官方下载及文档地址:http://code.google.com/p/swfobject/;

再来看它的最简单的一种使用方式,直接上代码:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myflash.swf", "altContent", "300", "120", "9.0.0");
</script>
<div id="altContent">这里是flash内容,当前的浏览器没有安装或者FlashPlyaer版本不够高,请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>


  通过上面5句代码,就可以把一个Flash文件嵌入到html页面当中,是不是很爽!
  简单介绍一下上面代码的意思:
    第一行:在文件中引入 swfobject.js 这个文件;
    2 - 4行:执行swfobject封装的embedSWF方法把myflash.swf文件嵌入到页面中 id 为 altContent的标签的位置并替换该标签;
         设置flash的宽高分别为:300、120;
         告诉浏览器运行 myflash.swf 所需要最低点FlashPlayear版本为 9.0.0;如果当前FlashPlayer过低,或者没有安装,则swfobject.embedSWF方法不会替换altContent标签,提示用户去升级FlashPlayer;

介绍一下SwfObject嵌入flash的详细方法:

<script type="text/javascript" language="javascript">
var flashvars = {
id:"153322344343",
age:"25",
nickName:"ASV5"
}
var params = {
menu: "false",
allowFullscreen: "false",
allowScriptAccess: "always",
bgcolor: "#ffffff",
wmode: "window"
}
var attributes = {
id:"test"
}
swfobject.embedSWF("myflash.swf?home=beijing", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

</script>

<!-- 要被flash文件替换的标签位置 -->
<div id="altContent">
<h1>Flashvars Demo</h1><!-- 此处为该flash的相关名称或功能描述 -->
<p><a href="http://www.adobe.com/go/getflashplayer">安装最新的FlashPlayer</a></p>
</div>
<!-- /要被flash文件替换的标签位置 -->


  
  先定义flashvars、params 和 attributes 三个初始化Flash需要的变量:

    flashvars   一个json对象,为flash传递一些初始化信息;
    params   设置flash的一些渲染模式和背景颜色,缩放模式,右键菜单、是否允许flash访问js里面的方法等;
    attributes   设置嵌入flash完成时object标签的id,name等属性;

  现在我们详细介绍一下swfobject.embedSWF方法,该方法共需要10个参数:

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)

swfUrl(String ,必须的)指定SWF的URL。
id(String ,必须的)指定将会被Flash内容替换的HTML元素的id。
width(String,必须的)指定SWF的宽。
height(String,必须的)指定SWF的高。
version(String,必须的)指定你发布的SWF对应的Flash Player版本(格式为:major.minor.release)。
expressInstallSwfurl(String,可选)指定expressInstall.swf的URL并在客户端FlashPlyaer版本低于version指定的数值时激活Adobe express install自动升级客户端的FlashPlyaer。
flashvars( Object ,可选)用name:value对指定你的flashvars。
params(Object ,可选)用name:value对指定你的嵌套object元素的params。
Attributes(Object, 可选)用name:value对指定object的属性。
callbackFn(JavaScript function, 可选)定义一个在执行embedSWF方法后,嵌入flash成功或失败后都可以回调的js 函数


  对于不需要的参数可以省略,但是前五个参数是不能省略的;如果某个参数不需要,而其后面需要设置某个值的时候,请用 null 关键字占位,如:

  swfobject.embedSWF("swf/test.swf", "altContent", "100%", "100%", "9.0.0", null, flashvars, params, attributes);

下面说一下swfobject检测客户端环境的方法体现:

  1)<div id="altContent"></div>

  上面的例子我们可以看到在这个div里面还有一些关于你要嵌入的Flash的一些简单描述和一个最新FlashPlayer的链接地址。
  这个DIV很重要,它的作用就是在如果客户端没有安装FlashPlayer或者FlashPlayer的版本不够高,这段标签将不被替换,以达到提示用户这部门内容要安装FlashPlayer才能正确显示。

  2)swfobject.embedSWF方法里面的version参数;

  version参数告知了swfobject在满足那个Flahsplayer版本时才会替换上面的div标签,正确嵌入Flash文件,否则就不替换。

  3)swfobject.embedSWF方法里面的 expressInstallSwfurl 参数

  expressInstallSwfurl 参数是一个Adobe提供的用于自动升级FlashPlyaer的一个swf文件,当客户端安装了FlashPlayer 6+ 的版本,
  又达不到 verison参数描述的版本时,swfobject就会在页面里面显示这个expressinstall.swf文件,它会提醒你是否要自动升级FlashPlayer。

  另外,swfobject 还提供了两个检测FlashPlayer版本的方法:

    swfobject.getFlashPlayerVersion()
    返回一个包含了已安装Flash Player主要版本(major:Number)、次要版本、minor:Number)、发行版本(release:Number)的JavaScript对象。

    swfobject.hasFlashPlayerVersion(versionStr)
    返回一个Boolean值,表明特定版本的Flash插件是否已被安装; 如:swfobject.hasFlashPlayerVersion(“9.0.124”)

好了关于swfobject嵌入Flash的方法就介绍到这里,了解更多可以去官网
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: