HTML - 嵌入多媒体

在前面两章中，我们使用了<audio> 和 <video> 元素将音乐和视频添加到我们的网页中。还有其他替代方法可以使用 HTML 标签<embed> 和 <object> 将视频、声音、图像或任何其他外部内容添加到网站中。这些标签会导致浏览器本身自动包含多媒体控件。

HTML <embed> 标签用于嵌入外部内容，例如图像、视频和 Web 应用程序。它通常用于嵌入 Flash 动画或音频/视频播放器等内容。
HTML <object> 标签用于嵌入各种类型的外部资源，包括图像、视频、PDF 和其他 Web 资源。它可以呈现多种类型的文件。

语法

Embed 标签

<embed src = "url/of/resource">

Object 标签

<object data="url/of/resource" type="typeOfResource">

<embed> 标签的属性

属性	描述
width	宽度属性用于以像素描述嵌入文件的宽度。
height	嵌入文件的高度（以像素为单位）。
title	用于标记内容。标题应描述内容。
src	要嵌入的文件的 URL。
type	它指示输入的类型，例如 mp4 和 mp3。

Object 标签的属性

属性	描述
data	资源的位置或路径传递到 data 属性中。
type	type
height	height
width	width
form	其值为表单的 ID。form 属性显示哪个对象与表单关联。
name	为对象指定唯一的名称。
usemap	指定要与对象一起使用的客户端图像映射的 URL。

HTML 多媒体嵌入示例

以下是一些示例，说明如何使用 embed 和 object 标签在网页中呈现多媒体内容。

使用 Embed 元素嵌入视频

要在网页中嵌入外部视频文件，我们可以将视频文件的路径传递到 <embed> 元素的src 属性中。支持的视频格式为 MP4、WebM 和 Ogg。我们不需要使用 controls 属性，因为 <embed> 标签会根据媒体类型自动提供控件。controls 属性允许用户管理视频播放功能。

以下示例演示如何使用 embed 元素嵌入视频文件。

<!DOCTYPE html>
<html>

<head>
   <title>HTML embed Tag</title>
</head>

<body>
   <h1>Playing video using embed tag</h1>
   <embed src="/html/media/video/sampleTP.mp4" 
          type="video/mp4" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

使用 embed 元素嵌入音频

要将音轨添加到网页中，我们可以通过提及音频的type 将音频文件的路径传递到 src 属性中。支持的音频格式为 ogg、mp3 和 wav。

以下示例演示如何使用 embed 元素嵌入音频文件。

<!DOCTYPE html>
<html>

<head>
   <title>HTML embed Tag</title>
</head>

<body>
   <h1>Playing audio using embed tag</h1>
   <embed src = "/html/media/audio/sample_3sec_audio.mp3" 
          type = "audio/mp3" 
          width="450" 
          height="250">
   </embed>
</body>

</html>

使用 Object 元素呈现 PDF

HTML 4 引入了 <object> 元素，它提供了一种通用的对象包含解决方案。<object> 元素允许 HTML 作者指定用户代理呈现对象所需的一切。

我们可以如下所示在 HTML 文档中嵌入 PDF 文档

<!DOCTYPE html>
<html lang="en">

<head>
      <title>PDF Embed Example</title>
</head>

<body>
      <h1>Embedding a PDF Document</h1>
      <p>Here is an embedded PDF document:</p>
      <object data="html/pdf/index.pdf" 
              type="application/pdf" 
              width="300" 
              height="200">
      </object>
</body>

</html>

在网页内呈现 HTML 文档

我们可以如下所示在 HTML 文档本身中嵌入 HTML 文档。

<!DOCTYPE html>
<html lang="en">

<head>
      <title>HTML Embed Example</title>
</head>

<body>
   <h1>Embedding an HTML Document</h1>
   <p>Here is an embedded HTML document:</p>
   <object data="html/index.htm" 
            type="text/html" 
            width="500" 
            height="400">
      alt : <a href="html/index.htm">
         test.htm
      </a>
   </object>
</body>

</html>

Object 标签和 Embed 标签之间的比较

比较两个类似的标签将有助于在正确的位置选择正确的标签。

特性	<object>	<embed>
HTML 标签	<object>	<embed>
用途	嵌入多媒体，如音频、视频、Java Applet、ActiveX、PDF、Flash	主要用于嵌入多媒体内容
属性	支持各种属性，如 data、type、width、height	支持各种属性，如 src、type、width、height
HTML5	支持	支持
后备内容	可以在标签内包含后备内容	不能在标签内包含后备内容

Object 标签支持后备内容，这意味着如果浏览器的某个版本不支持 object 标签，则显示 object 标签内的内容而不是 object 标签本身。

打印页面