<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>audio音頻標簽</title> </head> <body> <audio controls autoplay> <source src="deng.ogg" type="audio/ogg"> <!-- source定義媒體資源 --> <source src="deng.mp3" type="audio/mpeg"> 當該元素不被瀏覽器支持時，該段文本被顯示。 </audio> </body></html>在瀏覽器顯示的效果如下：由于不同瀏覽器的內核不一樣，解析出來的效果存在差異，同時也突出了不同的瀏覽器的特點。在谷歌中的效果如下：在火狐中的效果如下：
在Opera中的效果如下：
以上是有autoplay屬性的。下面是沒有autoplay屬性的：
<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>audio標簽</title> </head> <body> <audio controls> <source src="deng.ogg" type="audio/ogg"></source> <!-- source定義媒體資源--> <source src="deng.mp3" type="audio/mpeg"></source> 如果該元素不被瀏覽器支持，則本段文本被顯示。 </audio> </body></html>效果如下：loop：該屬性表示音頻循環播放。若沒有該屬性，音頻播放結束后就暫停，若有該屬性，音頻播放結束后循環開始播放該音頻。無loop屬性的的情況下：播放結束后就暫停
在有loop屬性下，音頻播放結束后循環播放。muted：該屬性規定音頻輸出為靜音，當音頻加載完成后，音頻為靜音狀態。以上均為無mute屬性的情況，如下為有muted屬性的狀態：
<audio muted controls> <source src="deng.ogg" type="audio/ogg"></source> <!-- source定義媒體資源--> <source src="deng.mp3" type="audio/mpeg"></source> 如果該元素不被瀏覽器支持，則本段文本被顯示。 </audio>效果：PReload：當頁面加載時，規定音頻是否加載以及如何加載。preload="none||auto||metadata"分別對應不加載、自動加載以及元數據。例：當preload="none"時，為不加載。
<audio controls preload="none"> <source src="deng.ogg" type="audio/ogg"></source> <!-- source定義媒體資源--> <source src="deng.mp3" type="audio/mpeg"></source> 如果該元素不被瀏覽器支持，則本段文本被顯示。 </audio>效果：<video>標簽
<video>標簽定義視頻。如電影片段或視頻流。常用的格式：MP4、Ogg、Webm。與"audio"類似的屬性有：autoplay、loop、muted、preload。特有的屬性有：widht、height為視頻定義寬、高。poster表示在用戶點擊播放按鈕前播放器中顯示的圖片。
無poster屬性的情況下：<!DOCTYPE html><html lang="zh"> <head> <meta charset="utf-8"> <title>audio標簽</title> </head> <body> <video controls preload="auto" height="200" width="300"> <source src="movie.ogg" type="video/ogg"></source> <!-- source定義媒體資源--> <source src="movie.mp4" type="video/mp4"></source> 如果該元素不被瀏覽器支持，則本段文本被顯示。 </video> </body></html>效果如下：有poster屬性的情況下：
<video controls preload="auto" height="200" width="300" poster="pho.jpg"> <source src="movie.ogg" type="video/ogg"></source> <!-- source定義媒體資源--> <source src="movie.mp4" type="video/mp4"></source> 如果該元素不被瀏覽器支持，則本段文本被顯示。 </video>效果如下：注：<video>標簽的控件按鈕很簡單，如果想要有更加復雜的控件按鈕，則需結合javascript來實現。<audio>、<video>是HTML5新提出的標簽，有效地代替了部分Flash。
新聞熱點
疑難解答
