在HTML5之前，要在網站上展示視訊、音訊、動畫等多媒體資訊，除了使用第三方自主開發的播放器，使用最多的工具應該算是Flash了，但是它們都需要在瀏覽器中安裝各種外掛才能使用，有時速度很慢。HTML5的出現使這一局面得到了改觀。在HTML5中提供了音訊的標準介面，多媒體播放再也不需要安裝外掛了，只需要一個支援HTML5的瀏覽器就可以了。本節介紹video和audio這兩個HTML5新增加的元素，它們分別用來處理視訊與音訊資料。目前Safari 3以上、Firefox 4以上、Opera 10以上，以及Google Chrome 3.0以上的瀏覽器都實現了對這兩個媒體元素的支援。以audio元素為例，只要把播放音訊的URL地址指定給該元素的src屬性就可以了。程式碼如下所示：

將上包含上述程式碼的html檔案在瀏覽器中開啟，如果瀏覽器支援音訊功能則出現音訊播放器，否則頁面顯示“您的瀏覽器不支援音訊audio功能”。效果如圖4所示：

圖4  音訊<audio>標籤

視訊video元素的使用方法和audio相似，只要設定好元素的長、寬等屬性即可。程式碼如下所示：

圖4.5  視訊<video>標籤

各瀏覽器對於各種媒體型別及編碼格式的支援情況各不相同，可以通過source元素來為同一個媒體資料指定多種播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支援的播放格式進行播放。瀏覽器的選擇順序為程式碼中的書寫順序，它會從上往下判斷自己對該播放格式是否支援，選到為止。各瀏覽器對於編碼格式的支援情況如表3所示。

表3  各瀏覽器對於編碼格式的支援情況

audio和video元素通過一些常用屬性的使用，可以定義和擴充套件一些功能，它們所具有的屬性大致相同。兩個元素常用的屬性如表4所示。

表4  audio和video元素常見屬性說明

除了表4中提供的屬性，還有一些屬性、方法和事件可用，但需要結合JavaScript來實現一些特定的效果。例如，通過error屬性可以處理出現的錯誤；使用networkState屬性讀取當前網路狀態；使用play方法來播放媒體；使用load方法重新載入媒體進行播放；通過timeupdate事件來通知當前播放位置的改變；結合JavaScript來顯示當前