HTML <object> 標簽詳解

基本語法與核心屬性

<object> 標簽是 HTML 中用于嵌入外部資源的通用機制。其核心功能是通過 data 和 type 屬性加載資源，并通過參數（<param>）傳遞配置信息。以下是其基礎語法：

<object data="resource_url" type="MIME_type" width="width" height="height"><!-- 回退內容（fallback content） --><p>您的瀏覽器不支持嵌入此資源。</p>
</object>

關鍵屬性解析

1. data

指定資源的 URL，支持相對路徑或絕對路徑。例如：

<object data="image.jpg" type="image/jpeg"></object>

2. type

定義資源的 MIME 類型，幫助瀏覽器識別如何處理資源。例如：

• 圖像：image/jpeg
• 音頻：audio/mpeg
• 視頻：video/mp4
• PDF：application/pdf

3. width & height

設置嵌入資源的尺寸，支持像素或百分比。例如：

<object data="video.mp4" type="video/mp4" width="600" height="400"></object>

4. name

為對象命名，便于 JavaScript 調用。例如：

<object name="myVideo" data="video.mp4" type="video/mp4"></object>

---

嵌入不同類型的資源

1. 嵌入圖像

<object data="image.jpg" type="image/jpeg" width="300" height="200"><p>無法加載圖像。</p>
</object>

2. 嵌入音頻

<object data="audio.mp3" type="audio/mpeg" width="100%" height="50"><param name="autoplay" value="true"> <!-- 自動播放 --><param name="loop" value="true">     <!-- 循環播放 --><p>請安裝音頻播放器。</p>
</object>

3. 嵌入視頻

<object data="video.mp4" type="video/mp4" width="640" height="360"><param name="controller" value="true"> <!-- 顯示控制欄 --><p>請安裝視頻播放器。</p>
</object>

4. 嵌入 PDF

<object data="document.pdf" type="application/pdf" width="100%" height="600"><p>您的瀏覽器不支持 PDF 查看器。</p>
</object>

---

參數傳遞與回退內容

參數（<param>）的使用

通過 <param> 標簽向嵌入資源傳遞參數，常用于配置播放器行為。例如：

<object data="video.mp4" type="video/mp4" width="640" height="360"><param name="autoplay" value="true">  <!-- 自動播放 --><param name="volume" value="0.5">     <!-- 初始音量 --><p>請安裝視頻播放器。</p>
</object>

回退內容（Fallback Content）

當瀏覽器不支持資源類型或加載失敗時，顯示回退內容。例如：

<object data="unsupported-resource.abc" type="application/unknown"><p>此資源無法加載，請嘗試以下鏈接：<a href="unsupported-resource.abc">下載資源</a></p>
</object>

---

兼容性與替代方案

歷史背景與兼容性問題

- IE 與 ActiveX：舊版 IE 依賴 classid 和 codebase 屬性加載 ActiveX 控件。例如：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400"><param name="movie" value="flash_movie.swf"><param name="quality" value="high"><embed src="flash_movie.swf" quality="high" width="550" height="400"></embed>
</object>

- 跨瀏覽器差異：主流瀏覽器曾使用不同機制加載相同資源類型，導致兼容性問題。

現代替代方案

• <img> 標簽：優先用于圖像嵌入，而非 <object>。
• <video> 與 <audio>：HTML5 提供的專用標簽，簡化了多媒體嵌入。例如：

  <video controls src="video.mp4" width="640" height="360"></video>
  

---

HTML5 中的變化

棄用屬性

HTML5 廢棄了部分舊屬性，如 align、hspace、vspace 等。例如：

<!-- HTML4 -->
<object align="middle" hspace="10" vspace="10" ...></object><!-- HTML5 -->
<object style="display: block; margin: 10px auto;" ...></object>

新增屬性

• form：指定對象所屬的表單，允許對象參與表單提交。
• usemap：關聯客戶端圖像映射（<map>）。

---

總結

<object> 標簽提供了靈活的資源嵌入機制，但其復雜性和兼容性問題限制了現代應用。開發者應優先使用語義化標簽（如 <video>、<audio>），并在必要時通過 <object> 提供回退方案。理解 <param> 和回退內容的使用，有助于構建更健壯的網頁體驗。