HTML5 特性，包括原生音頻和視頻支持而無需 Flash。

HTML5 <audio> 和 <video> 標(biāo)簽讓我們給站點(diǎn)添加媒體變得簡單。我們只需要設(shè)置 src 屬性來識(shí)別媒體資源，包含 controls 屬性讓用戶可以播放和暫停媒體。

嵌入視頻
下面是在 Web 頁面中嵌入視頻文件最簡單的形式：

目前的 HTML5 規(guī)范草案還沒有指定瀏覽器應(yīng)該在 video 標(biāo)簽中支持哪種視頻格式。但是最常用的視頻格式是：

Ogg：帶有 Thedora 視頻編碼器和 Vorbis 音頻編碼器的 Ogg 文件。
mpeg4：帶有 H.264 視頻編碼器和 AAC 音頻編碼器的 MPEG4 文件。
我們可以使用帶有媒體類型和其他屬性的 <source> 標(biāo)簽指定媒體文件。video 元素允許使用多個(gè) source 元素，瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式：

Video 屬性規(guī)范
HTML5 video 標(biāo)簽可以使用多個(gè)屬性控制外觀和感覺以及各種控制功能：

屬性	描述
autoplay	如果指定這個(gè)布爾值屬性，只要沒有停止加載數(shù)據(jù)，視頻就會(huì)立刻開始自動(dòng)播放。
autobuffer	如果指定這個(gè)布爾值屬性，即使沒有設(shè)置自動(dòng)播放，視頻也會(huì)自動(dòng)開始緩沖。
controls	如果指定這個(gè)屬性，就允許用戶控制視頻播放，包括音量控制，快進(jìn)，暫?；蛘呋謴?fù)播放。
height	這個(gè)屬性以 CSS 像素的形式指定視頻顯示區(qū)域的高度。
loop	如果指定這個(gè)布爾值屬性，表示允許播放結(jié)束后自動(dòng)回放。
preload	指定這個(gè)屬性，視頻會(huì)在載入頁面時(shí)加載并準(zhǔn)備就緒。如果指定自動(dòng)播放則忽略。
poster	這是一個(gè)圖像 URL，顯示到用戶播放或快進(jìn)。
src	要嵌入的視頻 URL?？蛇x，可以在 video 塊中使用 <source> 元素替代來指定要嵌入的視頻。
width	這個(gè)屬性以 CSS 像素的形式指定視頻顯示區(qū)域的寬度。

嵌入音頻
HTML5 支持的 <audio> 標(biāo)簽用于在如下所示的 HTML 或 XHTML 文檔中嵌入語音內(nèi)容。

當(dāng)前的 HTML 草案規(guī)范還沒有指定瀏覽器應(yīng)該在 audio 標(biāo)簽中支持哪種音頻格式。但是最常用的音頻格式是 ogg，mp3 和 wav。

我們可以使用帶媒體類型以及其他屬性的的 <source> 標(biāo)簽指定媒體。Audio 元素允許使用多個(gè) source 元素，并且瀏覽器會(huì)使用第一個(gè)認(rèn)可的格式：

Audio 屬性規(guī)范

HTML5 audio 標(biāo)簽可以使用多個(gè)屬性來控制外觀，感受以及各種控制功能：

屬性	描述
autoplay	如果指定這個(gè)布爾值屬性，只要沒停止加載數(shù)據(jù)，音頻就會(huì)立刻自動(dòng)開始播放。
autobuffer	如果指定這個(gè)布爾值屬性，即使沒有設(shè)置自動(dòng)播放，音頻也會(huì)自動(dòng)開始緩沖。
controls	如果指定這個(gè)屬性，表示允許用戶控制音頻播放，包括音量控制，快進(jìn)以及暫停/恢復(fù)播放。
loop	如果指定這個(gè)布爾值屬性，表示允許音頻播放結(jié)束后自動(dòng)回放。
preload	這個(gè)屬性指定加載頁面時(shí)加載音頻并準(zhǔn)備就緒。如果指定自動(dòng)播放則忽略。
src	要嵌入的音頻 URL?？蛇x，可以在音頻塊里面使用 <source> 元素指定要嵌入的音頻來替代。

處理媒體事件
HTML5 audio 和 video 標(biāo)簽可以用多個(gè)屬性利用 JavaScript 控制各種控制功能：

事件	描述
abort	播放中止時(shí)生成這個(gè)事件。
canplay	足夠的數(shù)據(jù)可用并且媒體可以播放時(shí)生成這個(gè)事件。
ended	播放完成時(shí)生成這個(gè)事件。
error	發(fā)生錯(cuò)誤時(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è)允許播放給定視頻的示例：

配置服務(wù)器媒體類型
大多數(shù)服務(wù)器默認(rèn)都沒使用正確的 MIME 類型提供 Ogg 或 mp4 媒體，因此我們可能需要添加適當(dāng)?shù)呐渲谩?/p>

最新評(píng)論