HTML 圖片、音訊與影片 | 梧所不學

在現代網頁設計中，多媒體元素如圖片、影片和音訊已經是不可或缺的了，今天就來介紹如何在 HTML 中嵌入圖片、音訊與影片。

圖片標籤 <img>

在 HTML 中，要使用 <img> 標籤來插入圖片，另外，此標籤不需要閉合標籤。該標籤的常用屬性如下：

1. src：圖片的來源路徑。
2. alt：圖片無法顯示時的替代文字，有助於搜尋引擎優化（SEO）和無障礙設計。
3. srcset：針對不同螢幕尺寸提供不同解析度的圖片。
4. loading：控制圖片的載入方式，有 eager (立即載入) 和 lazy (延遲載入) 兩種選項。

<img src="images/cat.jpg" alt="一隻橘色貓咪" srcset="images/cat-small.jpg 300w, images/cat-medium.jpg 600w">

音訊標籤 <audio>

要在網頁中插入音訊，可以使用 <audio> 標籤，此標籤需要閉合。該標籤的常用的控制屬性如下：

1. controls：顯示播放控制介面，如播放、暫停和音量調整。
2. loop：音訊播放結束後自動重複播放。

<audio src="example.mp3" controls loop></audio>

HTML 支援的音訊格式有 MP3、WAV 和 OGG ，為了確保在不同瀏覽器都能正常播放，我們可以這樣寫：

<audio controls loop>

  <source src="example.mp3" type="audio/mpeg">

  <source src="example.wav" type="audio/wav">

  您的瀏覽器不支援音訊播放。

</audio>

這樣寫的好處是，瀏覽器會自動選擇它支援的格式來播放，如果都不支援，就會顯示最後那行提示文字。

影片標籤 <video>

插入影片的方式與音效類似，使用的是 <video> 標籤，此標籤同樣需要閉合。該標籤的常用的控制屬性如下：

1. controls：顯示播放控制介面。
2. loop：影片播放結束後自動重複播放。
3. poster：在影片載入前顯示的預覽圖片
4. width、height : 設定影片播放區域的大小。

<video width="640" height="360" controls poster="preview.jpg">
  <source src="example.mp4" type="video/mp4">
  您的瀏覽器不支援影片播放。
</video>

YouTube 影片嵌入

如果你想嵌入的是 YouTube 上的影片，就要改用 <iframe> 標籤：

<iframe width="640" height="360" src="https://www.youtube.com/embed/影片ID" frameborder="0" allow="fullscreen"></iframe>

https://www.youtube.com/watch?v=MFf8RsGa1fc 當作範例，MFf8RsGa1fc 就是它的影片ID，把它放到 embed/ 後面就能完成嵌入。

<iframe width="640" height="360" src="https://www.youtube.com/embed/MFf8RsGa1fc" frameborder="0" allow="fullscreen"></iframe>

結語

透過 HTML 的 <img>、<audio> 和 <video> 標籤，我們可以輕鬆地在網頁中加入圖片、音效和影片，讓網頁的內容更加豐富。