swfobject加载flash

SWFObject:基于Javascript的Flash媒体版本检测与嵌入模块

原文：SWFObject:JavascriptFlashPlayerdetectionandembedscript

翻译：Awflasher.com

汉化地址：http://www.awflasher.com/flash/articles/swfobj.htm-更新到SWFObject1.5官方文档(Updatedto1.5@070318)

SWFObject是一个用于在HTML中方面插入AdobeFlash媒体资源（*.swf文件）的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。

（即：通过text/html应答页面，而非application/xhtml+xml）

请注意:由于法律原因，FlashObject已经更名为SWFObject，详见这里。

内容导读

*新功能

*实现原理

*SWFObject范例

*在SWFObject中应用ExpressInstall

*下载

*独特优势

*常见问题

新功能

详细的更新记录可以在SWFObject1.5blogpost这里找到。

实现原理

[对于急切需要下载的用户点击这里直接观看JS代码]

SWFObject的使用是非常简单的，只需要包含swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Flash媒体资源了。下面是一个最简单的范例：

<scripttype="text/javascript"src="swfobject.js"></script>

<divid="flashcontent">

ThistextisreplacedbytheFlashmovie.

</div>

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100","7","#336699");

so.write("flashcontent");

</script>

让我们看看这些代码是如何工作的

<divid="flashcontent">[...]</div>

首先，我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换，当客户端没有安装Flash播放器的时候，这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

varso=newSWFObject(swf,id,width,height,version,background-color[,quality,xiRedirectUrl,redirectUrl,detectKey]);

创建一个新的SWFObject实例，并且传入一下参数:

*swf-SWF文件路径

*id-您为这个SWF文件分配的id值，它将用于给embed与object标签设定name属性，以便于可以支持swliveconnect的功能，如动态传入变量

*width-宽度

*height-高度

*version-FlashPlayer需要的版本号，它可以详细到'主版本号.小版本号.细节'，例如："6.0.65"。一般地，我们只需传入主版本即可，例如："6"。

*background-color-Flash资源的背景色，16进制格式

此外，还有如下可选参数:

*quality-画面质量，默认为"high"。

*xiRedirectUrl-详见ExpressInstall相关

*redirectUrl-没有安装相应版本的播放器后自动跳转的目标地址

*detectKey-这是当忽略检测时，SWFObject将去url地址中查找的变量，默认值为“detectflash”，后续有详细介绍

so.write("flashcontent");

将Flash资源应用到DOM里，在浏览器显示出来。

细节

SWFObject的灵活性非常好。您完全可以事先写好HTML的其他部分，最后再回过头来添加Flash内容。这样可以确保在客户端没有Flash的情况下，用户不会一无所获；也可以确保针对搜索引擎，做了什么样的关键词优化。您完全不用像以前那样担心客户端的各种状况

SWFObject兼容当前各种主流浏览器，如：PC上的IE5/5.5/6,Netscape7/8,Firefox,Mozilla,andOpera。Mac上的IE5.2,Safari,Firefox,Netscape6/7,Mozilla,andOpera7.5+，各种浏览器的后续版本也会继续支持

SWFObject检测Flash播放器版本从3开始到最新的版本号，而且也消灭了IE中“激活”的麻烦。这里有相关背景。

SWFObject可以方便地检查版本细节，例如我们需要v.6.0r65(or6,0,65,0)来处理SWF资源，就可以添加如下代码:

varso=newSWFObject("movie.swf","mymovie","200","100","6.0.65","#336699");

SWFObject的版本检测可以人工忽略。如果在特定环境下您不希望SWFObject检测版本号，那么只需要传递一个参数在HTML页面中，就可以了。SWFObject可以捕获这个参数并且跳过检测，直接写入Flash嵌入代码到DOM中。用于忽略版本检测的变量名是“detectflash”，以下是一个例子：

<ahref="mypage.html?detectflash=false">Bypasslink</a>

SWFObject范例

以上我们接触到的范例都最基础的，接下来我们列举一些其他功能，尤其是传入参数、变量这些使用频率较高的行为。

传入Flash内联参数的简单范例

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100%","7","#336699");

so.addParam("quality","low");

so.addParam("wmode","transparent");

so.addParam("salign","t");

so.write("flashcontent");

</script>

