天天看点
返回

嵌入Adobe Flash Player的内容，使用SWFObject 2

什么是SWFObject？

SWFObject 2：

    *提供两个优化的Flash播放器嵌入方法;基于标记的方式和方法依赖于JavaScript

    *提供一个JavaScript API，旨在提供一个完整的工具，嵌入的SWF文件和检索Flash Player的相关信息

    *采用只有一个小的JavaScript文件（10KB / GZIPed：3.9Kb）

    *是SWFObject 1.5，UFO和Adobe Flash Player的检测试剂盒的继任者

    *有意统一所有现有的Flash播放器嵌入方法，并提供了一​​个嵌入的Adobe Flash Player内容的新标准

为什么你应该使用SWFObject？

SWFObject 2：

    *更加优化和灵活的嵌入方法比任何其它Flash Player周围

    *为大家提供一个解决方案：它不应该的问题，如果你的HTML，Flash或JavaScript开发，应该有它的东西给大家

    *打破了被锁定到供应商的特定标记的周期，并促进Web标准的使用和替代内容

    *使用不显眼的JavaScript和JavaScript最佳实践

    *易于使用

名单除了文章的Flash嵌入笼子比赛介绍背后SWFObject 2的充分理由。

SWFObject为什么不使用JavaScript？

SWFObject 2，主要使用JavaScript来克服，不能标记单独解决的问题;

    *检测的Flash Player版本，并确定是否应该显示Flash内容或替代内容，以避免这一过时的Flash插件突破Flash内容

    *提供的功能恢复在一个过时插件通过一个DOM操作的情况下的替代内容（注：如果没有Flash插件自动安装HTML object元素回落到嵌套的替代内容）

    *提供了选择使用的Adobe Express的安装下载最新的Flash Player

    *提供一个JavaScript API来执行常见的Flash Player和Flash内容相关的任务

我应该使用静态或动态的发布方法？

SWFObject 2提供了两种不同的方法来嵌入Flash Player的内容：

   1。静态发布的方法嵌入Flash内容和使用符合标准的标记的替代内容，并使用JavaScript来解决，标记不能单独解决的问题

   2。动态发布方法是基于标记的替代内容，并使用JavaScript与Flash内容替换内容，如果最小的Flash Player版本安装和足够的JavaScript支持（像SWFObject和飞碟以前的版本类似）

静态发布方法的优点是：

   1。符合标准的标记的实际创作是促进

   2。最佳嵌入性能

   3。嵌入Flash内容的机制，不依赖于一种脚本语言，使您的Flash内容可以达到显着更多的观众：

          *如果您的Flash插件安装，但已禁用JavaScript或使用的浏览器不支持JavaScript，您将仍然能够看到您的Flash内容

          *闪光现在还可以运行像索尼PSP上的设备，它具有非常差的JavaScript支持

          *自动化工具，如RSS阅读器能够拿起Flash内容

动态发布方法的优点是：

   1。它集成了很好的脚本的应用，使动态变量的使用（FlashVars的）

   2。它避免了点击激活机制激活的Internet Explorer 6 / 7和Opera 9 +活动内容。请注意，微软已经淘汰了来自它的Internet Explorer浏览器中最活跃的内容

如何嵌入Flash Player的使用SWFObject静态发布的内容

第1步：使用符合标准的标记嵌入Flash内容和替代内容

SWFObject 的基础标记使用嵌套对象的方法（与专有的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" xml:>

  <HEAD>

    <TITLE> SWFObject - 第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"

        <!-​​-[如果IE浏览器]>-->

        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!-​​-<![ ENDIF] - >

          <P>替代内容</ P>

        <!-​​-[如果IE浏览器]>-->

        </ OBJECT>

        <!-​​-<![ ENDIF] - >

      </ OBJECT>

    </ DIV>

  </ BODY>

</ HTML>

注意：嵌套对象的方法，需要一个双对象的定义（针对Internet Explorer和针对所有其他的浏览器的内部对象的外部对象），所以你需要定义你的对象的属性和嵌套的param元素的两倍。

必需的属性：

    * CLASSID（外部对象元素，值总是CLSID：D27CDB6E - AE6D - 11CF - 96B8 - 444553540000）

    *型（内部对象的元素只，价值始终是应用程序/ x -冲击波闪光）

    *数据（内部对象的元素只定义了一个SWF的URL）

    *宽度（两个对象元素，定义一个SWF的宽度）

    *高度（两个对象元素，定义了一个SWF的高度）

所需param元素：

    *电影（外对象元素只定义一个SWF的URL）

注：我们建议不使用codebase属性点到Adobe的服务器上的Flash插件安装的URL，因为这是非法的规范，限制其访问仅在当前文档中的域。我们建议使用替代内容与一个微妙的消息，用户可以下载Flash插件，而不是有更丰富的体验。

