《Web前端開發(fā)項目教程》網(wǎng)頁中視音頻的應(yīng)用

項目10網(wǎng)頁中視音頻的應(yīng)用任務(wù)10-1網(wǎng)頁中視音頻的應(yīng)用

知識點了解video元素支持的視頻格式了解audio元素支持的音頻格式掌握在網(wǎng)頁中引入音視頻的標(biāo)準(zhǔn)方法及其屬性技能點能夠在網(wǎng)頁中熟練加入音頻能夠在網(wǎng)頁中熟練加入視頻能夠根據(jù)需要對音視頻進(jìn)行屬性設(shè)置一、web上的視頻在HTML5出現(xiàn)之前Web視頻并沒有一個標(biāo)準(zhǔn)，有些網(wǎng)站使用Flash插入視頻，但是要求用戶有Flash播放器；也有些網(wǎng)站使用Java播放器，但是要在JVM虛擬機(jī)中解碼視頻和音頻需要用戶擁有一臺配置較高的機(jī)器。HTML5規(guī)定了一種通過video元素來包含視頻的標(biāo)準(zhǔn)方法。video元素目前僅支持三種格式的視頻文件。一、web上的視頻——video元素支持的視頻格式在HTML5中支持的視頻格式主要包括Ogg、MPEG4、WebM等。Ogg：指帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。Ogg指一種文件封裝容器，可以納入各式各樣自由和開放源代碼的編解碼器，包含音效、視頻、文字與元數(shù)據(jù)的處理。其中，Theora是開源的免費的視頻壓縮編碼技術(shù)，質(zhì)量可以與主流的數(shù)字視頻壓縮編解碼標(biāo)準(zhǔn)H.264相媲美；Vorbis是

Ogg的音頻編碼，類似于MP3等的音樂格式，但是它是完全免費、開放和沒有專利限制的。一、web上的視頻——video元素支持的視頻格式MPEG4：指帶有H.264視頻編碼和AAC音頻編碼的mpeg文件。同等條件下，mpeg4格式的視頻質(zhì)量較好，它的專利被MPEG-LA公司控制，任何支持播放mpeg4視頻的設(shè)備，都必須擁有MPEG-LA頒發(fā)的許可證。mpeg4有3種編碼，mpg4（xdiv），mpg4（xvid），avc（h264），h.264是公認(rèn)的mp4標(biāo)準(zhǔn)編碼，如果在網(wǎng)頁開發(fā)中有瀏覽器不能識別的mpeg文件可以嘗試用視頻格式轉(zhuǎn)換器轉(zhuǎn)換一下格式。AAC是一種由MPEG-4標(biāo)準(zhǔn)定義的有損音頻壓縮格式，提供了目前最高的編碼效率。WebM：指帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。WebM由Google提出，是一個開放、免費的媒體文件格式，其中Google將其擁有的VP8視頻編碼技術(shù)開源，OggVorbis本來就是開放格式。WebM項目旨在為對每個人都開放的網(wǎng)絡(luò)開發(fā)高質(zhì)量、開放的視頻格式，其重點是解決視頻服務(wù)這一核心的網(wǎng)絡(luò)用戶體驗。一、web上的視頻——語法格式在html5中，Web開發(fā)者可以用一種標(biāo)準(zhǔn)的方式指定視頻的外觀。語法格式如下：<videosrc="視頻文件"controls="controls"></video>使用<video>標(biāo)簽來定義視頻播放器，不僅僅設(shè)置了要播放的視頻文件，還包括視頻的控制欄，例如播放、暫停、進(jìn)度和音量控制、全屏等功能，更重要的是還可以自定義這些功能和控制欄的樣式。一、web上的視頻——video基本屬性src和controls是<video>標(biāo)簽的基本屬性，src屬性用于設(shè)置視頻文件的路徑，controls屬性用于為視頻提供播放控件，并且<video></video>標(biāo)簽之間還可以插入文字，用于瀏覽器不能支持視頻的時候顯示。例如：<videosrc="vedio1.mp4"controls>瀏覽器不支持該視頻，請下載最新版本的瀏覽器</video>注意：蘋果操作系統(tǒng)的Safari瀏覽器只支持MP4類型，而ogg格式的視頻則是適用于Firefox、Opera以及Chrome瀏覽器。IE8不支持video元素，IE9開始提供了對使用MPEG4的video元素的支持。一、web上的視頻——source元素如果我們不確定自己的瀏覽器支持什么格式的視頻，可以使用source元素給瀏覽器提供多種格式的視頻文件選擇。video元素允許嵌套多個source元素，source元素可以鏈接不同的視頻文件，瀏覽器將使用第一個可識別的格式。例如：<videowidth="500"height="250"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">