这里可以看到Flash支持的内联参数列表：fulllistofthecurrentparametersandtheirpossiblevalues（adobe.com官方资源）

采用"Flashvars"参数传入变量

用Flashvars是在预加载Flash时传入数据的最佳做法，语法格式与GET变量串非常类似，如：variable1=value1&variable2=value2&variable3=value3SWFObject帮助您将这项工作变得更加明确化

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100","7","#336699");

so.addVariable("variable1","value1");

so.addVariable("variable2","value2");

so.addVariable("variable3","value3");

so.write("flashcontent");

</script>

这些变量将会保存在_root这个MovieClip对象里。

SWFObject还可以方便地直接从URL中接受参数传入Flash中，例如你有这样一个URL：http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以轻松获取这些参数，并将它们传入Flash，例如：

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100","7","#336699");

so.addVariable("variable1",getQueryParamValue("variable1"));

so.addVariable("variable2",getQueryParamValue("variable2"));

so.write("flashcontent");

</script>

getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。这里是一个采用SWFObject的应用程序，其中用到了location.hash对象：链接地址

在SWFObject中应用ExpressInstall（利用官方自动升级接口）

SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!)，这样用户完全不用离开您的网页就能完成播放器的升级了。

首先，上传官方的expressinstall.swf到您的服务器上，然后使用useExpressInstall方法指定这个swf文件的地址就可以了，例如：

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100","8","#336699");

so.useExpressInstall('expressinstall.swf');

so.write("flashcontent");

</script>

您可以安装一个低版本的Flash播放器然后访问这个页面看到效果

在SWFObject原文件压缩包中您可以找到具体的使用细节，您可以自己定制ExpressInstall的流程。

如果您的Flash影片在弹出窗口中，或者您希望用户在完成了ExpressInstall后重定向到其他地址，你可以采用xiRedirectUrl属性，来自动完成这一步骤。例如：

<scripttype="text/javascript">

varso=newSWFObject("movie.swf","mymovie","200","100","8","#336699");

so.useExpressInstall('expressinstall.swf');

so.setAttribute('xiRedirectUrl','http://www.example.com/upgradefinished.html');//mustbetheabsoluteURLtoyoursite

so.write("flashcontent");

</script>

下载

SWFObject基于MITLicense，您可以免费任意使用。

下载SWFObject1.5-Zip文件,包含swfobject.js和其他范例。

更多链接：

*标准Flash嵌入-符合XHTML1.0Strict.*

*全屏Flash嵌入-符合XHTML1.0Strict.*

*含ExpressInstall的标准Flash嵌入-从6.0.65起的FlashPlayer才支持此功能

*页面全部是text/html格式，不是application/xhtml+xml.

更多问题可以访问我们的论坛：SWFObject论坛!

独特优势

多年以来，各种各样的Flash播放器版本检测代码层出不穷，包括嵌入脚本也有许多。我们在这一部分针对流行的几种方法进行一个比较。

1)Adobe官方做法

这就是经典的Object标签和Embed标签配合做法，也是目前最常用的做法：

<objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"

width="550"height="400"id="Untitled-1"align="middle">

<paramname="allowScriptAccess"value="sameDomain"/>

<paramname="movie"value="mymovie.swf"/>

<paramname="quality"value="high"/>

<paramname="bgcolor"value="#ffffff"/>

<embedsrc="mymovie.swf"quality="high"bgcolor="#ffffff"width="550"

height="400"name="mymovie"align="middle"allowScriptAccess="sameDomain"

type="application/x-shockwave-flash"pluginspage="http://www.adobe.com/go/getflashplayer"/>

</object>

虽然是目前最常用的方法，但仍然有一些问题。

*缺乏播放器版本检测没有播放器插件版本检测，用户会获得非常糟糕的体验，他们会在不知情的情况下看到ActiveX插件安装入口，这样会导致大部分用户离开。而且，用低版本播放器播放高版本的swf文件，会导致更多潜在问题，而用户会将一切问题归咎于您的产品

*Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容

*不符合XHTML规范-在HTML和XHTML中都没有embed标签HTMLorXHTML。因为object标签在不同浏览器中的诡异表现，我们不得不用embed标签来完善最终效果。

2)仅采用Object标签/Flashsatay

