谈谈HTML的object和embed标签

一、object

1.定义与用法

属性	值	描述
align	leftrighttopbottom	定义围绕该对象的文本对齐方式。
archive	URL	由空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源。
border	pixels	定义对象周围的边框。
classid	class ID	定义嵌入 Windows Registry 中或某个 URL 中的类的 ID 值，此属性可用来指定浏览器中包含的对象的位置，通常是一个 Java 类。
codebase	URL	定义在何处可找到对象所需的代码，提供一个基准 URL。
codetype	MIME type	通过 classid 属性所引用的代码的 MIME 类型。
data	URL	定义引用对象数据的 URL。如果有需要对象处理的数据文件,要用 data 属性来指定这些数据文件。
declare	declare	可定义此对象仅可被声明，但不能被创建或例示，直到此对象得到应用为止。
form	form_id	规定对象所属的一个或多个表单。
height	pixels	定义对象的高度。
hspace	pixels	定义对象周围水平方向的空白。
name	unique_name	为对象定义唯一的名称（以便在脚本中使用）。
standby	text	定义当对象正在加载时所显示的文本。
type	MIME_type	定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。
usemap	URL	规定与对象一同使用的客户端图像映射的 URL。
vspace	pixels	定义对象的垂直方向的空白。
width	pixels	定义对象的宽度。

一个简单的object使用示例如下：

<!-- 使用object播放flash文件 -->
<object data="test.swf" />

2.object与param

<param>标签的作用是向插件传参，实现插件的run-time设置。不同的插件脚本可传参数不同，开发者需阅读相关参数文档。<param>标签应仅出现在<object>或<applet>标签内。
可用属性：

属性	值	描述
name	unique_name	定义参数的名称（用在脚本中）。
type	MIME type	规定参数的 MIME 类型（internet media type）。
value	value	规定参数的值。
valuetype	data ref object	规定值的 MIME 类型。

下面是object标签配合param标签向Java Applet插件传参的示例：
这是一个简单的Java Applet示例：

//Java Applet插件-TestApplet.java
import java.applet.*;
import java.awt.*;
 
public class HelloWorldApplet extends Applet
{
   public void paint (Graphics g)
   {
      // 获取param标签传来的参数-helloStr，并显示出来
      g.drawString (getParameter("helloStr") , 25, 50);
   }
}

在html中使用TestApplet插件:

<!-- classid属性代表TestApplet对应的class ID值-->
<object classid="clsid:xxxxxx">
  <param name="helloStr" value="Hello World!" />
</object>

二、embed

1.定义与用法

属性	值	描述
height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	type	定义嵌入内容的类型。
width	pixels	设置嵌入内容的宽度。

一个简单的embed使用示例如下：

<embed src="helloworld.swf" />

embed支持的嵌入内容的类型参数很多，具体请看这篇HTML embed标签完整的MIME 类型列表

三、object与embed的异同

object与embed标签的作用都是用来嵌入插件对象。但他们又有如下的不同点：

浏览器的兼容性不同
IE浏览器对object标签有更好的兼容性，而非IE浏览器对embed标签则有更好的兼容性。在IE浏览器中，虽然能使用embed标签嵌入插件，但是一些属性将失效，如在embed标签中使用align属性，非IE浏览器下有效，但在IE浏览器下将失效:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>embed使用测试</title>
    </head>
    <body>
        <h2 style="margin-bottom: 10px;">《都挺好》</h2>
        <p style="margin: 0 15px;">
            <!-- 在IE浏览器下，align属性将失效，失去视频环绕文字的效果 -->
            <embed style="margin-left: 15px;" width="550" height="400" src="https://vd3.bdstatic.com/mda-jc0rwgwif0wmz1aw/mda-jc0rwgwif0wmz1aw.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D" align="right" />
            <span style="line-height: 25px; text-align: justify;">表面上无限风光的苏家，随着苏母的突然离世，瞬间分崩离析。意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，打破了远在国外的大哥与本城的二哥 、小妹三家的平静生活。父亲苏大强终于摆脱了妻子的铁腕，对几个孩子变本加厉，不断提出过分要求。在美国工作的老大苏明哲回到国内，一心要挑起家庭重担，却力不能及不堪重负，致使妻子孩子与其不断疏远。一直啃老的老二苏明成毫无悔改之心，贪慕虚荣一心发财，从而导致事业和家庭的双重惨败。最不受父母待见，十八岁起就和家里断绝经济往来的老小苏明玉，曾发誓与这个家庭划清界限，却因亲情牵绊，再次搅进了苏家的泥潭之中，在苏家的一次次危机中出手相助。最终，苏家人明白到，虽然有血脉相连，但是一家人彼此间的沟通也不能忽视，终于实现了亲情的回归。</span>
        </p>
    </body>
