HTML5 向網頁嵌入視訊和音訊
現在很多網站上都會使用到視訊和音訊，html5 中提供了展示視訊和音訊的標籤。向網頁嵌入視訊可以使用<video>標籤，而嵌入音訊可以使用<audio>標籤。這兩個標籤都是html5 中新增的標籤，兩個標籤中的屬性和方法也很類似，但也有些不同。其中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元素支援的視訊、音訊格式型別，如果插入的視訊格式不支援，則視訊或音訊不會顯示。