你怎么能使用HTML来配置你的Flash内容？

您可以添加常用的以下可选的属性的对象元素：

    * ID

    *姓名

    *类

    *对齐

您可以使用下列可选的闪存具体param元素（更多信息）：

    *播放

    *循环

    *菜单

    *质量

    *规模

    * salign

    *的wmode

    * BGCOLOR

    *基地

    * swliveconnect

    * FlashVars的

    * devicefont（更多信息）

    * AllowScriptAccess的（更多信息在这里和这里）

    * seamlesstabbing（更多信息）

    *的allowFullScreen（更多信息）

    *的allowNetworking（更多信息）

为什么要使用替代的内容？

object元素允许你巢内替代内容，如果未安装Flash，或支持，这将显示。此内容也将被拾起的搜索引擎，使其成为一个伟大的工具，用于创建搜索引擎友好的内容。总结，你应该使用替代的内容，当您要创建无插件浏览网页的人访问的内容，创建搜索引擎友好的内容，或告诉参观者，他们有丰富的用户体验，通过下载Flash插件。

第2步：包括SWFObject的JavaScript库在你的HTML页面的头部

SWFObject库由一个外部JavaScript文件。 SWFObject将尽快执行，因为它是只读，将尽快执行所有的DOM操作的DOM加载 - 为所有的浏览器都支持此，如IE，火狐，Safari和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" xml:>

  <HEAD>

    <TITLE> SWFObject - 第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"

        <!-​​-[如果IE浏览器]>-->

        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!-​​-<![ ENDIF] - >

          <P>替代内容</ P>

        <!-​​-[如果IE浏览器]>-->

        </ OBJECT>

        <!-​​-<![ ENDIF] - >

      </ OBJECT>

    </ DIV>

  </ BODY>

</ HTML>

步骤3：注册SWFObject库与您的Flash内容，并告诉SWFObject用它做什么

首先添加一个唯一的ID的外部对象的标签，定义你的Flash内容。二添加swfobject.registerObject方法：

   1。第一个参数（字符串，必需）指定标记中使用的ID。

   2。第二个参数（字符串，必需）指定你的内容是公布了Flash播放器版本。它激活为一个SWF文件，以确定是否显示Flash内容或强制替代的内容做一个DOM操作的Flash版本检测。尽管Flash版本号通常包括major.minor.release.build，SWFObject只在第3个数字看起来，这样既“WIN 9,0,18,0”（IE）或“的Shockwave Flash 9 R18”（所有其他的浏览器）将转化为“9.0.18”。如果你只是想测试一个主要的版本，你可以省略次要版本号，如“9”而不是“9.0.0”。

   3。第三个参数（字符串，可选）可以用来激活Adobe快速安装的，并指定您的快速安装SWF文件的URL。快速安装显示一个标准化的Flash插件下载对话框，而不是您的Flash内容时所需的插件版本不可用。一个默认expressInstall.swf的文件打包项目。它还包含相应的expressInstall.fla文件（在src目录），让您创建自己的自定义快速安装经验。请注意，快速安装只会触发一次（第一次，它被调用），它仅仅是由Flash Player 6.0.65或更高版本在Win或Mac平台的支持，它需要一个最小的SWF 310x137px大小。

   4。第四个参数（可选）JavaScript函数，可以用来定义即嵌入一个SWF文件，无论是成功或失败调用一个回调函数（见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" xml:>

        <HEAD>

          <TITLE> SWFObject - 第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"

              <!-​​-[如果IE浏览器]>-->

              <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

              <!-​​-<![ ENDIF] - >

                <P>替代内容</ P>

              <!-​​-[如果IE浏览器]>-->

              </ OBJECT>

              <!-​​-<![ ENDIF] - >

            </ OBJECT>

          </ DIV>

        </ BODY>

      </ HTML>