</html>

Chrome浏览器下的效果.png

IE浏览器的效果.png

但是如果将embed标签换成object标签，则align属性不会失效：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>embed使用测试</title>
    </head>
    <body>
        <h2 style="margin-bottom: 10px;">《都挺好》</h2>
        <p style="margin: 0 15px;">
            <!-- 使用object标签代替embed标签 -->
            <object style="margin-left: 15px;" width="550" height="400" data="https://vd3.bdstatic.com/mda-jc0rwgwif0wmz1aw/mda-jc0rwgwif0wmz1aw.mp4?playlist=%5B%22hd%22%2C%22sc%22%5D" align="right"></object>
            <span style="line-height: 25px; text-align: justify;">表面上无限风光的苏家，随着苏母的突然离世，瞬间分崩离析。意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，打破了远在国外的大哥与本城的二哥 、小妹三家的平静生活。父亲苏大强终于摆脱了妻子的铁腕，对几个孩子变本加厉，不断提出过分要求。在美国工作的老大苏明哲回到国内，一心要挑起家庭重担，却力不能及不堪重负，致使妻子孩子与其不断疏远。一直啃老的老二苏明成毫无悔改之心，贪慕虚荣一心发财，从而导致事业和家庭的双重惨败。最不受父母待见，十八岁起就和家里断绝经济往来的老小苏明玉，曾发誓与这个家庭划清界限，却因亲情牵绊，再次搅进了苏家的泥潭之中，在苏家的一次次危机中出手相助。最终，苏家人明白到，虽然有血脉相连，但是一家人彼此间的沟通也不能忽视，终于实现了亲情的回归。</span>
        </p>
    </body>
</html>

IE浏览器下使用object的效果.png

虽然IE对object的兼容性较好，但是在一些低版本的IE浏览器下，object也可能无法显示插件内容。这也是object标签的缺陷。

三、object与embed搭配实现浏览器兼容

从上述的内容可以看出，单独使用embed标签或object标签，会出现各种浏览器不兼容的问题。因此，在实际开发中，我们一般将object和embed标签组合使用，从而解决浏览器兼容问题。那么，如何组合使用呢？我们知道，object标签在浏览器无法加载插件的情况下，会执行位于<object></object>之间的代码；那么我们可以在<object></object>之间添加一个embed标签，那么浏览器在无法使用object加载插件时，就会使用object标签内的embed标签来加载插件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>embed使用测试</title>
    </head>
    <body>
        <h2 style="margin-bottom: 10px;">《都挺好》</h2>
        <p style="margin: 0 15px;">
            <object style="margin-left: 15px;" width="550" height="400" data="http://vt1.doubanio.com/201903171832/4d87aa3b5678667ac04d415e2e55369b/view/movie/M/402430855.mp4" align="right">
                <embed style="margin-left: 15px;" width="550" height="400" src="http://vt1.doubanio.com/201903171832/4d87aa3b5678667ac04d415e2e55369b/view/movie/M/402430855.mp4" align="right" />
            </object>
            <span style="line-height: 25px; text-align: justify;">表面上无限风光的苏家，随着苏母的突然离世，瞬间分崩离析。意想不到的隐患层层显露，对毫无主见却又自私、小气的苏父的安置和后续生活问题，打破了远在国外的大哥与本城的二哥 、小妹三家的平静生活。父亲苏大强终于摆脱了妻子的铁腕，对几个孩子变本加厉，不断提出过分要求。在美国工作的老大苏明哲回到国内，一心要挑起家庭重担，却力不能及不堪重负，致使妻子孩子与其不断疏远。一直啃老的老二苏明成毫无悔改之心，贪慕虚荣一心发财，从而导致事业和家庭的双重惨败。最不受父母待见，十八岁起就和家里断绝经济往来的老小苏明玉，曾发誓与这个家庭划清界限，却因亲情牵绊，再次搅进了苏家的泥潭之中，在苏家的一次次危机中出手相助。最终，苏家人明白到，虽然有血脉相连，但是一家人彼此间的沟通也不能忽视，终于实现了亲情的回归。</span>
        </p>
    </body>
</html>

IE浏览器下的效果.png

Chrome浏览器下的效果.png

这样，就能实现浏览器兼容了！
注：在IE浏览器下，如果出现无法显示插件内容，且控制台出现“DOM7011:此页上的代码禁用了反向和正向缓存”的警告，需要检查一下系统盘是否空间不足，清理磁盘空间，以保证有足够的缓存空间加载插件内容。