HTML - 嵌入多媒体

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

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

语法

嵌入标签：


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

对象标签：


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

<embed>标签的属性

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

<object>标签的属性

属性	描述
data	资源的位置或路径将传递到 data 属性中。
type	它指示资源的类型。
height	它表示资源显示区域的高度。
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>标签嵌入音频

要在网页中添加配乐，我们可以通过<embed>标签将音频文件的路径传递到 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 作者指定对象由用户代理呈现所需的所有内容。

我们可以将 PDF 文档嵌入到 HTML 文档中，如下所示：


<!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 小程序、ActiveX、PDF、Flash 等多媒体	主要用于嵌入多媒体内容
属性	支持数据、类型、宽度、高度等各种属性	支持各种属性，如src、type、width、height
HTML5格式	支持	支持
回退内容	可以在代码中包含回退内容	不能在代码中包含回退内容

对象标签支持回退内容，这意味着如果某个浏览器版本不支持对象标签，则会显示对象标签中写入的内容，而不是对象标签。

打印本页