如何使用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条件注释），确保仅标记手段的最优化跨浏览器支持，而作为符合标准和配套的替代内容。

 <!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>

　　注：嵌套对象方法需要一个双对象定义（外部对象针对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事件被触发。

 <!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做什么

首先添加一个唯一的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函数，可选）用来定义一个回调函数，当插件创建成功或者失败都可以调用该函数来处理一些事。

 <script type="text/javascript">

     swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");

     </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页面的头部

步骤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。

 var attributes = {

    id: "myId",

    align: "left",

    styleclass: "myclass"

 };

如果你宁愿用class代替styleClass，那么用引号括起来。

 var attributes = {

    id: "myId",

    align: "left",

    "class": "myclass"

 };

你能使用下面可选的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？

　　最好使用对象表示法来定义对象：

 <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>

可以用键值对的方式写:

 var flashvars = {

   name1: "hello",

   name2: "world",

   name3: "foobar"

 };

也可以用".属性"的方式写:

 var flashvars = {};

 flashvars.name1 = "hello";

 flashvars.name2 = "world";

 flashvars.name3 = "foobar";

也可以直接把参数内容加载swfobject.embedSWF()中。

 <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或一个空对象 var flashvars = false;var params = {};

FlashVars的对象是一个速记符号，为您的易用性。你可以忽略它，通过 params对象来指定你的flashvars。

 <script type="text/javascript">

 var flashvars = false;

 var params = {

   menu: "false",

   flashvars: "name1=hello&name2=world&name3=foobar"

 };

 var attributes = {

   id: "myDynamicContent",

   name: "myDynamicContent"

 };

 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

 </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解析的方式不同。
不支持他我们节省了大量的文件和努力。

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

如何使用swfobject（中文版）的更多相关文章

2DToolkit官方文档中文版打地鼠教程（三）：Sprite Collections 精灵集合
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
2DToolkit官方文档中文版打地鼠教程（二）：设置摄像机
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
2DToolkit官方文档中文版打地鼠教程（一）：初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
Python 资源大全中文版
Python 资源大全中文版我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesome-python 是 vinta 发起维护的 Python 资源列 ...
Tensorflow 官方版教程中文版
2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...
使用 SWFObject.js 插入Flash
今天学习了一下使用 SWFObject.js 这个js插入flash. 下载地址:http://code.google.com/p/swfobject/ 这个js的好处 1.IE中没有讨厌的虚框问题了 ...
JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）
JavaScript资源大全中文版(Awesome最新版) 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行器 QA 工具基于 Node 的 CMS 框 ...
DBImport v3.44 中文版发布：数据库数据互导及文档生成工具（IT人员必备）
前言: 距离上一个版本V3.3版本的文章发布,已经是1年10个月前的事了. 其实版本一直在更新,但也没什么大的功能更新,总体比较稳定,所以也不怎么写文介绍了. 至于工作上的事,之前有半年时间跑去学英语 ...
数据库SQL Service 2014中文版的安装和配置教程
一.我的电脑环境 1.windows8.1(64位) 2.之前电脑没有安装数据库的软件二.装机之前准备(我这儿提供百度云保存和下载) 1.下载一个“Sql service 2014中文版” http ...

随机推荐

Global Mapper如何加载在线地图
Global Mapper是一个比较好用的GIS数据处理软件,官网:http://www.bluemarblegeo.com/products/global-mapper.php ,除使用ArcGIS ...
带参数的sigmoid
$y=\frac{1}{1+e^{-(\alpha\times x+\beta)}}$ alpha越大,曲线越陡峭,beta控制平移 import numpy as np import pylab a ...
JEECG中表单提交的中断
JEECG平台中基于form表单封装了<t:formvalid>标签,对应实现的类为FormValidationTag.java文件. 很多时候在正式向后台提交数据前想要做判断处理,若通过 ...
Git教程学习(一)
教程来自: Git教程(廖雪峰的官方网站) 学习Git的基本内容,对教程内容进行理解并脱水 1. Git简介 2. 安装Git 1. ubuntu上安装Git $ sudo apt-get insta ...
android sdk manager 代理设置
启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...
vue.js开发SPA常见问题及解决方法
列表进入详情页的传参问题. 例如商品列表页面前往商品详情页面,需要传一个商品id; <router-link :to="{path: 'detail', query: {id: 1}} ...
【emWin】例程十三：字库放到外部存储器
介绍: 本例将字库文件放到SD卡中,通过读取SD卡中的字库文件在液晶上显示文字. 实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1bo0yTLd 密码:i4sm ...
Brainfuck反汇编(Python)
global cs global ip global ss #global sp global ds global bp global tab global out #cs='++++++++++[& ...
教你一招：解决Win 10安装软件时提示：文件系统错误（-1073740940）
1.win+R输入 gpedit.msc 2.左边计算机配置 windows设置——安全设置——本地策略——安全选项 3.在安全选项右边选择用户账户控制:管理员批准模式中管理员的提升权限提示的行为, ...
Vue.js常用指令：v-bind
一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...

如何使用swfobject（中文版）

如何使用swfobject（中文版）的更多相关文章

随机推荐

热门专题