`
lzj0470
  • 浏览: 1272806 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

各浏览器下使用 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
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
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)

转载来源:http://www.w3help.org/zh-cn/causes/HO8001
分享到:
评论

相关推荐

    FlashObject的使用

    5. **安全性和隐私**:FlashObject还考虑了安全性问题,比如使用`wmode`参数来处理透明度问题,防止与其他页面元素重叠,以及避免浏览器的弹窗阻止策略。 6. **维护和兼容性**:随着技术的发展,Adobe Flash已经...

    embed标签使用详解

    - **使用建议**:为了确保页面在不同浏览器中的兼容性,建议同时使用`&lt;embed&gt;`和`&lt;object&gt;`标签。通常情况下,`&lt;embed&gt;`标签放置于`&lt;object&gt;`标签内部,这样浏览器会忽略其不支持的标签。 #### 四、HTML与XHTML的...

    flash全屏代码可以完全适应所以浏览器

    5. **HTML5集成**:在HTML页面中嵌入Flash时,HTML5的`object`和`embed`标签需正确配置,以确保跨浏览器的兼容性。 压缩包中的`2.fla`文件是Flash的源文件,包含了动画和交互逻辑;`2.html`是用于在网页中嵌入Flash...

    flash实现在线拍照

    - **MyViedio.html**:这可能是嵌入Flash内容的HTML页面,使用`&lt;object&gt;`或`&lt;embed&gt;`标签来加载`MyViedio.swf`文件,使Flash在网页中运行。 - **MyViedio.swf**:这是编译后的Flash影片文件,包含所有图形、动画和...

    flex嵌入JSP

    不同的浏览器对Flex和JSP的渲染方式可能存在差异,需要在多种浏览器下测试,确保应用在所有目标平台上都能正常工作。 在实际开发过程中,我们还需要了解Flex的事件处理机制,如何通过ActionScript与JSP页面进行通信...

    使用SWFObject.js文件嵌入swf文件的应用

    通过动态创建`&lt;object&gt;`或`&lt;embed&gt;`标签,它能够根据浏览器的类型和版本选择最佳的嵌入方式。 3. **简单应用**:在描述中提到的"很easy",意味着SWFObject.js的使用门槛较低。只需在HTML页面中引入SWFObject.js库,...

    股票FLASH源码共分享

    `swfobject.js` 文件如前所述,是用于检测和嵌入Flash内容的JavaScript库。它处理了不同浏览器之间的差异,使得Flash内容能在没有Flash插件的设备上显示替代内容,提高了网站的可达性。 最后,`skave_data.txt` ...

    JavaSript访问flash例子

    2. **js调用flash中的方法_(传统swf插入法).html** - 这个HTML文件演示了传统的SWF插入方法,即通过`&lt;object&gt;`和`&lt;embed&gt;`标签将Flash内容嵌入HTML,并使用JavaScript调用其方法。 3. **js调用flash中的方法...

    Js完美屏蔽网页Flash右键菜单.rar

    需要注意的是,这种方法可能不适用于所有浏览器,因为不同的浏览器可能对事件处理和Flash的支持存在差异。此外,随着HTML5技术的发展,Flash的使用已经逐渐减少,更多的网页倾向于使用HTML5的Canvas或WebGL等技术来...

    Flash 动画菜单带连接

    5. **HTML集成**:在网页中嵌入Flash内容通常需要用到HTML代码,通过`&lt;object&gt;`或`&lt;embed&gt;`标签来实现。这两个标签允许网页开发者指定Flash文件的位置、大小以及其他相关参数。 6. **优化与兼容性**:虽然Flash在...

    一个基于ASP.NET的动态加载Flash到Web网页的控件源代码

    对于Flash,我们通常会使用`&lt;object&gt;`或`&lt;embed&gt;`标签来嵌入。通过在代码-behind(C#)中控制这些元素的生成,可以在运行时根据需要创建和显示Flash内容。 1. **服务器端控件**:在ASP.NET中,可以创建一个自定义...

    网页中嵌入swf文件的几种方法

    `object`与`embed`结合的方式适用于大多数情况,而仅使用`object`标签的方法则更简洁但可能在某些情况下有所局限。双重`object`标签方式虽然较为复杂,但在处理复杂环境下的兼容性问题时表现出色。根据实际需求选择...

    flash 嵌入网页 与IE, FF,傲游兼容问题

    6. 兼容性问题解决方法:在文档中提到,通过在&lt;object&gt;标签内添加和在&lt;embed&gt;标签内设置wmode="window"的方式,可以分别解决傲游浏览器和Firefox浏览器的兼容性问题。这些方法的原理是通过调整Flash的窗口模式来解决...

    swfobject 应用

    SWFObject 的优势在于其易用性和兼容性,它能够处理浏览器的差异,确保 Flash 动画在不同环境下都能正常显示。 **二、SWFObject 的工作原理** 1. **检测浏览器支持**:SWFObject 首先会检测用户的浏览器是否支持 ...

    HTML5 embed标签定义和用法详解

    关于`&lt;embed&gt;`标签在HTML4和HTML5之间的差异,主要在于HTML5对其进行了标准化,提供了更好的跨浏览器兼容性和一致性。然而,由于历史原因,`&lt;embed&gt;`标签在处理动态内容时存在一定的局限性。例如,如果`src`属性指向...

    SWFObject2.2

    3. **对象嵌入**:通过动态创建HTML `&lt;object&gt;` 和 `&lt;embed&gt;` 标签,实现对Flash内容的无缝嵌入,同时处理各种浏览器的差异。 4. **参数设置**:允许开发者自定义Flash的宽高、版本需求、背景色、FlashVars等参数。 ...

    给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

    这是因为Flash默认会置于页面的最高层,这可能会遮挡下拉菜单和其他元素,同时也使得在Flash上直接应用`onclick`等事件变得困难。 解决这个问题的一种常见方法是使用透明层。这种方法分为以下几个步骤: 1. 首先,...

    FLV播放页面代码

    1. **Flash Player集成**:首先,你需要在网页中嵌入Flash Player组件,这通常通过`object`或`embed`标签来实现。HTML代码会包含指向Flash Player SWF文件的URL,以及一些配置参数,如播放器的宽度、高度、版本等。 ...

    两种单个swf loading 动画

    5. 集成到网页:将SWF加载动画嵌入到HTML页面中,可以使用`&lt;object&gt;`或`&lt;embed&gt;`标签,或者更现代的HTML5 `&lt;iframe&gt;`标签配合Flash插件。同时,为了确保在不支持Flash的设备或浏览器上也能正常工作,开发者通常会...

Global site tag (gtag.js) - Google Analytics