首页 > 代码库 > 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
各浏览器下使用 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="http://www.mamicode.com/clock.swf" /> <param name="quality" value="http://www.mamicode.com/high" /> <embed src="http://www.mamicode.com/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="http://www.mamicode.com/clock.swf" /> <param name="quality" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/clock.swf"> <param name="src" value="http://www.mamicode.com/clock.swf" /> <param name="quality" value="http://www.mamicode.com/high" /> </object></div>
这种方式仍然仅使用 W3C 规范中标准的 OBJECT 元素,结合了上两个测试样例,使得所有浏览器均可以正常的载入 Flash 文件。
4. 使用 EMBED 元素:flash_embed.html
<div style="border:5px solid black; padding:5px; float:left;"> <embed src="http://www.mamicode.com/clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></div>
直接使用 EMBED 元素,所有浏览器均支持。
解决方案
- 若不考虑 W3C 校验,可统一使用 EMBED 元素嵌入 Flash,这样可以避免因参数不统一导致的兼容性问题。
- 若需要考虑 W3C 校验( Markup Validation Service),则可使用第三种单独使用 OBJECT 与 PARAM 元素的方式。
- 若必须使用 OBJECT 嵌套 EMBED 元素这种混合方式,则要保证 Flash 文件 URL、为 Flash 传递的参数、宽度、高度、wmode 等参数保持统一。
- 可以使用开源的 SWFObject 引入 Flash。(请参见:)