78. embed 与 object 标签

本节目标：了解 embed 和 object 标签的作用，知道它们的历史用途和现代替代方案。

<embed> 和 <object> 都是用来在页面里嵌入外部内容的标签。在 HTML5 之前，它们主要用来加载 Flash 插件。现在 Flash 已经退出历史舞台，这两个标签的用途也变了。

embed 标签

<embed> 是一个自闭合标签，用来嵌入外部内容。

<embed src="movie.swf" width="400" height="300">

它没有闭合标签，也不能放兜底内容。这是它最大的缺点——如果浏览器不支持，用户什么都看不到。

常用属性

属性	作用
`src`	嵌入内容的 URL
`type`	MIME 类型
`width`	宽度
`height`	高度

Note

<embed> 在 HTML4 中不是标准标签，但所有浏览器都支持。HTML5 正式把它纳入规范。

object 标签

<object> 比 <embed> 更强大，支持嵌套兜底内容。

<object data="movie.swf" width="400" height="300">
  <param name="autoplay" value="true">
  你的浏览器不支持此内容。
</object>

如果浏览器不支持 .swf，就会显示标签内的文字或嵌套内容。

常用属性

属性	作用
`data`	资源的 URL
`type`	MIME 类型
`width`	宽度
`height`	高度

<param> 标签可以给嵌入的对象传参数，比如是否自动播放、是否循环等。

现代用途

Flash 被淘汰后，这两个标签现在主要用于嵌入 PDF、图片等内容。

<!-- 嵌入 PDF -->
<object data="document.pdf" type="application/pdf" width="600" height="800">
  <p>无法显示 PDF，<a href="document.pdf">点击下载</a>。</p>
</object>

<!-- 嵌入图片 -->
<object data="image.svg" type="image/svg+xml">
  <img src="fallback.png" alt="备用图片">
</object>

embed vs object

对比项	embed	object
闭合方式	自闭合	有闭合标签
兜底内容	不支持	支持
传参	不支持	通过 param
语义	较弱	较强

Tip

现代开发中，能用 <video>、<audio>、<iframe> 解决的问题，就不需要 <embed> 和 <object> 了。它们更多是作为兜底方案存在。

Flash 的历史注脚

在 2010 年前后，Flash 是网页视频和动画的标配。YouTube、优酷这些网站当年都用 Flash 播放器。

2020 年底，Adobe 正式停止支持 Flash。现代浏览器也彻底移除了 Flash 插件。现在你在代码里写 *.swf 文件，已经没有任何意义了。

Note

如果你在旧项目里看到 <embed src="*.swf"> 或 <object classid="clsid:...">，那是时代的产物。新项目请用 HTML5 原生方案。

小结

<embed> 是自闭合标签，嵌入外部内容
<object> 支持兜底内容和参数传递
Flash 已退出历史舞台，这两个标签现在很少用
现代开发优先用 <video>、<audio>、<iframe>