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 標籤本身。

列印頁面