这种方法在2002年的AListApartarticle出现之后开始大面积流行，这里有两个例子：

'仅含Object标签'

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"

width="300"height="120">

<paramname="movie"value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf">

<paramname="quality"value="high">

<paramname="bgcolor"value="#FFFFFF">

<!--[if!IE]><-->

<objectdata="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"

width="300"height="120"type="application/x-shockwave-flash">

<paramname="quality"value="high">

<paramname="bgcolor"value="#FFFFFF">

<paramname="pluginurl"value="http://www.adobe.com/go/getflashplayer">

FAIL(thebrowsershouldrendersomeflashcontent,notthis).

</object>

<!--><![endif]-->

</object>

Flashsatay

<objecttype="application/x-shockwave-flash

data="c.swf?path=movie.swf"

width="400"height="300">

<paramname="movie"

value="c.swf?path=movie.swf"/>

<imgsrc="noflash.gif"

width="200"height="100"alt=""/>

</object>

*可用性问题-采用FlashSatay的话，一些屏幕阅读器会忽略swf内容.

*Eolas专利纠纷导致IE的近期发行版中需要进行一次“激活”点击才可以完成和Flash内容的交互。详细内容

*缺乏播放器版本检测没有播放器插件版本检测，用户会获得非常糟糕的体验，他们会在不知情的情况下看到ActiveX插件安装入口，这样会导致大部分用户离开。而且，用低版本播放器播放高版本的swf文件，会导致更多潜在问题，而用户会将一切问题归咎于您的产品

*早期的的Safari会忽略param标签-在这些版本：2.0(Tiger)或者1.3(Panther)或者可能1.2.8(前Panther)之前，Safari完全忽略param标签。这将会让你的Flashvars等参数无法传入。

3)'smallflashmovieontheindexpage'检测方法

这个方法会通过在首页放一个swf文件去访问$version变量来返回版本信息。

问题在于：

*内页无检测-内页如果不放着这个swf就无法检测

*“激活”问题

*不符合HTML或者XHTML规范

*影响搜索引擎索引排名

4)Adobe官方FlashPlayerDetection模块

Adobe官方这个模块非常不错，然而仍然有一些不足，它采用两种方法来检测

1.Flash自身检测，如上面提到的"smallFlashmovieontheindexpage"-缺点已经提过了

2.Javascript-混乱的代码让你的HTML变得非常难以维护

深入讨论在这里。

5)用纯粹的JS来检测、嵌入

这种方法看起来不错，但是仍然缺乏规范，而且消耗开发成本

*检测不够完善-通常只能检测到当前的Flash播放器发行版，而且升级也需要手工参与

*增加了更多代码-难以维护的DOM结构

*解决方案太笨重-SWFObject进行了多次优化，非常轻量

常见问题

这里进入论坛可以与其他用户交流

问.到底什么是'IE的激活内容升级'我听说过这件事情，SWFObject能应对它么？

答.可以，更多详细信息可以看：这里。

问.在Flash资源加载前，相关区域的内容会有闪烁(仅IE有)

答.这与FOUCbug有关。

问.用SWFObject嵌入多个SWF该怎么做?

答.只要给每一个HTML结点唯一的id就可以了。

问.如何使SWFObject兼容Netscape4.x?

答.这条评论包含相关信息。

问.我如何在blog中使用SWFObject?

答.这里有针对WordPress的插件：这里。

问.SWFObject是否可以与Dreamweaver、Golive协同工作?

答.这里可以得到一个Dreamweaver扩展在CommunityMX。目前还没有GoLive扩展。

问.哪里可以找到其他语言的翻译?

答.法语,瑞典语,意大利语,德语,西班牙语,波兰语(部分),日语,葡萄牙语,和芬兰语。

问.有支持FlashIDE的发布插件么？

答.有！你可以在这里得到：FluidFlashBlog。

问.谁在使用SWFObject/FlashObject?

答.这些网站：TheLibraryofCongress,Adobe.com(制定的轻量版本),Amazon.com,Windows.com,YouTube.com,skype.com,Snapple.com,包括AdobePhotoshop(在Flash画廊中的)和大量其他的网站.ColinMoock也推荐这种解决方案。

http://www.awflasher.com/flash/articles/swfobj.htm

TobyBoudreaux给了我大量的建议，让我的代码更加快捷可靠。