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

开门见山,我们先来了解一下SWFObject是什么?

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

  swfobject 的优点:

  •  该模块中的JS脚本能够自动检测客户端机器上各种主流浏览器对Flash插件的支持情况。使得插入Flash媒体资源尽量简捷、安全。
  •  它非常符合搜索引擎优化的原则。能够避免您的HTML、XHTML文件中出现object、embed等非标准标签,从而符合更加标准。

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

 

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

1 <script type="text/javascript" src="swfobject.js"></script> 
2 <script type="text/javascript">
3 swfobject.embedSWF("myflash.swf", "altContent", "300", "120", "9.0.0");
4 </script>
5 <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的详细方法:

 1 <script type="text/javascript" language="javascript">
2 var flashvars = {
3 id:"153322344343",
4 age:"25",
5 nickName:"ASV5"
6 }
7 var params = {
8 menu: "false",
9 allowFullscreen: "false",
10 allowScriptAccess: "always",
11 bgcolor: "#ffffff",
12 wmode: "window"
13 }
14 var attributes = {
15 id:"test"
16 }
17 swfobject.embedSWF("myflash.swf?home=beijing", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
18
19 </script>
20
21
22
23 <!-- 要被flash文件替换的标签位置 -->
24 <div id="altContent">
25 <h1>Flashvars Demo</h1><!-- 此处为该flash的相关名称或功能描述 -->
26 <p><a href="http://www.adobe.com/go/getflashplayer">安装最新的FlashPlayer</a></p>
27 </div>
28 <!-- /要被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的方法就介绍到这里,了解更多可以去官网

转载于:https://www.cnblogs.com/rialover/archive/2011/11/23/2260026.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值