各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

标准参考

OBJECT 元素定义了一个嵌入的对象。其引入的初衷是取代 IMG 和 APPLET 元素。不过由于安全等各方面原因以及缺乏浏览器支持，这一初衷并未实现。浏览器的对象支持依赖于对象类型。然而，即便是相同的对象类型，各主流浏览器也都 使用了不同的代码来加载。 classid 属性用于指定对象实现的 URI 地址。它可能用来替代或者配合 data 属性，这由引入的对象决定。
codebase 属性指定了一个为 classid、data、archive 属性的相对 URI 提供基本路径。缺省情况下，这个值为当前文档的基本 URI。
type 属性定义被定义在 data 属性中指定的文件中出现的数据的 MIME 类型。

关于 OBJECT 元素及其属性的详细信息，请参考 HTML4.01 规范 13.3 Generic inclusion: the OBJECT element 中的内容。

问题描述

通常情况下，IE 系列浏览器通过 ActiveX 插件使用 OBJECT 元素引入 Flash，而其他浏览器则是通过相应的 NPAPI 插件使用 EMBED 元素。这造成了各浏览器中插入 Flash 的方式的差异。

造成的影响

若仅仅使用 OBJECT 元素设置了 classid 属性引入 Flash，则可能造成在某些浏览器中 Flash 无法被引入。而若嵌套的 OBJECT 和 EMBED 元素参数不统一，也可能造成引入的 Flash 在各浏览器中出现差异。

受影响的浏览器

所有浏览器

问题分析

对于 HTML4.01 规范中的 OBJECT 元素，IE 对 classid 属性有自己的解释方式：类标识符（class identifier）。格式形如：clsid:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX。由 ActiveX 组件注册在 Windows 的系统注册表中。
codebase 属性则为该类标识符所对应的 ActiveX 插件的 URI 地址。一般是一个 .cab 安装包。（更多请参考 MSDN：CLASSID Attribute | classid Property 及 Class Identifier 中的内容。）

EMBED 元素则是由 NetScape Navigator 2 引入，用于在 HTML 文档中插入符合网景插件应用程序编程接口（NPAPI）规范的插件。NPAPI 插件是跨平台的，并可以在所有实现了此接口规范的浏览器中使用。目前的主流浏览器中 IE 系列以外的浏览器均支持 NPAPI 插件。
事实上 IE3.0 就支持 NPAPI，但是在 IE5.5 SP2 后微软出于安全考虑停止了对 NPAPI 的支持，转而推荐用户使用其 ActiveX 技术作为替代。（更多请参考 MSDN：Netscape 式的插件在升级 Internet Explorer 后不工作）
EMBED 元素拥有一个名为 pluginspage 的属性，其值为 NPAPI 插件的 URL，与 IE 中 OBJECT 元素的 codebase 属性类似，它告诉了浏览器插件的下载地址。

EMBED 元素不属于 HTML4.01 规范中的元素，HTML 文档中直接使用 EMBED 元素可能无法通过 W3C 校验。不过 EMBED 元素目前已经被添加到 HTML5 草案中。（参加 HTML5 草案：4.8.3 The embed element）

至此若需要在 HTML 文档中引入一个已安装的通用的插件，如 Flash，则在 IE 中使用 OBJECT 元素，非 IE 中则使用 EMBED 元素。此外 IE 中也支持 EMBED 元素引入设置了正确 MIME 的插件。

 

通常，我们会使用类似如下结构的代码引入 Flash：flash.html（SWF 文件来自 Adobe 网站的 Flash 范例）

<object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
  <param name="src" value="clock.swf" />
  <param name="quality" value="high" />
  <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

各浏览器中的效果均为：

将 EMBED 元素嵌套在 OBJECT 元素中，在 IE 中会优先使用 OBJECT 元素而忽略 EMBED 元素，在其他浏览器中则优先使用 EMBED 元素而忽略 OBJECT 元素。这样做虽然可以保证在所有浏览器中均能正确加载 Flash，但若 OBJECT 元素与 EMBED 元素的参数设定不统一，则很有可能造成 Flash 在各浏览器中显示效果不一致，甚至是无法正常加载。

关于如何正确地在 HTML 文档中引入 Flash，请参考 Adobe 官方知识库文档：OBJECT and EMBED syntax | Flash 与 Flash OBJECT and EMBED tag attributes中的内容。

 

下面将分析仅使用一种元素的引入 Flash 的情况下在所有主流浏览器中是否达到一致的效果。（假设浏览器均已正确安装 Flash 所需插件）

1. 使用 OBJECT 元素 classid 属性以及 PARAM 元素：flash_object_classid.html

<div style="border:5px solid black; padding:5px; float:left;">
  <object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
    <param name="src" value="clock.swf" />
    <param name="quality" value="high" />
  </object>
</div>

这段代码在各浏览器中运行效果如下：

IE6 IE7 IE8 Chrome Safari	Firefox Opera

Firefox 和 Opera 由于不支持 ActiveX 技术所有无法通过 OBJECT 元素及 classid 属性引入 Flash，则此时 OBJECT 元素宽度和高度均为 0。
然 而 Chrome 和 Safari 却正确的加载了 Flash 文件，这是由于 WebKit 内核对 ActiveX 提供了有限的支持，对于比较通用的 ActiveX 插件（如 Flash, Media Player, Director, QuickTime, RealAudio），浏览器会将它们的在 Windows 系统中的 classid 与其对应的 Mime-Type 相关联，所以可以和 IE 一样仅仅通过 OBJECT 元素的 classid 属性引入这些插件。

 

2. 使用 OBJECT 元素 type、data 属性：flash_object_type.html

<div style="border:5px solid black; padding:5px; float:left;">
  <object width="200" height="200" type="application/x-shockwave-flash" data="clock.swf">
  </object>
</div>

这段代码在各浏览器中运行效果如下：

IE6 IE7 IE8	Firefox Chrome Safari Opera

IE 对 OBJECT 元素的 data 属性设置 Flash 文件 URL 无任何效果。这种方式可以用于非 IE 浏览器。

 

3. 使用 OBJECT 元素 type、data 属性以及 PARAM 元素：flash_object_all.html

<div style="border:5px solid black; padding:5px; float:left;">
  <object width="200" height="200" type="application/x-shockwave-flash" data="clock.swf">
    <param name="src" value="clock.swf" />
    <param name="quality" value="high" />
  </object>
</div>

这种方式仍然仅使用 W3C 规范中标准的 OBJECT 元素，结合了上两个测试样例，使得所有浏览器均可以正常的载入 Flash 文件。

 

4. 使用 EMBED 元素：flash_embed.html

<div style="border:5px solid black; padding:5px; float:left;">
  <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</div>

直接使用 EMBED 元素，所有浏览器均支持。

解决方案

1. 若不考虑 W3C 校验，可统一使用 EMBED 元素嵌入 Flash，这样可以避免因参数不统一导致的兼容性问题。
2. 若需要考虑 W3C 校验（ Markup Validation Service），则可使用第三种单独使用 OBJECT 与 PARAM 元素的方式。
3. 若必须使用 OBJECT 嵌套 EMBED 元素这种混合方式，则要保证 Flash 文件 URL、为 Flash 传递的参数、宽度、高度、wmode 等参数保持统一。
4. 可以使用开源的 SWFObject 引入 Flash。（请参见：）