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 >这里是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 >
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 ></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的方法就介绍到这里,了解更多可以去官网