如何使用swfobject（中文版）

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 

　　你能使用下面的参数:

　　为什么你应该使用替代内容？
　　对象元素允许你在他里面放替换元素，在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个可选的参数。
  1. swfUrl (字符串, 必须) 指定您的SWF的URL
  2. id (String, required) 指定包含替换元素的html元素的ID,能用你的flash的内容来替换
  3. width (String, required) 指定SWF的宽度
  4. height (String, required) 指定SWF的高度
  5. version (String, required)指定SWF 发布所需的flash播放器的版本 (格式 is: "major.minor.release" or "major")
  6. expressInstallSwfurl (String, optional)指定快速安装的路径，激活快速安装. 请注意，快速安装只会触发一次（他第一次被调用），他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本，他会要求一个最小的尺寸是  310x137px。
  7. flashvars (Object, optional) 指定需要传递给flash的变量（用键值对）
  8. params (Object, optional) 指定嵌入对象的参数（用键值对）
  9. attributes (Object, optional) 指定对象的属性（用键值对）
  10. 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指定的参数：
如何使用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 的注意点
  1. SWFObject 2不能向后兼容到SWFObject 1.5
  2. 目前首选在你的HTML页面的头部插入所有脚本块，增加到页面body中可能会产生冲突（比如flash替代替换内容），因为js代码执行被延后了。
  3. 库本身都是用小写的：swfobject，而不是SWFObject
  4. 方法只能通过库访问
  5. 此外，JavaScript API是完全不同的和更复杂的
  6. SWFObject 2替换整个替换标签的内容，包括所引用的HTML容器元素，成为flash内容，只要js可用，flash版本支持。然而， SWFObject 1.5只替换替换表情容器内的内容。如果你没有定义一个id属性，对象元素会自动继承包含元素中的id。
从UFO迁移到SWFObject 1.5 的注意点
  1. SWFObject 2替换整个替换标签的内容，包括所引用的HTML容器元素，成为flash内容，只要js可用，flash版本支持。然而， UFO只替换替换表情容器内的内容。如果你没有定义一个id属性，对象元素会自动继承包含元素中的id。
  2. UFO's setcontainercss 特征在 SWFObject 2 中没有被纳入。

SWFObject 2是不是支持MIME type application/xhtml+xml?

SWFObject的2不支持XML MIME类型，这是一个设计决定。有以下原因：
  1. 只有很少（不显着）web开发者使用
  2. 我们不能确定它走的方向，ie不支持他，其它主要浏览器厂商都瞄准了一个新的html解析的标准（html5），他与当前w3c解析的方式不同。
  3. 不支持他我们节省了大量的文件和努力。

参考：https://code.google.com/p/swfobject/wiki/api

posted @ 2013-10-17 12:39  snowinmay  阅读(45337)  评论(2)  编辑  收藏  举报