極客書

HTML - Embed Multimedia

有時你需要在網頁中添加音樂或視頻。向網站添加視頻或聲音的最簡單方法是包含名爲<embed>的特殊HTML標記。此標記使瀏覽器本身包含多媒體控制項，這些控制項自動提供瀏覽器支持標記和給定的媒體類型。

對於無法識別「嵌入」標記的瀏覽器，您還可以包含一個<noembed>標記。例如，您可以使用<嵌入>顯示您選擇的電影，如果瀏覽器不支持<嵌入>標記，則使用<未嵌入>顯示單個JPG圖像。

Example

下面是一個播放嵌入式midi文件的簡單示例−

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

The <embed> Tag Attributes

下面是可與<嵌入>標記一起使用的重要屬性列表。

注意：HTML5中不推薦使用的align和autostart屬性。不要使用這些屬性。

Sr.No Attribute & Description
1

對齊

確定如何對齊對象。它可以設置爲中間，左或右。
2

自動啓動

此布爾屬性指示媒體是否應自動啓動。你可以設置爲真或假。
3

循環

指定是否應連續播放聲音（將「循環」設置爲「真」）、特定次數（正值）或根本不播放（false）
4

播放計數

指定播放聲音的次數。如果您使用IE，這是循環的替代選項。
5

隱藏的

指定是否應在頁面上顯示多媒體對象。假值表示否，真值表示是。
6

寬度

對象的寬度（像素）
7

高度

對象的高度（像素）
8

代表

用於引用對象的名稱。
9

src公司

要嵌入的對象的URL。
10

音量

控制聲音的音量。可以從0（關）到100（滿容量）。

Supported Video Types

您可以在嵌入標記中使用各種媒體類型，如Flash movies（.swf）、AVI的（.AVI）和MOV的（.MOV）文件類型。

  • .swf文件是由Macromedia的Flash程序創建的文件類型。

  • .wmv文件是Microsoft窗口的媒體視頻文件類型。

  • .mov文件是蘋果的快速電影格式。

  • .mpeg文件是由Moving Pictures專家組創建的電影文件。

Live Demo 
<!DOCTYPE html>
<html>

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

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

這將產生以下結果&負;

Background Audio

您可以使用HTML<bgsound>標記在網頁背景中播放音軌。此標記僅受Internet Explorer支持，大多數其他瀏覽器忽略此標記。當用戶首次下載並顯示宿主文檔時，它將下載並播放音頻文件。每當用戶刷新瀏覽器時，背景聲音文件也將重播。

注意−bgsound標記已棄用，應該在將來的HTML版本中刪除它。所以不應該使用它們，而是建議使用HTML5標記音頻來添加聲音。但仍出於學習目的，本章將詳細介紹bgsound標籤。

此標記只有兩個屬性loop和src。這兩個屬性的含義與上述相同。

下面是一個播放小型midi文件的簡單示例−

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

這將產生空白螢幕。此標記不顯示任何組件，並且保持隱藏狀態。

Internet Explorer也只能處理三種不同的聲音格式文件−wav，pc的本機格式;au，大多數Unix工作站的本機格式;MIDI，一種通用的音樂編碼方案。

HTML Object tag

HTML 4引入了<object>元素，它提供了通用對象包含的通用解決方案。<object>。

這裡有幾個例子;

Example - 1

您可以將HTML文檔嵌入HTML文檔本身，如下所示−

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

如果瀏覽器不支持對象標記，這裡的alt屬性將出現在圖片中。

Example - 2

您可以將PDF文檔嵌入到HTML文檔中，如下所示−

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

Example - 3

您可以使用<param>標記指定與文檔相關的一些參數。下面是一個嵌入wav文件的示例−

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

Example - 4

您可以添加一個flash文檔，如下所示;

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

Example - 5

您可以將java applet添加到HTML文檔中，如下所示−

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

classid屬性標識要使用的Java插件版本。您可以使用可選的codebase屬性來指定是否以及如何下載JRE。