響應(yīng)式Web開發(fā)項目化教程（HTML5+CSS3） 課件 項目7 制作視頻播放頁面

項目7

制作視頻播放頁面·多媒體的格式

·支持視頻和音頻的瀏覽器

·嵌入視頻·HTMLDOMVideo對象·嵌入音頻·HTMLDOMAudio對象·視頻、音頻中的source元素

學(xué)習(xí)目標(biāo)能力知識素質(zhì)掌握HTML5為Video和Audio對象提供的方法和事件。1會在網(wǎng)頁中嵌入音頻、視頻2勇于創(chuàng)新、積極探索的職業(yè)精神。3目錄多媒體的格式支持視頻和音頻的瀏覽器嵌入視頻7.17.27.3HTMLDOMVideo對象7.4嵌入音頻7.5HTMLDOMAudio對象7.6視頻、音頻中的source元素7.7項目實踐7.87.1

多媒體的格式①Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。②MPEG4：帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件。③WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。視頻格式?在HTML5中嵌入的音頻格式有以下3種：?在HTML5中嵌入的視頻格式有以下3種：①Vorbis：類似AAC的另一種免費、開源的音頻編碼，用于替代MP3的下一代音頻壓縮技術(shù)。②MP3：一種音頻壓縮技術(shù)，用來大幅度地減少音頻數(shù)據(jù)量。③Wav：在錄音時使用的標(biāo)準(zhǔn)的Windows文件格式，屬于一種無損的音樂格式。音頻格式7.2

支持視頻和音頻的瀏覽器目前，大多數(shù)瀏覽器已經(jīng)實現(xiàn)了對HTML5中視頻和音頻元素的支持，如IE9.0及以上版本、Firefox3.5及以上版本、Opear10.5及以上版本、Chrome3.0及以上版本、Safari3.2及以上版本。雖然各主流瀏覽器都支持HTML5中的視頻和音頻元素，但在不同的瀏覽器上顯示的效果略有不同，這是每一個瀏覽器對內(nèi)置視頻控件樣式的不同而造成的。7.3

嵌入視頻語法格式<videosrc="視頻文件路徑"controls="controls"></video>嵌入視頻在HTML5中，使用<video>標(biāo)記來定義視頻播放器，它不僅是一個播放視頻的元素，其控制欄還實現(xiàn)了包括播放、暫停、進度、音量控制和全屏顯示等功能，用戶可以自定義這些功能的樣式。注意：src屬性用于設(shè)置視頻文件的路徑，controls屬性用于為視頻提供播放控件，src屬性和controls屬性是<video>標(biāo)記的基本屬性，除此之外，<video>標(biāo)記還有autoplay屬性（當(dāng)頁面載入完成后自動播放視頻）、loop屬性（視頻結(jié)束時重新開始播放）、preload屬性（如果使用該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放；如果使用autoplay屬性，則忽略該屬性）、poster屬性（當(dāng)視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來）、width屬性（設(shè)置視頻播放的寬度）、height（設(shè)置視頻播放的高度）。另外，在<video>標(biāo)記和</video>標(biāo)記之間還可以插入文字，用于在瀏覽器不支持視頻播放時顯示。7.4

HTMLDOMVideo對象HTML5為Video對象提供了用于DOM操作的方法和事件方法描述addTextTrack()向視頻添加新的文本軌道canPlayType()檢查瀏覽器是否能夠播放指定的視頻類型load()重新加載視頻元素play()開始播放視頻pause()暫停當(dāng)前播放的視頻Video對象的常用方法及描述7.4

