1.SWFObject是什么?
- SWFObject 2提供两种优化flash播放器的嵌入方法:基于标记的方法和依赖于js的方法。
- SWFObject 2提供一个js的API,为嵌入SWF文件和获取Flash播放器的相关信息提供了一个完整的工具箱。
- 只用了一个很小的js文件 (10Kb / GZIPed: 3.9Kb)。
- 是SWFObject 1.5, UFO and the Adobe Flash Player Detection Kit的继承者。
- 拟统一所有现有的Flash播放器的嵌入方法,并提供了嵌入Adobe Flash Player内容新的标准
2.我们为什么要用SWFObject?
- 比现在其他的flash嵌入方式要灵活和更加优化。
- 给任何人提供了解决方案:不管你是html开发者还是flash或者js开发者,都有对应的方法可用。
- 打破了设定在供应商特定的标记,促进web标准和替代内容的使用。
- 使用不显眼的JavaScript和JavaScript最佳实践。
- 容易使用。
3.为什么SWFObject使用JavaScript?
SWFObject使用js来克服那些单独用标记无法解决的问题:
- 检测Flash播放器版本,并确定是否应该显示Flash内容或替代内容,以避免过时的Flash插件让Flash内容无法显示。
- 万一flash插件版本太低,通过dom操作可以显示默认的替换内容,给用户提供信息。(注意:如果flash插件没有安装,dom对象元素自动会显示替代内容)
- 提供选项,用于快速安装的Adobe下载最新的Flash Player
- 提供一个JavaScript API来执行常见的Flash播放器和Flash内容相关的任务
4.我应该使用静态的还是动态的方法发布?
SWFObject2提供两种不同的方法来嵌入Flash Player内容:
- 静态发布的方法用标准的标记嵌入flash内容和替代元素,并使用js来解决那些单独用标记无法解决的问题。
- 动态发布方法是基于标记的替代内容,通过js用flash来替换替代内容,前提是当前flash版本和js支持(像之前的 SWFObject版本和UFO)。
- 静态发布的优势:
- 促进实际制作符合标准的标记
- 最佳嵌入性能
- 嵌入Flash内容的机制,不依赖于脚本语言,所以flash内容可以被更多的人看到(兼容性更好)
- 如果你有Flash插件安装,但已禁用JavaScript或使用的浏览器不支持JavaScript,您将仍然能够看到你的Flash内容
- flash可以运行在对js支持非常糟糕的设备上,比如sony的psp。
- RSS阅读器等自动化工具能够抓到Flash内容
-
动态发布的优势:
-
它与脚本的应用程序很好地集成在一起,能够使动态变量(flashvars)
-
它避免了点击激活机制激活活动内容在Internet Explorer6/7和Opera9+。请注意,微软已经淘汰了其Internet Explorer浏览器的最活跃的内容
-
5.如何使用SWFObject的静态方法嵌入Flash Player内容?
步骤1:使用符合标准的标记嵌入Flash内容和替代内容
SWFObject的基础标记使用嵌套对象的方法(用专有的IE条件注释),确保仅标记手段的最优化跨浏览器支持,而作为符合标准和配套的替代内容。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <title>SWFObject - step 1</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 </head> 7 <body> 8 <div> 9 10 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> 11 <param name="movie" value="myContent.swf" /> 12 <!--[if !IE]>--> 13 <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> 14 <!--<![endif]--> 15 <p>Alternative content</p> 16 <!--[if !IE]>--> 17 </object> 18 <!--<![endif]--> 19 </object> 20 21 </div> 22 </body> 23 </html>
注:嵌套对象方法需要一个双对象定义(外部对象针对Internet Explorer和内针对所有其他的浏览器的对象),你需要定义你的对象属性和嵌套的param元素两次。
需要的属性:
- classid(只用于外层元素,值一直是: clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
- type(只用于内层元素,值一直是: application/x-shockwave-flas)
- data(只用于内层元素,定义swf的路径:data="myContent.swf")
- width(定义swf的宽度,内外都用到)
- height(定义swf的高度,内外都用到)
需要的参数:
- movie(只用于内层元素,定义swf的路径:<param name="movie" value="myContent.swf" />)
- 注意:我们建议不要使用codebase属性指向Adobe Flash插件安装程序的URL的服务器,因为这样是违法的,他限定了只能当前域来访问。我们建议在替代内容中放一个提示信息,这样用户会有更好的体验而不是下载flash。
你怎么使用HTML来配置你的Flash内容?
你能在标签中加下面的属性:
- id
- name
- class
- align
你能使用下面的参数:
- play
- loop
- menu
- quality
- scale
- salign
- wmode
- bgcolor
- base
- swliveconnect
- flashvars
- devicefont (more info)
- allowscriptaccess (more info here and here)
- seamlesstabbing (more info)
- allowfullscreen (more info)
- allownetworking (more info)
为什么你应该使用替代内容?
对象元素允许你在他里面放替换元素,在flash没有安装或者不被支持的时候会显示。他的内容同样也会被搜索引擎抓到,他是一个用于创建搜索引擎友好的内容的非常好的工具。总而言之,你应该使用替换内容,当你想让你创建的内容可以被没有装插件的用户访问,对搜索引擎友好,告诉访问者对应提示,这样会有更好的用户体验而不是直接去下载插件。
步骤2:包括JavaScript库在你的HTML页面的头部
SWFObject库是一个外部JavaScript文件。SWFObject一被加载就会被执行,一但dom元素加载完了就会执行dom操作,所有浏览器都支持他( IE, Firefox, Safari and Opera 9+),或者是onload事件被触发。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <title>SWFObject - step 2</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 7 <script type="text/javascript" src="swfobject.js"></script> 8 9 </head> 10 <body> 11 <div> 12 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> 13 <param name="movie" value="myContent.swf" /> 14 <!--[if !IE]>--> 15 <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> 16 <!--<![endif]--> 17 <p>Alternative content</p> 18 <!--[if !IE]>--> 19 </object> 20 <!--<![endif]--> 21 </object> 22 </div> 23 </body> 24 </html>
步骤3:用SWFObject库注册您的Flash内容,告诉SWFObject做什么
首先添加一个唯一的ID外部对象标记定义您的Flash内容,第二添加swfobject.registerObject的方法:
- 第一个参数(字符串,必需)指定标记中使用的ID。
- 第二个参数(字符串,必需)指定了你内容发布所需要的flash版本。它会激活Flash版本检测,以确定是否显示Flash内容或通过dom操作强制显示替代内容。Flash的版本号通常由major.minor.release.build四部分组成,但是SWFObject只识别前三个数字,所以 "WIN 9,0,18,0" (IE) 或者 "Shockwave Flash 9 r18" (其他浏览器)都会被翻译成 "9.0.18". 如果你只想测试主要版本,你可以省略次要和发行版本号,如“9”,而不是“9.0.0”。
- 第三个参数(字符串,可选),可用于启动Adobe快速安装,并指定您的快速安装SWF文件的URL。快速安装会显示一个标准化的Flash插件下载对话框来替代你的Flash内容,当所需的插件版本不可用。一个默认的expressInstall.swf文件被一起打包在项目中。它也包含了相应的expressInstall.fla和AS文件(在SRC目录),让你创建自己的自定义快速安装体验。请注意,快速安装只会触发一次(他第一次被调用),他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本,他会要求一个最小的尺寸是 310x137px。
- 第四个参数(js函数,可选)用来定义一个回调函数,当插件创建成功或者失败都可以调用该函数来处理一些事。
-
1 <script type="text/javascript"> 2 swfobject.registerObject("myId", "9.0.115", "expressInstall.swf"); 3 </script>
小提示:
- 用SWFObject HTML和js生成器来帮助你编写代码。
- 重复步骤1和3,把多个SWF文件嵌入到一个HTML页面
- 引用活动对象元素的最简单的方法是使用JavaScript API:swfobject.getObjectById(objectIdStr
6.如何使用SWFObject的动态方法嵌入Flash Player内容?
步骤1:使用符合标准的标记,创建替代内容
SWFObject动态嵌入的方法遵循渐进增强的原则,当有足够的js和flash插件支持的时候会用flash替代替换的内容。首先定义替代的内容,用一个id标记他。
步骤2:包括JavaScript库在你的HTML页面的头部
SWFObject库是一个外部JavaScript文件。SWFObject一被加载就会被执行,一但dom元素加载完了就会执行dom操作,所有浏览器都支持他( IE, Firefox, Safari and Opera 9+),或者是onload事件被触发。
步骤3:用JavaScript嵌入你的SWF
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)有5个必须的参数和5个可选的参数。
- swfUrl (字符串, 必须) 指定您的SWF的URL
- id (String, required) 指定包含替换元素的html元素的ID,能用你的flash的内容来替换
- width (String, required) 指定SWF的宽度
- height (String, required) 指定SWF的高度
- version (String, required)指定SWF 发布所需的flash播放器的版本 (格式 is: "major.minor.release" or "major")
- expressInstallSwfurl (String, optional)指定快速安装的路径,激活快速安装. 请注意,快速安装只会触发一次(他第一次被调用),他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本,他会要求一个最小的尺寸是 310x137px。
- flashvars (Object, optional) 指定需要传递给flash的变量(用键值对)
- params (Object, optional) 指定嵌入对象的参数(用键值对)
- attributes (Object, optional) 指定对象的属性(用键值对)
- callbackFn (JavaScript function, optional)能定义一个回调函数,不管调用flash创建成功或者失败都可以调用该函数
小提示:
您可以省略可选参数,只要你不破坏参数顺序。如果你不想使用某个参数但是想使用他下一个参数,可以把他的值设置为false,对于flashvars, params and attributes对象,也可以直接用空值{}。
如何配置flash?
您可以添加以下经常使用的可选属性的对象元素:
- id (NOTE: 如果没有定义会自动取替换元素容器的id)
- align
- name
- styleclass (see note about class)
- class
注意:class是ECMA4中保留的关键字,在ie中会报错,除非用引号把它括起来 (e.g. "class" or 'class')。 出于这个原因,swfobject的提供作为一种安全的替代语法类的styleClass关键字,如果你使用的styleClass,swfobject的会自动插入class。
1 var attributes = { 2 id: "myId", 3 align: "left", 4 styleclass: "myclass" 5 };
如果你宁愿用class代替styleClass,那么用引号括起来。
1 var attributes = { 2 id: "myId", 3 align: "left", 4 "class": "myclass" 5 };
你能使用下面可选的flash指定的参数:
- play
- loop
- menu
- quality
- scale
- salign
- wmode
- bgcolor
- base
- swliveconnect
- flashvars
- devicefont (more info)
- allowscriptaccess (more info here and here)
- seamlesstabbing (more info)
- allowfullscreen (more info)
- allownetworking (more info)
如何使用JavaScript对象来定义 flashvars, params and object's attributes?
最好使用对象表示法来定义对象:
1 <script type="text/javascript"> 2 3 var flashvars = {}; 4 var params = {}; 5 var attributes = {}; 6 7 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 8 9 </script>
可以用键值对的方式写:
1 var flashvars = { 2 name1: "hello", 3 name2: "world", 4 name3: "foobar" 5 };
也可以用".属性"的方式写:
1 var flashvars = {}; 2 flashvars.name1 = "hello"; 3 flashvars.name2 = "world"; 4 flashvars.name3 = "foobar";
也可以直接把参数内容加载swfobject.embedSWF()中。
1 <script type="text/javascript"> 2 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"}); 3 </script>
如果你不想使用一个可选的参数,你可以把它定义为false或一个空对象 var flashvars = false;var params = {};
FlashVars的对象是一个速记符号,为您的易用性。你可以忽略它,通过 params对象来指定你的flashvars。
1 <script type="text/javascript"> 2 var flashvars = false; 3 var params = { 4 menu: "false", 5 flashvars: "name1=hello&name2=world&name3=foobar" 6 }; 7 var attributes = { 8 id: "myDynamicContent", 9 name: "myDynamicContent" 10 }; 11 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 12 </script>
从SWFObject 1.5 迁移到 SWFObject 2 的注意点
- SWFObject 2不能向后兼容到SWFObject 1.5
- 目前首选在你的HTML页面的头部插入所有脚本块,增加到页面body中可能会产生冲突(比如flash替代替换内容),因为js代码执行被延后了。
- 库本身都是用小写的:swfobject,而不是SWFObject
- 方法只能通过库访问
- 此外,JavaScript API是完全不同的和更复杂的
- SWFObject 2替换整个替换标签的内容,包括所引用的HTML容器元素,成为flash内容,只要js可用,flash版本支持。然而, SWFObject 1.5只替换替换表情容器内的内容。如果你没有定义一个id属性,对象元素会自动继承包含元素中的id。
从UFO迁移到SWFObject 1.5 的注意点
- SWFObject 2替换整个替换标签的内容,包括所引用的HTML容器元素,成为flash内容,只要js可用,flash版本支持。然而, UFO只替换替换表情容器内的内容。如果你没有定义一个id属性,对象元素会自动继承包含元素中的id。
- UFO's setcontainercss 特征在 SWFObject 2 中没有被纳入。
SWFObject 2是不是支持MIME type application/xhtml+xml?
SWFObject的2不支持XML MIME类型,这是一个设计决定。有以下原因:
- 只有很少(不显着)web开发者使用
- 我们不能确定它走的方向,ie不支持他,其它主要浏览器厂商都瞄准了一个新的html解析的标准(html5),他与当前w3c解析的方式不同。
- 不支持他我们节省了大量的文件和努力。