HTML5中的音頻和視頻第7章匯報(bào)人：***目錄CONTENTaudio音頻標(biāo)簽概述在網(wǎng)頁(yè)中添加音頻文件video視頻標(biāo)簽概述在網(wǎng)頁(yè)中添加視頻文件本章導(dǎo)讀在

HTML5之前，網(wǎng)頁(yè)中的音頻和視頻通常是通過插件播放的，如常見的播放插件

Flash。這就是為什么用戶在用瀏覽器播放音樂和視頻時(shí)，常需要安裝

Flash插件的原因。但是，并不是所有的瀏覽器都擁有同樣的插件，因此，HTML5新增了音頻標(biāo)簽

audio和視頻標(biāo)簽

video。本章就來(lái)學(xué)習(xí)使用這兩個(gè)標(biāo)簽。第一節(jié)PART.01audio音頻標(biāo)簽概述7.1.1audio標(biāo)簽概述audio標(biāo)簽主要是定義播放聲音文件或音頻流的標(biāo)準(zhǔn)，它支持3種音頻格式，分別為

Ogg、MP3和

WAV。如果需要在

HTML5網(wǎng)頁(yè)中插入音頻，其基本格式如下：<audiosrc="song.mp3"controls="controls">…</audio>其中，src屬性是音頻文件的地址，controls屬性是提供添加播放、暫停、音量控制控件的屬性。7.1.1audio標(biāo)簽概述【例7.1】使用

audio標(biāo)簽在頁(yè)面中插入音頻文件，其代碼如下：7.1.1audio標(biāo)簽概述運(yùn)行結(jié)果如圖7-1所示。提示：在

<audio></audio>標(biāo)簽之間也可以插入內(nèi)容，該內(nèi)容用于在不支持

audio標(biāo)簽的瀏覽器中顯示提示信息。圖7-1audio標(biāo)簽的使用7.1.1audio標(biāo)簽概述瀏覽器對(duì)

audio標(biāo)簽支持情況如圖7-2所示。圖7-2瀏覽器對(duì)

audio標(biāo)簽的支持情況7.1.1audio標(biāo)簽概述【例7.2】如果瀏覽器不支持

audio標(biāo)簽，則顯示在<audio></audio>標(biāo)簽之間的內(nèi)容，其代碼如下：7.1.2audio標(biāo)簽的屬性audio標(biāo)簽的常用屬性見表7-1。表7-1audio標(biāo)簽的常用屬性屬性值說(shuō)明autoplayautoplay（自動(dòng)播放）如果出現(xiàn)該控件，則音頻就緒后馬上播放controlscontrols（控制）如果出現(xiàn)該控件，則向用戶顯示控件，如播放按鈕looploop（循環(huán)）如果出現(xiàn)該控件，則每當(dāng)音頻結(jié)束時(shí)重新開始播放preloadpreload（加載）如果出現(xiàn)該控件，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用

autoplay，則忽略該屬性srcurl（地址）要播放的音頻的

URL地址7.1.2audio標(biāo)簽的屬性audio標(biāo)簽可以通過

source屬性添加多個(gè)音頻文件，其具體格式如下：<audiocontrols="controls">

<sourcesrc="123.ogg"type="audio/ogg">

<sourcesrc="123.mp3"type="audio/mpeg"></audio>第二節(jié)PART.02在網(wǎng)頁(yè)中添加音頻文件當(dāng)在網(wǎng)頁(yè)中添加音頻文件時(shí)，用戶可以根據(jù)自己的需要，添加不同類型的音頻文件，如自動(dòng)播放的音頻文件、添加帶有控件的音頻文件、添加循環(huán)播放的音頻文件等?！纠?.3】添加自動(dòng)播放的音頻文件，其代碼如下：<audiocontrols="controls"autoplay="autoplay">

<sourcesrc="song.ogg"type="audio/ogg">

<sourcesrc="song.mp3"type="audio/mpeg"></audio>【例7.4】添加循環(huán)播放的音頻文件，其代碼如下：<audiocontrols="controls"loop="loop">

<sourcesrc="song.ogg"type="audio/ogg">

<sourcesrc="song.mp3"type="audio/mpeg"></audio>第三節(jié)PART.03網(wǎng)站開發(fā)流程7.3.1video標(biāo)簽概述video標(biāo)簽主要是定義播放視頻文件或者視頻流的標(biāo)準(zhǔn)。它支持3種視頻格式，分別為

Ogg、WebM和

MPEG4。如果需要在

HTML5網(wǎng)頁(yè)中插入視頻文件，其基本格式如下：<videosrc="video1.mp4"controls="controls">…</video>其中，<video></video>標(biāo)簽之間的內(nèi)容是供不支持

video標(biāo)簽的瀏覽器顯示的。瀏覽器對(duì)

video標(biāo)簽的支持情況如圖7-3所示。圖7-3瀏覽器對(duì)

video標(biāo)簽的支持情況7.3.1video標(biāo)簽概述【例7.5】video標(biāo)簽使用案例，其代碼如下：7.3.1video標(biāo)簽概述運(yùn)行效果如圖7-4所示。圖7-4video標(biāo)簽使用7.3.2video標(biāo)簽的屬性video標(biāo)簽的常用屬性見表7-2。表7-2video標(biāo)簽的常用屬性屬性值說(shuō)明autoplayautoplay視頻就緒后馬上播放controlscontrols向用戶顯示控件，如播放按鈕looploop每當(dāng)視頻結(jié)束時(shí)重新開始播放preloadpreload視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放，如果使用autoplay屬性，則忽略該屬性srcurl視頻的

URL地址width寬度值設(shè)置視頻播放器的寬度height高度值設(shè)置視頻播放器的高度posterurl當(dāng)視頻未響應(yīng)或緩沖不足時(shí)，該屬性鏈接到一個(gè)圖像，該圖像將以一定比例被顯示出來(lái)7.3.2video標(biāo)簽的屬性由表7-2可知，用戶可以自定義視頻文件顯示的大小，例如，如果想讓視頻以320px×240px的大小顯示，則可以加入

width和

height屬性，其代碼如下：<videosrc="video1.mp4"controls="controls"width="320"height="240"></video>7.3.2video標(biāo)簽的屬性另外，video標(biāo)簽與

audio標(biāo)簽一樣，可以通過

source屬性添加多個(gè)視頻文件，具體格式如下：<videocontrols="controls">

<sourcesrc="video1.mp4"type="video/mp4">

<sourcesrc="video1.ogg"type="video/ogg"></video>第四節(jié)PART.04在網(wǎng)頁(yè)中添加視頻文件當(dāng)在網(wǎng)頁(yè)中添加視頻文件時(shí)，用戶可以根據(jù)自己的需要添加不同類型的視頻文件