HTMLDOMVideo對象屬性描述autoplay設(shè)置是否在就緒（加載完成）后隨即播放視頻currentSrc返回當(dāng)前視頻的URLcurrentTime設(shè)置或返回視頻中的當(dāng)前播放位置（以秒計）duration返回視頻的長度（以秒計）ended返回視頻的播放是否已結(jié)束error返回表示視頻錯誤狀態(tài)的MediaError對象height設(shè)置或返回視頻的height屬性的值loop設(shè)置視頻是否應(yīng)在結(jié)束時再次播放paused設(shè)置視頻是否暫停src設(shè)置或返回視頻的src屬性的值volume設(shè)置或返回視頻的音量width設(shè)置或返回視頻的width屬性的值Video對象用于DOM操作的常用屬性及描述7.4

HTMLDOMVideo對象事件描述play當(dāng)執(zhí)行方法play()時觸發(fā)playing正在播放時觸發(fā)pause當(dāng)執(zhí)行方法pause()時觸發(fā)ended當(dāng)播放結(jié)束后，停止播放時觸發(fā)waiting在等待加載下一幀時觸發(fā)error當(dāng)獲取媒體的過程中出錯時觸發(fā)Video對象用于DOM操作的常用事件及描述7.5

嵌入音頻語法格式<audiosrc="音頻文件路徑"controls="controls"></audio>嵌入音頻在HTML5中，使用<audio>標(biāo)記來定義音頻播放器。注意：上述語法格式中，src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件，src屬性和controls屬性是<audio>標(biāo)記的基本屬性除此之外，<audio>標(biāo)記還有autoplay屬性（當(dāng)頁面載入完成后自動播放音頻）、loop屬性（音頻結(jié)束時重新開始播放）、preload屬性（如果使用該屬性，則音頻在頁面加載時進行加載，并預(yù)備播放；如果使用autoplay屬性，則忽略該屬性）。另外，在<audio>標(biāo)記和</audio>標(biāo)記之間還可以插入文字，用于在瀏覽器不支持音頻播放時顯示。

7.6

HTMLDOMAudio對象HTML5為Audio對象提供了用于DOM操作的方法和事件方法描述canPlayType()測試瀏覽器是否支持指定的媒體類型load()重新加載音頻元素play()開始播放音頻pause()暫停當(dāng)前播放的音頻Audio對象的常用方法及描述7.6

HTMLDOMAudio對象屬性描述currentSrc返回當(dāng)前音頻的URLcurrentTime設(shè)置或返回音頻中的當(dāng)前播放位置（以秒計）duration返回音頻的長度（以秒計）ended返回音頻的播放是否已結(jié)束error返回表示音頻錯誤狀態(tài)的MediaError對象paused設(shè)置或返回音頻是否暫停muted設(shè)置或返回是否關(guān)閉聲音volume設(shè)置或返回音頻的音量Audio對象用于DOM操作的常用屬性及描述7.6

HTMLDOMAudio對象事件描述play當(dāng)執(zhí)行方法play()時觸發(fā)playing正在播放時觸發(fā)pause當(dāng)執(zhí)行方法pause()時觸發(fā)ended當(dāng)播放結(jié)束后，停止播放時觸發(fā)waiting在等待加載下一幀時觸發(fā)error當(dāng)獲取媒體的過程中出錯時觸發(fā)Audio對象用于DOM操作的常用事件及描述7.7

視頻、音頻中的source元素語法格式<videocontrols="controls"><sourcesrc="視頻文件地址"type="媒體文件類型/格式"><sourcesrc="視頻文件地址"type="媒體文件類型/格式">……</video>雖然大多數(shù)瀏覽器都支持HTML5的視頻和音頻元素，但還有一小部分瀏覽器不支持，為了使視頻和音頻能夠在各個瀏覽器中正常播放，我們往往需要提供多種格式的視頻和音頻文件。在HTML5中，使用source元素可以為video元素或audio元素提供多個備選文件。?使用source元素添加視頻的語法格式7.7

視頻、音頻中的source元素語法格式<audiocontrols="controls"><sourcesrc="音頻文件地址"type="媒體文件類型/格式"><sourcesrc="音頻文件地址"type="媒體文件類型/格式">……