今天在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>严格的说不符合W3C规范,但是各浏览器对它的支持相当的好,支持<object>的只有chrome和safari。
一般为了良好的兼容性都选择将<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中的说明 更利于搜索引擎是找到,而且在不能加载的时候有提示的作用。