Html 简明教程

HTML - Embed Multimedia

在前面的两章中，我们已经使用了 * <audio>* 和 * <video>* 元素在我们的网页中添加音乐和视频。还有其他替代方法可以使用 HTML 标记 <embed> 和 <object> 向网站添加视频、声音、图像或任何其他外部内容。これらのタグにより、ブラウザ自体が自動的にマルチメディアの制御機能を含める。

  1. HTML &lt;embed&gt; タグは、画像、ビデオ、Web アプリケーションなどの外部コンテンツを埋め込むために使用されます。これは Flash ムービーやオーディオ/ビデオ プレーヤーを埋め込むために使用されることがよくあります。

  2. HTML &lt;object&gt; タグは、画像、ビデオ、PDF、他の Web リソースなど、さまざまなタイプの外部リソースを埋め込むために使用されます。これにより、複数のタイプのファイルがレンダリングされます。

Syntax

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

Attributes of <embed> Tag

Attribute

Description

width

width 属性は埋め込まれたファイルの横幅をピクセル単位で記述するために使用されます。

height

埋め込まれたファイルの縦幅をピクセル単位で記述するために使用されます。

title

コンテンツにラベルを付けるために使用されます。タイトルは内容を説明する必要があります。

src

埋め込むファイルの URL です。

type

これは mp4 や mp3 のような入力の種類を示します。

Attributes of Object Tag

Attributes

Description

data

リソースのロケーションまたはパスは data 属性に渡されます。

type

これはリソースの種類を示します。

height

它表示资源显示区域的高度。

width

它表示资源显示区域的宽度。

form

其值是一个表单的 ID。表单属性显示与该表单关联的对象。

name

它为对象指定一个唯一名称。

usemap

指定将与该对象一起使用的客户端图像映射的 URL。

Examples of HTML multimedia embedding

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

Embedding a Video using Embed Element

要将外部视频文件嵌入到网页中，我们可以将视频文件的路径传递给 * src* 中的 <embed> 元素。支持的视频格式有 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>

Embedding an Audio using embed Element

要向网页中添加音轨，我们可以通过提及音频的 * 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>

Render a pdf using Object element

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>

Render a HTML document inside webpage

我们可以按照以下方式将 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>

Comparison between Object tag and Embed tag

比较两个类似标记将有助于在正确的地方选择正确的标记。

Feature

<object>

<embed>

HTML Tag

<object>

<embed>

Usage

嵌入多媒体例如音频、视频、Java 小程序、ActiveX、PDF、Flash

主要用于嵌入多媒体内容

Attributes

支持多种属性，例如 data、type、width、height

支持多种属性，例如 src、type、width、height

HTML5

Supported

Supported

Fallback Content

可以在标记中包括后备内容

无法将后备内容包含在标签中

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