您的瀏覽器不支持此種視頻格式。</video>一、web上的視頻——其他常用屬性屬性值描述width像素或百分比設(shè)置視頻播放窗口的寬度height像素或百分比設(shè)置視頻播放窗口的高度autoplayautoplay當(dāng)頁面載入完成后自動播放視頻。looploop視頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。一、web上的視頻——其他常用屬性width、height屬性用于設(shè)置視頻播放窗口的寬高。在HTML5中，經(jīng)常會通過為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁面時就會預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁面的布局不產(chǎn)生變化。視頻播放時有時上下還有黑邊框，用戶體驗很不好。為了讓視頻在web端自適應(yīng)，可以設(shè)置video標(biāo)簽屬性寬度為100%，高度為auto,如下：video{/*width:100%*/max-width:100%;height:auto;}如果width屬性設(shè)置為100%，視頻播放器會根據(jù)屏幕大小自動調(diào)整比例，且可以比原始尺寸大；max-width屬性設(shè)置為100%，視頻播放器會根據(jù)屏幕自動調(diào)整比例，但不會超過其原始大小。一、web上的視頻——其他常用屬性autoplay屬性用于設(shè)置視頻是否自動播放，是一個布爾屬性。當(dāng)出現(xiàn)時，表示自動播放，去掉表示不自動播放。<videowidth="500"height="350"src="vedio1.mp4"autoplay="autoplay"></video>注意，表示自動播放時該屬性要么沒有值，要么其值恒等于屬性名；而在標(biāo)簽中不使用該屬性表示不自動播放。loop屬性用于指定視頻是否循環(huán)播放，同樣也是一個布爾屬性。<videowidth="500"height="350"src="vedio1.mp4"autoplayloop></video>一、web上的視頻——其他常用屬性preload屬性用于定義視頻是否預(yù)加載。有三個屬性值可選擇：none、metadata、auto。如果不使用此屬性，默認(rèn)為auto。<videosrc="vedio1.mp4"autoplaypreload="none"></video>none：不進(jìn)行預(yù)加載。選擇此屬性值多數(shù)情況是開發(fā)者認(rèn)為用戶不期望此視頻，或者為了減少HTTP請求。metadata：部分預(yù)加載。選用此屬性值預(yù)先為用戶提供一些元數(shù)據(jù)（包括尺寸，第一幀，曲目列表，持續(xù)時間等等）。auto：全部預(yù)加載。為用戶預(yù)先加載了該視頻。二、web上的音頻HTML5出現(xiàn)之前在網(wǎng)頁中播放音頻也沒有固定的標(biāo)準(zhǔn)，大多數(shù)音頻是通過插件（如Flash）來播放的，但是并非所有瀏覽器都有同樣的插件，尤其是主流瀏覽器已經(jīng)紛紛宣布停止支持Flash插件，網(wǎng)站正在轉(zhuǎn)向開放的web技術(shù)。HTML5規(guī)定了一種通過audio元素來包含音頻的標(biāo)準(zhǔn)方法。二、web上的音頻——audio元素支持的音頻格式OggVorbis：OggVorbis是一種音頻壓縮格式，類似于MP3等音樂格式。Ogg是完全免費、開放和沒有專利限制的。OggVorbis文件的擴(kuò)展名是".ogg"，這種文件的設(shè)計格式非常先進(jìn)，可以在未來的任何播放器上播放，因此，這種文件格式可以不斷地進(jìn)行大小和音質(zhì)的改良，而不影響舊有的編碼器或播放器。MP3：是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（MovingPictureExpertsGroupAudioLayerIII），簡稱為MP3。它被設(shè)計用來大幅度地降低音頻數(shù)據(jù)量。wav：是錄音時用的標(biāo)準(zhǔn)的Windows文件格式，文件的擴(kuò)展名為“wav”，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無損音樂格式的一種。二、web上的音頻——語法格式audio元素語法格式：<audiosrc="音頻文件路徑"controls>您的瀏覽器不支持audio標(biāo)簽</audio>src屬性描述了音頻文件的地址(URL)，controls屬性規(guī)定瀏覽器為音頻提供播放控件。二、web上的音頻——語法格式屬性值描述autoplayautoplay當(dāng)頁面載入完成后自動播放音頻。looploop音頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。audio其他常用屬性二、web上的音頻——音頻中的source元素目前所有的主流PC、移動端瀏覽器的最新版已經(jīng)全部支持了mp3格式，Ogg文件格式的音頻可以在Firefox、Opera和Chrome瀏覽器下播放，如果要在InternetExplorer和Safari瀏覽器播放音頻，則必須使用MP3文件。為了解決不同瀏覽器對音頻文件的兼容性，在HTML5中，仍然可以運(yùn)用source元素可以為audio元素提供多個備用文件。<audiocontrols="controls"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> <sou