Html 简明教程
HTML - Embed Multimedia
在前面的两章中，我们已经使用了 * <audio>* 和 * <video>* 元素在我们的网页中添加音乐和视频。还有其他替代方法可以使用 HTML 标记 <embed> 和 <object> 向网站添加视频、声音、图像或任何其他外部内容。これらのタグにより、ブラウザ自体が自動的にマルチメディアの制御機能を含める。
In the previous two chapters, we have used the <audio> and <video> elements to add music and videos into our web page. There are other alternative ways to add videos, sounds and images or any other external content to the web site by using HTML tags <embed> and <object>. These tag causes the browser itself to include controls for the multimedia automatically.
-
HTML <embed> tag is used to embed external contents such as images, videos and and web applications. It is often used for embedding content like Flash movies or audio/video players.
-
HTML <object> tag is used to embed various types of external resources, including images, videos, PDFs, and other web resources. It can render multiple types of files.
Attributes of <embed> Tag
Attribute |
Description |
Width attribute is used describe width of the embedded file in pixels. |
|
Height of the embedded file in pixels. |
|
It is used to label the content. The title should describe the content. |
|
URL of the file to be embedded. |
|
It indicates the type of input like mp4 and mp3. |
Attributes of Object Tag
Attributes |
Description |
The location or path of the resource is passed into data attribute. |
|
It indicates the type of resource. |
|
It signifies the height of the resource display area. |
|
It signifies the width of the resource display area. |
|
Its value is the id of a form. The form attribute shows which object is associated with the form. |
|
It specify a unique name for the object. |
|
Specifies a URL of a client-side image map to be used with the object. |
Examples of HTML multimedia embedding
以下是一些示例，说明如何使用 embed 和 onject 标记在网页中呈现多媒体内容。
Here are few examples that illustrate how to render multimedia content in a webpage using embed and onject tag.
Embedding a Video using Embed Element
要将外部视频文件嵌入到网页中，我们可以将视频文件的路径传递给 * src* 中的 <embed> 元素。支持的视频格式有 MP4、WebM 和 Ogg。我们无需使用 controls 属性，因为 <embed> 标记会根据媒体类型自动提供控件。controls 属性允许用户管理视频播放功能。
To embed an external video file inside the web page, we can pass the path of video file into the src attribute of <embed> element. The supported video formats are MP4, WebM, and Ogg. We don’t need to use the controls attribute as <embed> tag provides the controls automatically depending on the type of media. The controls attribute allows users to manage the video playback functions.
以下示例演示如何使用 embed 元素嵌入视频文件。
The following example demonstrates how to embed a video file using the embed element.
<!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>Embedding an Audio using embed Element
要向网页中添加音轨，我们可以通过提及音频的 * type* 将音频文件的路径传递给 src 属性。支持的音频格式为 ogg, mp3 和 wav 。
To add a soundtrack into the webpage, we can pass the path of audio file into the src attribute by mentioning the type of audio. The supported audio formats are ogg, mp3 and wav.
以下示例演示如何使用 embed 元素嵌入音频文件。
The following example demonstrates how to embed a audio file using the embed element.
<!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>Render a pdf using Object element
HTML 4 引入了 <object> 元素，它为通用对象包含提供了一种通用解决方案。借助 <object> 元素，HTML 作者可以指定用户代理对象演示所需的所有内容。
HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent.
我们可以按照以下方式将 PDF 文档嵌入到 HTML 文档中：
We can embed a PDF document in an HTML document as follows:
<!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>Render a HTML document inside webpage
我们可以按照以下方式将 HTML 文档本身嵌入到 HTML 文档中。
We can embed an HTML document in an HTML document itself as follows.
<!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>Comparison between Object tag and Embed tag
比较两个类似标记将有助于在正确的地方选择正确的标记。
Comparison between two similar tags will help to choose the right tag on the right place.
Feature |
<object> |
<embed> |
HTML Tag |
<object> |
<embed> |
Usage |
Embeds multimedia like audio, video, Java applets, ActiveX, PDF, Flash |
Primarily used to embed multimedia content |
Attributes |
Supports various attributes like data, type, width, height |
Supports various attributes like src, type, width, height |
HTML5 |
Supported |
Supported |
Fallback Content |
Can include fallback content within the tag |
Cannot include fallback content within the tag |
Object 标签支持后备内容，这意味着如果浏览器版本不支持 object 标签，则会显示写在 object 标签中的内容，而不是 object 标签。
Object tag supports fallback content, which means if a version of browser does not support object tag then the content written inside object tag is displayed instead of object tag.