TIPS

    *使用SWFObject的HTML和JavaScript发生器帮助您创作您的代码

    *只需重复步骤1和3多个SWF文件嵌入到一个HTML页面

    *使用JavaScript API参考活动对象元素最简单的方法是：`swfobject.getObjectById（objectIdStr）

如何嵌入Flash Player内容使用SWFObject动态发布

步骤1：创建使用符合标准的标记的替代内容

SWFObject的动态嵌入方法遵循渐进增强的原则和足够的JavaScript和Flash插件支持可替代的HTML内容替换为Flash内容。首先定义替代的内容和标签的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" xml:>

  <HEAD>

    <TITLE> SWFObject动态的嵌入 - 第1步</ TITLE>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  </ HEAD>

  <BODY>

   

    <div id="myContent">

      <P>替代内容</ P>

    </ DIV>

   

  </ BODY>

</ HTML>

第2步：包括SWFObject的JavaScript库在你的HTML页面的头部

SWFObject库由一个外部JavaScript文件。 SWFObject将尽快执行，因为它是只读，将尽快执行所有的DOM操作的DOM加载 - 为所有的浏览器都支持此，如IE，火狐，Safari和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" xml:>

  <HEAD>

    <TITLE> SWFObject动态的嵌入 - 第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>替代内容</ P>

    </ DIV>

  </ BODY>

</ HTML>

第3步：使用JavaScript中嵌入您的SWF

swfobject.embedSWF（swfUrl，ID，宽度，高度，版本，expressInstallSwfurl，FlashVars的，PARAMS，属性，callbackFn）有五个必需的和5个可选参数：

   1。 swfUrl（字符串，必需）指定您的SWF的URL

   2。 ID（字符串，必需）指定的HTML元素的ID（含替代的内容），您想您的Flash内容替换

   3。宽度（字符串，必需）指定SWF的宽度

   4。高度（字符串，必需）指定SWF的高度

   5。版本（字符串，必需）指定的Flash Player版本发表您的SWF（格式为：“major.minor.release”或“主要”）

   6。 expressInstallSwfurl（字符串，可选）指定您的快速安装SWF的URL，并激活的Adobe快速安装。请注意，快速安装只会触发一次（第一次，它被调用），它仅仅是由Flash Player 6.0.65或更高版本在Win或Mac平台的支持，它需要一个最小的SWF 310x137px大小。

   7。 FlashVars的（对象，可选）指定名称与您FlashVars的值对

   8。 PARAMS（对象，可选）指定名称嵌套对象元素PARAMS：值对

   9。属性（对象，可选）指定对象的名称属性：值对

  10。可用于callbackFn（JavaScript函数，可选）定义一个回调函数称为嵌入一个SWF文件，无论是成功或失败（参见API文档）

注意：您可以省略可选参数，只要你不破的参数顺序。如果你不希望使用一个可选的参数，但想使用下列可选参数，可以简单地传递作为其价值的虚假。对于FlashVars的，params和属性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" xml:>

  <HEAD>

    <TITLE> SWFObject动态的嵌入 - 第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>替代内容</ P>

    </ DIV>

  </ BODY>

</ HTML>

如何配置您的Flash内容？

您可以添加常用的以下可选的属性的对象元素：

    *编号（注：在不确定的时候，对象元素自动继承替代内容的容器元素的id）

    *对齐

    *姓名

    *的styleClass（见有关类注）

    *类

注：类是保留ECMA4关键字，将抛出在Internet Explorer中的错误，除非它是用引号（如​​“阶级”或“类”）所包围。出于这个原因，swfobject提供一个安全的替代语法类的styleClass关键字，如果您使用的styleClass，swfobject将自动插入为你的类。

例如：

VAR属性= {

   ID：“myId”

   对齐：“左”，

   的styleClass：“MyClass的”

};

如果您愿意使用类，而不是对的styleClass，裹在这样的报价字级：

VAR属性= {

   ID：“myId”

   对齐：“左”，

   “类”：“MyClass的”

};

您可以使用下列可选的闪存具体param元素（更多信息）：

    *播放

    *循环

    *菜单

    *质量

    *规模

    * salign

    *的wmode

    * BGCOLOR

    *基地

    * swliveconnect

    * FlashVars的

    * devicefont（更多信息）

    * AllowScriptAccess的（更多信息在这里和这里）

    * seamlesstabbing（更多信息）

    *的allowFullScreen（更多信息）

    *的allowNetworking（更多信息）

你如何使用JavaScript对象来定义你的FlashVars的，params和对象的属性？

最好的，你可以定义JavaScript对象，使用对象的文字符号，它看起来像：

<script type="text/javascript">

VAR FlashVars的= {};

VAR PARAMS = {};

VAR属性= {};

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，FlashVars的，PARAMS，属性）;

</ SCRIPT>

当你定义一个对象（注：请确保不要把姓氏背后的一个逗号，您可以添加您的姓名：值对：价值对一个对象里面）

<script type="text/javascript">

VAR FlashVars的= {

  name1的：“你好”，

  name2的：“世界”，

  name3：“foobar”的

};

VAR PARAMS = {

  菜单：“假”

};

VAR属性= {

  ID：“myDynamicContent”

  名称：“myDynamicContent”

};

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，FlashVars的，PARAMS，属性）;

</ SCRIPT>

或通过使用一个圆点符号添加的属性和它的创作后的值：

<script type="text/javascript">

VAR FlashVars的= {};

flashvars.name1 =“你好”;

flashvars.name2 =“世界”;

flashvars.name3 =“foobar”的;

VAR PARAMS = {};

params.menu =“假”;

VAR属性= {};

attributes.id =“myDynamicContent”;

attributes.name =“myDynamicContent”;

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，FlashVars的，PARAMS，属性）;

</ SCRIPT>

这也可以书面（谁爱一行的顽固的脚本编写者的可读性的简写版）：

<script type="text/javascript">

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，{name1的：“你好”，name2的：“世界”，name3：“ foob​​ar的“}，{菜单：”假“}，{ID：”myDynamicContent“，名称：”myDynamicContent“}）;

</ SCRIPT>

如果你不想使用一个可选的参数，你也可以定义为虚假或一个空的对象（注：SWFObject 2.1起，您还可以使用NULL或0）：

<script type="text/javascript">

VAR FlashVars的= FALSE;

VAR PARAMS = {};

VAR属性= {

  ID：“myDynamicContent”

  名称：“myDynamicContent”

};

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，FlashVars的，PARAMS，属性）;

</ SCRIPT>

FlashVars的对象是一个速记符号，是有您的易用性。你可能会忽略它，并通过params对象中指定你的FlashVars的：

<script type="text/javascript">

VAR FlashVars的= FALSE;

VAR PARAMS = {

  菜单：“假”，

  FlashVars的：“name1的=你好＆name2的世界＆name3 = foobar的”

};

VAR属性= {

  ID：“myDynamicContent”

  名称：“myDynamicContent”

};

swfobject.embedSWF（“myContent.swf”，“myContent”，“300”，“120”，“9.0.0”，“expressInstall.swf”，FlashVars的，PARAMS，属性）;

</ SCRIPT>

TIPS

    *使用SWFObject的HTML和JavaScript发生器帮助您创作您的代码

    *只需重复步骤1和3多个SWF文件嵌入到一个HTML页面

SWFObject 1.5 SWFObject 2迁移提示

   1。 SWFObject二是不与SWFObject 1.5的向后兼容

   2。这是现在的首选，在你的HTML页面的头部中插入的所有脚本块。在您的网页正文中添加你的脚本可能有视觉冲击力（如闪烁更换替代内容），因为你的JavaScript代码将在稍后阶段执行（确切的影响取决于你的实现）

   3。库本身是写在小写：swfobject，而不是对SWFObject

   4。方法只能通过库访问（而不是通过SWFObject 1.5 SWFObject实例）

   5。此外，JavaScript API是完全不同的和更详细的

   6。 SWFObject 2替换为Flash内容，您的整个替代的HTML内容包括所引用的HTML容器元素块，当有足够的JavaScript和Flash的支持是可用的，而SWFObject 1.5只替换引用的HTML容器内的内容。当你不指定一个id属性，对象元素将自动继承替代内容的HTML容器元素的ID。

飞碟来SWFObject 2迁移秘诀

   1。 SWFObject 2取代您的整个替代的HTML内容块，包括Flash内容所引用的HTML容器元素，当足够的JavaScript和Flash支持，而飞碟只替换引用的HTML容器内的内容。当你不指定一个id属性，对象元素将自动继承替代内容的HTML容器元素的ID。

   2。飞碟的setcontainercss功能还没有被纳入SWFObject 2，但它可以很容易地被复制使用SWFObject的JavaScript API，请参阅：swfobject.createCSS（selStr，declStr）

SWFObject 2支持MIME类型application / xhtml + xml的呢？

SWFObject 2不支持XML的MIME类型，这是一个设计决策。

还有一个原因，为什么我们不支持这一数量：

    *只有一个Web作者的量非常小（不显着的）正在使用它

    *我们是不确定的，如果它的方向走。 Internet Explorer不支持它和其他所有主要浏览器厂商的目标是一个新的HTML解析标准的方式（与HTML 5），从作为XML的HTML解析当前W3C的视觉出发，在他们的箭头

    *我们不支持保存的文件大小和努力测试，问题解决的体贴金额

教程（初级水平）

    *检测Flash Player版本和SWFObject 2嵌入SWF文件

    *提供SWF文件的替代内容

    *嵌入闪存李布赖姆洛SWFObject 2.0（视频教程）

评论

本维基上的评论功能已经关闭，以避免垃圾邮件和滥用。

如果您有任何疑问/评论关于SWFObject或文档，或有一个执行的问题：

   1。请确保您已阅读我们的常见问题

   2。使用SWFObject的讨论小组

如果您发现任何错误或要请求未来的增强，您可以填写一个SWFObject问题页上的问题的报告

Flash adobe javascript html xhtml object
上一篇: SWFObject: 基于Javascript的Flash媒体版本检测与嵌入模块
下一篇: SWFObject2

继续阅读