1.什么是SWFObject2?
SWFObject2:
提供两种优化的嵌入Flash Player的方法:一种基于标签的方法和一种依赖于Javascript的方法。
提供一套Javascript API,目的是提供一套完整的工具来嵌入SWF文件和获得Flash Player的相关信息。
只利用一个很小的Javascript文件(size:10Kb,GZIPed:3.9Kb)。
是SWFObject1.5、UFO和Adobe Flash Player Detection Kit的继承者。
准备整合所有已存的Flash Player嵌入方法,并且嵌入Adobe Flash Player内容提供一个新的标准。
2. 为什么应该使用SWFObject2?
SWFObject2:
比任何其他的Flash Player嵌入方法更完善更灵活。
为每个人提供一种解决方案:无论你是一个HTML、Flash或者Javascript开发者,你都能从中发现适合你的东西。
打破了使用浏览器专有标签的恶性循环,促进了web标准和替换内容(指Flash内容无法正常显示时需要显示的内容,使用替换内容通常是因为Flash插件没有安装或者Flash插件版本过低)的使用。
采用分离式的Javascript和最合理的Javascript实践。
容易使用
3. 为什么SWFObject2使用JavaScript?
SWFObject主要使用Javascript来解决一些仅靠标签无法解决的问题;它“
通过探测Flash Player的版本,来决定显示Flash内容还是替换内容,避免了过时的Flash插件影响Flash内容的正常显示。
提供了恢复到替换内容的功能:当Flash内容因为过时的Flash Player而无法正常显示时,SWFObject通过DOM操作用替换内容代替Flash内容。(注意:如果Flash Player没有安装,HTML Object元素会自动被替换内容所替代。)
提供了一个选择来使用Adobe Express Install下载最新版本的Flash Player。
通过使用专有的embed元素的办法,解决老版的Webkit引擎会忽略嵌套在object元素中的param元素问题。提供了一个详尽的Javascript API来完成一些常见的与Flash Player和Flash内容相关的操作。
4. 静态还是动态?
SWFObject提供了两种不同的方法来嵌入Flash内容:
静态发表方法用符合标准的标签来嵌入Flash内容和替换内容。并且用Javascript来解决一些仅仅靠标签无法解决的问题。
动态发表方法基于用标准标签插入替换内容,如果浏览器安装了最低版本要求的Flash插件并且拥有足够的Javascript支持,SWFObject会用Javascript将替换内同换成Flash内容。(和以前版本的SWFObject和UFO很相似)
静态发表方法优势在于:
促进对符合标准标签的创作
插入Flash内容的机制不再依赖脚本语言,所以你的Flash内容有更多”听众“
如果你的安装了Flash插件,但是javascript禁用了或者浏览器并不支持javascript,你仍然能看到你的Flash内容
Flash能够在那些对javascript支持较弱的设备上运行,例如sony psp
像RSS阅读器这样的自动化的工具能偶读取Flash内容
动态发表方法优势在于:
避免了通过点击激活的机制来激活Flash内容
它能很好的与基于脚本的应用整合
5. 怎么用SWFObject2的静态发表方法来嵌入Flash内容?
1). 使用符合标准的标签同事嵌入Flash内容和替换内容。
SWFObject的基本标签使用了嵌套object标签的方法(带有专用于Internet Explorer的条件注释)http://www.alistapart.com/articles/flashembedcagematch/ 来保证仅通过标签实现最优化的跨浏览器支持,同时使其符合标准,并且支持替换内容 http://www.bobbyvandersluis.com/flashembed/testsuite/ :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject - step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html>
注意:嵌套object标签要求两次定义object标签(外层object为Internet Explorer定义,内层object为其他浏览器定义),所以你也需要两次定义你的object属性和嵌套的param元素。
必须的属性:
classid(只需外层object元素定义,值总是等于clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
type(只需内层object元素定义,值总是等于"application/x-shockwave-flash")
width(内外层object都需要定义,指定这个SWF的宽)
height(内外层object都需要定义,指定这个SWF的高)
必须的param元素:
movie(只需为外层object元素定义,指定SWF文件的URL)
注意:我们建议不适用codebase属性来指向Adobe服务器上的Flash插件安装地址,因为它违背了只将访问限制在当前文档域的规范。我们推荐使用带有精巧提示信息的替换内容,这样用户将获得更好的Flash插件下载体验。
怎么使用HTML来配置你的Flash内容?
你可以为Object元素添加下面这些常用的可选属性http://www.w3schools.com/tags/tag_object.asp:
id
name
class
align
你可以使用下面这些专用于Flash的可选param元素http://kb2.adobe.com/cps/127/tn_12701.html:
play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont
allowscriptaccess http://kb2.adobe.com/cps/164/tn_16494.html
seamlesstabbing
allowfullscreen
allownetworking
为什么应该使用替换内容?
object元素允许你将替换内容嵌套其中,如果Flash插件没有安装或者不支持那么这些替换内容就会被显示出来,由于这些替换内容能被搜索引擎很好的识别,这使它成为一个创建对搜索引擎友好的网页内容的好工具。总之,当你想创建一个能让不使用插件的用户也可以访问的网页内容,创建一个对搜索引擎友好的网页内容,或者告诉他们能通过下载Flash插件获得更好的用户体验,你就应该使用替换内容。
2). 在HTML的head标签中包括SWFObject的Javascript类库
SWFObject的Javascript类库由一个外部Javascript文件组成。SWFObject会在外部Javascript文件被加载后立即被执行,并且对于那些支持DomLoad事件的浏览器,例如IE、FireFox、Safari和opera 9+,SWFObject将会在DOM被加载完成后完成所有的DOM操作,而浏览器不支持DomLoad事件,所有DOM操作将会在页面的load事件被触发执行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject - step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> </head> <body> <div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html>
3). 用SWFObject类库注册你的Flash内容并告诉SWFObject怎么样处理这些内容
首先为Flash内容的外层object标签添加一个独特的id属性,然后添加swfobjcet.registerObject方法:
第一个参数(string,必须的)指定object标签中使用的id
第二个参数(string,必须的)指定你发布的Flash内容对应的Flash Player版本,它将激活Flash 版本监测,用来决定是显示Flash内容还是通过一些DOM操作来显示替换内容。表示Flash版本的数字通常由四部分组成。
第三个参数(string,可选的)可以用来激活Adobe express install,并指定express install swf文件的URL,Express install将会在所需要的Flash Player版本不可用的时候,显示一个标准的Flash插件下载对话框,用来替代你的Flash内容。一个默认的expressInstall.swf文件被一起打包到项目中,项目中也包含了expressInstall.fla和其他AS源文件。你可以用它们创建自定义歌express install体验,express install只会被触发一次,只在win和mac平台上Flash Player6.065或更高版本所支持。
第四个参数(javascript函数,可选的)可以用定义当嵌套一个SWF文件成功或失败的回调函数。http://code.google.com/p/swfobject/wiki/api
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject - step 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myId", "9.0.115", "expressInstall.swf"); </script> </head> <body> <div> <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> <!--<![endif]--> <p>Alternative content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> </body> </html>
6. 怎么用SWFObject2的动态发表方法来嵌入Flash内容?
1). 用符合标准的标签来创建替换内容
SWF的动态嵌入方法遵循渐进增强的原则,当浏览器对javascript和Flash插件有足够的支持的时候,SWFObject会用Flash内容替换HTML内容。首先定义你的替换内容,并且为它添加一个id属性:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject dynamic embed - step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id="myContent"> <p>Alternative content</p> </div> </body> </html>
2). 在HTML页面的head变迁标签中包括SWFObject的Javascript类库
同静态发表方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject dynamic embed - step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> </head> <body> <div id="myContent"> <p>Alternative content</p> </div> </body> </html>
3). 用Javascript嵌入你的swf
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)有5个必须参数,四个可选参数:
swfUrl(String,必须的)指定SWF的URL
id(String,必须的)指定将会被Flash内容替换的HTML元素的id
width(sting,必须的)宽
height(Sting,必须的)高
version(String,必须的)指定你发布的SWF对应的Flash Player版本
expressInstallSwfurl(String,可选的)指定express install SWF的URL并激活Adobe express install
flashvars(String,可选的)用name:value对指定
params(String,可选的)用name:value对指定
attributes(String,可选的)用name:value指定
注意:在不破坏参数顺序的情况下,你可以忽略可选参数。如果你不想使用一个可选参数,但是会使用后面的一个可选参数,你可以简单的传入false作为参数的值。对于flashvas,params,attributes这些javascript对象来说,你可以相应传入一个空对象{}。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>SWFObject dynamic embed - step 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0"); </script> </head> <body> <div id="myContent"> <p>Alternative content</p> </div> </body> </html>
怎样配置Flash内容?
你可以为你的ojbect元素添加下面这些常用的可选属性
id
name
styleclass
align
play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont
allowscriptaccess
allowfullsreen
allownetworking
怎么用Javascript对象来定义你的flashvars, params attributes?
你最好用对象的字面量来定义Javascript对象,例如:
<script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); </script>
你可以在定义对象的时候添加你的name:value对(注意:确保不要在对象中的最后一个name;value对后面加上逗号):
<script type="text/javascript"> var flashvars = { name1: "hello", name2: "world", name3: "foobar" }; var params = { menu: "false" }; var attributes = { id: "myDynamicContent", name: "myDynamicContent" }; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); </script>
或者在对象创建之后用点号添加属性和值:
<script type="text/javascript"> var flashvars = {}; flashvars.name1 = "hello"; flashvars.name2 = "world"; flashvars.name3 = "foobar"; var params = {}; params.menu = "false"; var attributes = {}; attributes.id = "myDynamicContent"; attributes.name = "myDynamicContent"; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); </script>
也可以写成:
<script type="text/javascript"> swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"}); </script>
如果你不想使用一个参数,你可以将它定义为false或者一个空对象。
<script type="text/javascript"> var flashvars = false; var params = {}; var attributes = { id: "myDynamicContent", name: "myDynamicContent" }; swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); </script>
7. 从SWFObject1.5迁移到SWFObject2的注意事项
SWFObject2不向后兼容SWFObject1.5
现在更倾向于在HTML页面的head标签中插入所有的脚本文件
现在的类库使用的是小写
现在只能通过类库(的类)来访问方法(即静态方法),而不是从SWFObject1.5中那样通过实例来访问。
API跟以前完全不同了
如果浏览器对Javascript和Flash有足够的支持,SWFObject2将会将整个替换内容,包括引用的HTML容器元素,替换为Flash内容,而不是像SWFObject1.5那样,只把被引用容器里面的内容替换为Flash内容,你可以这样转移你的CSS规则:为你的Flash内容定义与替换内容的容器元素相同的id(前者将替换后者,所以你的id不会重复)。
8. 从UFO迁移到SWFObject2的注意事项
如果浏览器对Javascript和Flash有足够的支持,SWFObject2将会将整个替换内容,包括引用的HTML容器元素,替换为Flash内容,而不是像UFO那样,只把被引用容器里面的内容替换为Flash内容,你可以这样转移你的CSS规则:为你的Flash内容定义与替换内容的容器元素相同的id(前者将替换后者,所以你的id不会重复)。
UFO的setcontainercss特性没有合并到SWFObject2中。
9. SWFObject支持MIME类型applicaiton/xhtml+xml吗?
出于设计上的考虑,SWFObject不支持MIME类型。
不提供支持的理由很多:
只有很少一部分web开发者使用它
我们不确定那是否是今后发展的方向。Internet Explorer并不支持它,而其它主流的浏览器将它们的目标定在了一种新的HTML解析标准,而这将偏离目前W3C所提倡的将HTML解析为XML。
考虑到节省文件大小,以及时间、精力
SWFObject2
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.