IE、chorme、firefox、safari对于<object>标签<embed>标签支持情况

最新推荐文章于 2022-06-25 09:07:32 发布

萧-然

最新推荐文章于 2022-06-25 09:07:32 发布

阅读量8.2k

点赞数 1

分类专栏： web前端文章标签：浏览器 embed object html

本文链接：https://blog.csdn.net/ndsc0201/article/details/8846341

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天在HTML标签的时候学习了<object>标签和<embed>标签，发现各个浏览器对他们的支持情况差别很大，我想总结一下我所学到的内容。我是一个小菜鸟，希望有问题莫怪哈。

网页中显示富媒体（Flash、视频、音频）需要用到两个元素：<object>和<embed>。

<object>和<embed>

<object>元素能够告诉浏览器几件事：

1、文件名和文件存放位置

2、文件的格式

3、播放该文件所需的插件的种类

在<object>元素中，可以使用<param>元素为播放器提供这些信息。<param>元素不是在<object>元素可以使用的唯一标记。但是<object>的其他标记一般是浏览器中无法呈现时显示，例如，在<object>元素中经常可以看到<embed>元素。

<embed>严格的说不是HTML或XHTML的规范，但是很多年前Microsoft就引入了<object>元素，用于支持ActiveX技术（仅用于IE）。后来，其他浏览器就反而使用<embed>元素子啊网页中嵌入音频和视频对象。因此，经常在<object>元素中包含<embed>元素，以确保老版本的浏览器再不支持<object>元素的情况下，尝试使用<embed>元素显示对象的内容。

<object>代码

我首先写了一段通过<object>元素插入一段优酷的视频。

<!doctype html PUBLIC "-//W3c//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="UTF-8">
	<title>cloud</title>
</head>
<body>
	<object width="425" height="344">
		<param name="movie" value="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf"		 />
		<param name="allowFullScreen" value="true" />
		<param name="allowScirptaccess" value="always" />
	</object>	
</body>
</html>

第一个<param>指定影片从哪里加载，可以是本地地址和URL

第二个<param>表示是否运行全屏观看

第三个<param>是一个特殊属性，用于确保Flash影片可能特定于某个版本的Flash.

各浏览器支持情况: IE和FireFox显示空白，Chrome和Safari正常显示。

<embed>代码

然后我又用<embed>替换了上面的<object>元素。

<!doctype html PUBLIC "-//W3c//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="UTF-8">
	<title>cloud</title>
</head>
<body>
	<embed src="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf" 
		quality="high" width="480" height="400" align="middle" allowScriptAccess="always" 
		allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash">
	</embed>
</body>
</html>

<embed>中几个特性的值表示的效果和<param>的效果基本一致。src指向资源，type指示资源类型，这里为flash。

各个浏览器支持情况：IE、FireFox、Chrome和Safari都正常显示。

将<embed>嵌入<object>

最后尝试将两个嵌入一起。

<!doctype html PUBLIC "-//W3c//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="UTF-8">
	<title>cloud</title>
</head>
<body>
	<object width="425" height="344">
		<param name="movie" value="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf"			 />
		<param name="allowFullScreen" value="true" />
		<param name="allowScirptaccess" value="always" />
		<embed src="http://player.youku.com/player.php/Type/Folder/Fid/19188186/Ob/1/sid/XNTQ3NDQyMTY4/v.swf" quality="high" 			width="480" height="400" align="middle" allowScriptAccess="always" 
			allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash">
		</embed>
	</object>
</body>
</html>

最后测试结果为各个浏览器均支持。

结论

一般为了良好的兼容性都选择将<embed>嵌入<object>中使用。

我使用的版本依次是IE10、FireFox19、Chrome25和Safari5。

附注

另外还有一种方法是利用Javascript嵌入，这是比较流行的一种方式。这种方式使用<div>存放Flash影片(SWF文件)，<div>中可以使用文本或图像，没有安装Flash的用户将会显示这些文本和图像。然后添加javascript检测是否安装播放器。如果安装就会使用SWF文件替换<div>中的内容。一般执行这些的脚本是SWFObject。下面是我用的测试代码。

<!doctype html PUBLIC "-//W3c//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta charset="UTF-8">
	<title>cloud</title>
	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript">
		swfobject.embedSWF("Frame.swf","flash_movie","300","200","8.0.0");
	</script>
</head>
<body>
	<div id="flash_movie"> a flash</div>
</body>
</html>

SWFObject脚本可以从http://code.google.com/p/swfobjec下载，embedSWF五个参数分别表示Flash地址、<div>的id、宽度、高度、播放器最低版本。

这中方式各个浏览器都支持，而且div中的说明更利于搜索引擎是找到，而且在不能加载的时候有提示的作用。

萧-然

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
IE、chorme、firefox、safari对于<object>标签<embed>标签支持情况

今天在HTML标签的时候学习了标签和标签，发现各个浏览器对他们的支持情况差别很大，我想总结一下我所学到的内容。我是一个小菜鸟，希望有问题莫怪哈。网页中显示富媒体（Flash、视频、音频）需要用到两个元素：和。和元素能够告诉浏览器几件事：1、文件名和文件存放位置 2、文件的格式3、播放该文件所需的插件的种类在元素中，可以使用元素为播放器提供这些信息。元素不是在元素可以
复制链接

扫一扫