[HTML5學習筆記]方便好用的影音標籤video與audio

標籤：

過去在網路看影片或聽音樂，都必須安裝所謂的「外掛」，如「QuickTime」、「FlashPlayer」…等，目前隨著 html5 發展越來越成熟，日後（其實目前也算啦～只要該網頁是使用 html5 寫成的）的網頁都可以不必要求瀏覽者安裝外掛，而直接收看影片或是收聽音樂。

影片與音樂的兩個關鍵標籤分別是「video」與「audio」，就簡單來做一下筆記吧！

編碼器

處理網路影片或是音樂之前，我們必須先了解「編碼器」，由於各大廠牌的瀏覽器目前所使用的編碼器不一，而不同的編碼器支援的多媒體格式也不一樣；例如最大的「IE9」支援「mp4」與「Firefox」支援「ogg」就不一樣。

所以「目前」對網頁設計者來說，比較麻煩的是：必須滿足各種瀏覽器的使用者；也就是說，一個音樂檔必須轉成支援「Chrome」與「Firefox」兩種格式的檔案（日後應該會統一吧！哈！）

就目前來說，針對五大瀏覽器（Chrome、Firefox、Safari、Opera、IE9）所支援的影片格式，大多是以「mp4」與「ogv」為主；音樂格式則是以「mp3」與「ogg」為主，所以如果我們在空間放上這兩種格式的影片或是音樂檔，大多數朋友的瀏覽器都是可以正常播放的。（如果你還是 XP 的 IE8，鼻涕建議您還是快點換作業系統，更新到 IE9 吧！）

audio 標籤

關於音樂檔案格式的轉換，可以參考「這篇文章」，將你的 mp3 多轉出一個「ogg」格式的音樂檔，與 mp3 同時放到你的空間中。接著在網頁只要加入以下程式碼：

<audio controls autoplay>
<source src="ogg 音樂檔路徑 ">
</source><source src="mp3 音樂檔案路徑 ">
</source></audio>

以上「autoplay」是讓音樂自動播放；而「controls」是指加上控制面板；由於我們必須考量各瀏覽器，所以加入「mp3」與「ogg」兩個檔案路徑。

video 標籤

關於影片檔案格式的轉換，可以參考「這篇文章」。與音樂標籤相似，只要將標籤換成「video」即可。

<video width="640" height="368" preload controls poster=" 圖片路徑 ">
<source src="mp4 影片檔路徑 ">
</source><source src="ogv 影片檔路徑 ">
</source></video>

以上的「preload」是指網頁載入時就預先載入影片，通常因為影片容量較大，所以我們會加上這個屬性，音樂檔則不用；而「poster」則是瀏覽器無法播放影片時，在該位置放置的取代圖片。