現在很多網站上都會使用到視頻和音頻，html5 中提供了展示視頻和音頻的標簽。向網頁嵌入視頻可以使用 <video> 標簽，而嵌入音頻可以使用 <audio> 標簽。這兩個標簽都是 html 5 中新增的標簽，兩個標簽中的屬性和方法也很類似，但也有些不同。其中 audio 元素用於定義聲音，比如音樂， video 元素用於定義視頻，如電影等。
向網頁中嵌入視頻
<video> 標簽可以用於定義視頻，且提供了播放、暫停、音量控件來控制視頻。舉個例子，像我們俠課島網站上，課程視頻播放，就是通過 <video> 標簽來實現的。下面我們來看一下如何向網頁中嵌入一個視頻。
示例：
首先我們准備一個視頻，例如一個 test.mp4，然后使用 <video> 標簽嵌入視頻，如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5學習(9xkd.com)</title> </head> <body> <video src="./test.mp4" controls="controls" width="700px" height="400px"></video> </body> </html> 在瀏覽器中的預覽效果： 
從上圖中可以看到，我們通過 <video> 標簽成功向網頁中插入了一個視頻， 其中 src 屬性用於引入要播放的視頻的 URL，注意視頻地址一定要正確，如果地址錯誤，視頻是不能顯示的。然后我們通過 width、height 屬性設置了視頻的寬度為 700px ，高度為 400px。
然后可以看到，視頻上還顯示了播放、調整音量等控件，當我們點擊播放按鈕時，視頻就會開始播放。這是因為我們設置了 controls 屬性，如果我們沒有設置這個屬性，視頻將會顯示一個靜止的畫面，並且不管怎么點擊都是沒有反應的。大家可以試一下，不設置 controls 屬性然后在瀏覽器中查看演示效果，這里就不演示給大家看了。
video 元素中的常用屬性如下所示：
| 屬性 | 描述 |
|---|---|
| src | 將要播放的視頻的 URL |
| controls | 如果設置該屬性，則向用戶顯示控件，例如播放按鈕，音量按鈕等 |
| autoplay | 如果設置該屬性，則視頻在就緒后馬上播放，設置了 autoplay 后會忽略屬性 preload |
| width | 設置視頻播放器的寬度 |
| height | 設置視頻播放器的高度 |
| loop | 如果設置該屬性，則當媒介文件完成播放后再次開始播放 |
| muted | 設置視頻的音頻輸出應該被靜音 |
| poster | 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像 |
| preload | 如果設置該屬性，則視頻在頁面加載時進行加載，並預備播放 |
有些比較老的瀏覽器可能不支持 <video> 標簽，例如 IE8 及以下的瀏覽器就不支持，而 IE9+、Firefox、Opera、Chrome、Safari 等瀏覽器都支持 <video> 標簽。
所以我們可以在 <video> 標簽中放置文本內容，這樣當某個瀏覽器不支持此標簽時，就可以顯示提示內容：
<video src="./test.mp4" controls="controls" width="700px" height="400px"> 您的瀏覽器不支持 video 標簽 </video> 這樣用戶就會知道，是因為瀏覽器不支持所以加載視頻不成功，可以換一個瀏覽器。
視頻的格式
像我們平時看到的視頻格式有很多種，例如常見的有 mp4、AVI、mov、rmvb、Ogg 等等， 目前 video 元素支持的視頻格式有下面三種：
| 視頻格式 | 描述 |
|---|---|
| Ogg | 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 |
| MPEG 4（MP4） | 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 |
| WebM | 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件 |
這三種視頻格式，在不同的瀏覽器中兼容性不同，例如 MP4 格式不支持 Firefox 和 Opera 瀏覽器，Ogg 格式不支持IE、Safari 瀏覽器，WebM 格式不支持IE、Safari 瀏覽器等。
所以我們可能需要在不同的瀏覽器中使用不同的視頻格式，這需要用到 <source> 標簽。
source標簽
<source> 標簽可以為媒體元素定義媒介資源，例如 video 和 audio 元素。
例如 <video> 標簽中可以包含多個 <source> 標簽，<source> 標簽可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。
示例：
例如我們插入的視頻播放器，帶有兩個源文件，瀏覽器會根據需要來選擇源文件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5學習(9xkd.com)</title> </head> <body> <video controls="controls" width="700px" height="400px"> <source src="./test.mp4" type="video/mp4"> <source src="./test.ogg" type="video/ogg"> 您的瀏覽器不支持 video 標簽 </video> </body> </html> 像上述代碼中，如果是 Safari 瀏覽器就會選擇第一個源文件，如果是 Firefox 瀏覽器則會選擇第二個源文件。
<source> 標簽有三個屬性：
| 屬性 | 描述 |
|---|---|
| src | 用於規定媒體文件的 URL |
| media | 用於規定媒體資源的類型，供瀏覽器決定是否下載 |
| type | 用於規定媒體資源的 MIME 類型，常用的 MIME 類型有 video/ogg、video/mp4、video/webm |
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
向網頁中嵌入音頻
向網頁中嵌入音頻可以使用 <audio> 標簽，此標簽的使用和 <video> 標簽類似。插入視頻是有畫面的，我們也可以調整視頻的寬和高等，而插入音頻是沒有畫面的。
audio 元素支持的格式和 video 元素也有一點區別：
| 音頻格式 | MIME類型 |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
示例：
例如我們插入一段音頻，在瀏覽器中可以看到，是沒有畫面的，只有聲音：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5學習(9xkd.com)</title> </head> <body> <audio controls="controls"> <source src="./test.mp4" type="audio/mpeg"> <source src="./test.ogg" type="audio/ogg"> 您的瀏覽器不支持 audio 標簽 </audio> </body> </html> 在瀏覽器中的演示效果： 
向網頁中嵌入音頻時，也可以通過 <source> 標簽來指定兩個源文件，<source> 標簽允許規定兩個視頻或者音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。
audio 元素中的常用屬性和 video 元素差不多，但是 audio 元素中沒有 width、height 等屬性。
常用屬性如下所示：
| 屬性 | 描述 |
|---|---|
| src | 要播放的音頻的 URL |
| controls | 如果設置該屬性，則向用戶顯示控件，例如播放按鈕 |
| autoplay | 如果設置該屬性，則音頻在就緒后馬上播放 |
| loop | 如果設置該屬性，則每當音頻結束時重新開始播放 |
| muted | 規定音頻輸出應該被靜音 |
| preload | 如果設置該屬性，則音頻在頁面加載時進行加載，並預備播放 |
總結
向網頁中嵌入視頻和音頻其實很簡單，要注意 video 元素 和 audio 元素支持的視頻、音頻格式類型，如果插入的視頻格式不支持，則視頻或音頻不會顯示。