HTML5 特性，包括原生音頻和視頻支持而無需 Flash。
HTML5 <audio> 和 <video> 標(biāo)簽讓我們給站點(diǎn)添加媒體變得簡單。我們只需要設(shè)置 src 屬性來識別媒體資源，包含 controls 屬性讓用戶可以播放和暫停媒體。
下面是在 Web 頁面中嵌入視頻文件最簡單的形式：
<video src="foo.mp4" width="300" height="200" controls>
Your browser does not support the <video> element.
</video>目前的 HTML5 規(guī)范草案還沒有指定瀏覽器應(yīng)該在 video 標(biāo)簽中支持哪種視頻格式。但是最常用的視頻格式是：
我們可以使用帶有媒體類型和其他屬性的 <source> 標(biāo)簽指定媒體文件。video 元素允許使用多個(gè) source 元素，瀏覽器會使用第一個(gè)認(rèn)可的格式：
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls autoplay>
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>便于學(xué)習(xí)上述概念 - 請使用最新版的 Safari 或 Opera 進(jìn)行在線練習(xí)。
HTML5 video 標(biāo)簽可以使用多個(gè)屬性控制外觀和感覺以及各種控制功能：
| 屬性 | 描述 |
|---|---|
| autoplay | 如果指定這個(gè)布爾值屬性，只要沒有停止加載數(shù)據(jù)，視頻就會立刻開始自動播放。 |
| autobuffer | 如果指定這個(gè)布爾值屬性，即使沒有設(shè)置自動播放，視頻也會自動開始緩沖。 |
| controls | 如果指定這個(gè)屬性，就允許用戶控制視頻播放，包括音量控制，快進(jìn)，暫?；蛘呋謴?fù)播放。 |
| height | 這個(gè)屬性以 CSS 像素的形式指定視頻顯示區(qū)域的高度。 |
| loop | 如果指定這個(gè)布爾值屬性，表示允許播放結(jié)束后自動回放。 |
| preload | 指定這個(gè)屬性，視頻會在載入頁面時(shí)加載并準(zhǔn)備就緒。如果指定自動播放則忽略。 |
| poster | 這是一個(gè)圖像 URL，顯示到用戶播放或快進(jìn)。 |
| src | 要嵌入的視頻 URL?？蛇x，可以在 video 塊中使用 <source> 元素替代來指定要嵌入的視頻。 |
| width | 這個(gè)屬性以 CSS 像素的形式指定視頻顯示區(qū)域的寬度。 |
HTML5 支持的 <audio> 標(biāo)簽用于在如下所示的 HTML 或 XHTML 文檔中嵌入語音內(nèi)容。
<audio src="foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>當(dāng)前的 HTML 草案規(guī)范還沒有指定瀏覽器應(yīng)該在 audio 標(biāo)簽中支持哪種音頻格式。但是最常用的音頻格式是 ogg，mp3 和 wav。
我們可以使用帶媒體類型以及其他屬性的的 <source> 標(biāo)簽指定媒體。Audio 元素允許使用多個(gè) source 元素，并且瀏覽器會使用第一個(gè)認(rèn)可的格式：
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="/html5/audio.ogg" type="audio/ogg" />
<source src="/html5/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>便于學(xué)習(xí)上述概念 - 請使用最新版的 Safari 或 Opera 進(jìn)行在線練習(xí)。
HTML5 audio 標(biāo)簽可以使用多個(gè)屬性來控制外觀，感受以及各種控制功能：
| 屬性 | 描述 |
|---|---|
| autoplay | 如果指定這個(gè)布爾值屬性，只要沒停止加載數(shù)據(jù)，音頻就會立刻自動開始播放。 |
| autobuffer | 如果指定這個(gè)布爾值屬性，即使沒有設(shè)置自動播放，音頻也會自動開始緩沖。 |
| controls | 如果指定這個(gè)屬性，表示允許用戶控制音頻播放，包括音量控制，快進(jìn)以及暫停/恢復(fù)播放。 |
| loop | 如果指定這個(gè)布爾值屬性，表示允許音頻播放結(jié)束后自動回放。 |
| preload | 這個(gè)屬性指定加載頁面時(shí)加載音頻并準(zhǔn)備就緒。如果指定自動播放則忽略。 |
| src | 要嵌入的音頻 URL?？蛇x，可以在音頻塊里面使用 <source> 元素指定要嵌入的音頻來替代。 |
HTML5 audio 和 video 標(biāo)簽可以用多個(gè)屬性利用 JavaScript 控制各種控制功能：
| 事件 | 描述 |
|---|---|
| abort | 播放中止時(shí)生成這個(gè)事件。 |
| canplay | 足夠的數(shù)據(jù)可用并且媒體可以播放時(shí)生成這個(gè)事件。 |
| ended | 播放完成時(shí)生成這個(gè)事件。 |
| error | 發(fā)生錯誤時(shí)生成這個(gè)事件。 |
| loadeddata | 媒體第一幀載入完成時(shí)生成這個(gè)事件。 |
| loadstart | 開始加載媒體時(shí)生成這個(gè)事件。 |
| pause | 播放暫停時(shí)生成這個(gè)事件。 |
| play | 播放開始或者恢復(fù)時(shí)生成這個(gè)事件。 |
| progress | 定期通知媒體下載進(jìn)度時(shí)生成這個(gè)事件。 |
| ratechange | 播放速度改變時(shí)生成這個(gè)事件。 |
| seeked | 快進(jìn)操作完成時(shí)生成這個(gè)事件。 |
| seeking | 快進(jìn)操作開始時(shí)生成這個(gè)事件。 |
| suspend | 媒體加載被暫停時(shí)生成這個(gè)事件。 |
| volumechange | 音頻音量變化時(shí)生成這個(gè)事件。 |
| waiting | 請求操作（比如播放）被延遲，等待另一個(gè)操作完成（比如快進(jìn)）時(shí)生成這個(gè)事件。 |
下面是一個(gè)允許播放給定視頻的示例：
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<html>
<body>
<form>
<video width="300" height="200" src="/html5/foo.mp4">
Your browser does not support the <video> element.
</video>
<input type="button" onclick="PlayVideo();" value="Play"/>
</form>
</body>
</html>便于學(xué)習(xí)上述概念 - 請使用最新版的 Safari 或 Opera 進(jìn)行在線練習(xí)。
大多數(shù)服務(wù)器默認(rèn)都沒使用正確的 MIME 類型提供 Ogg 或 mp4 媒體，因此我們可能需要添加適當(dāng)?shù)呐渲谩?/p>
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多