打印

HO8001: 各浏览器下使用 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 PropertyClass 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 | FlashFlash 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 Chrome1 Safari Firefox Opera
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 属性引入这些插件。

【注】:Chrome 后续版本对此处实现做了修正,已无法通过 classid 来加载 Flash 文件。


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
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 校验(swfobject Markup Validation Service),则可使用第三种单独使用 OBJECT 与 PARAM 元素的方式。
  3. 若必须使用 OBJECT 嵌套 EMBED 元素这种混合方式,则要保证 Flash 文件 URL、为 Flash 传递的参数、宽度、高度、wmode 等参数保持统一。
  4. 可以使用开源的 SWFObject 引入 Flash。(请参见:swfobject

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.8
Chrome 6.0.472.11 dev
Safari 5.0.1
Opera 10.60
测试页面: flash.html
flash_object_classid.html
flash_object_type.html
flash_object_all.html
flash_embed.html
本文更新时间: 2010-07-31

关键字

Flash EMBED OBJECT type param classid NPAPI ActiveX 插件