第8章多媒體技術(shù)ppt課件

1、讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效第八章 多媒體技術(shù) HTML5多媒體的特性 嵌入視頻和音頻 視頻和音頻的方法和事件多媒體的支持條件多媒體的支持條件CSS控制視頻的寬高控制視頻的寬高讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.48.4CSS控制視頻的寬高8.18.1HTML5多媒體的特性8.38.3嵌入視頻和音頻目錄目錄8.28.2多媒體的支持條件8.58.5視頻和音頻的方法和事件8.68.6HTML5音視頻發(fā)展趨勢(shì)8.58.5制作音樂播放界面讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.1 HTML5多媒體的特性1 1知識(shí)引入知識(shí)引入HTML5多媒體的特性多媒體的特性讓I

2、T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.1 知識(shí)點(diǎn)講解在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁(yè)面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁(yè)面中。通過這樣的方式實(shí)現(xiàn)的音視頻功能，不僅需要借助第三方插件而且實(shí)現(xiàn)代碼復(fù)雜冗長(zhǎng)，運(yùn)用HTML5中新增的video標(biāo)簽和audio標(biāo)簽可以避免這樣的問題。1、HTML5多媒體的特性多媒體的特性讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.2 多媒體的支持條件1 12 2知識(shí)引入知識(shí)引入視頻和音頻編解碼器視頻和音頻編解碼器多媒體的格式多媒體的格式3 3支持視頻和音頻的瀏覽器支持視頻和音頻的瀏覽器讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)

3、習(xí)更有效8.2 知識(shí)點(diǎn)講解（1）視頻編解碼器視頻編解碼器對(duì)它們的具體介紹如下。H.264H.264是國(guó)際標(biāo)準(zhǔn)化組織（ISO）和國(guó)際電信聯(lián)盟（ITU）共同提出的繼MPEG4之后的新一代數(shù)字視頻壓縮格式，是ITU-T以H.26x系列為名稱命名的視頻編解碼技術(shù)標(biāo)準(zhǔn)之一。TheoraTheora是免費(fèi)開放的視頻壓縮編碼技術(shù)，可以支持從VP3 HD高清到MPEG-4/DiVX視頻格式。VP8VP8是第八代的On2視頻，能以更少的數(shù)據(jù)提供更高質(zhì)量的視頻，而且只需較小的處理能力即可播放視頻。1、視頻和音頻編解碼器、視頻和音頻編解碼器讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.2 知識(shí)點(diǎn)講解（2）音）音頻編解碼器頻

4、編解碼器對(duì)它們的具體介紹如下。ACCACC是高級(jí)音頻編碼（英文：Advanced Audio Coding）的簡(jiǎn)稱，該音頻編碼是基于MPEG-2的音頻編碼技術(shù)，目的是取代MP3格式。2000年MPEG-4標(biāo)準(zhǔn)出現(xiàn)后，AAC重新集成了其特性，加入了SBR技術(shù)和PS技術(shù)。MP3MP3是“MPEG-1音頻層3”的簡(jiǎn)稱。它被設(shè)計(jì)用來大幅度地降低音頻數(shù)據(jù)量。利用該技術(shù)，可以將音樂以1:10 甚至 1:12 的壓縮率壓縮成容量較小的文件，而音質(zhì)并不會(huì)明顯的下降。OggOgg全稱為Ogg Vorbis，是一種新的音頻壓縮格式，類似于MP3等現(xiàn)有的音樂格式。OGG Vorbis有一個(gè)很出眾的特點(diǎn)，就是支持多聲

5、道。1、視頻和音頻編解碼器、視頻和音頻編解碼器讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.2 知識(shí)點(diǎn)講解（1）視頻格式）視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。在HTML5中嵌入的視頻格式主要包括Ogg、MPEG 4、WebM等，具體介紹如下。Ogg：指帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。MPEG 4：指帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件。WebM：指帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。2、多媒體的格式、多媒體的格式讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.2 知識(shí)點(diǎn)講解（2）音頻格式）音頻格

6、式音頻格式是指要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件。在HTML5中嵌入的音頻格式主要包括Vorbis、MP3、Wav等，具體介紹如下。Vorbis：是類似ACC的另一種免費(fèi)、開源的音頻編碼，是用于替代MP3的下一代音頻壓縮技術(shù)。MP3：是一種音頻壓縮技術(shù)，其全稱是動(dòng)態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（Moving Picture Experts Group Audio Layer III），簡(jiǎn)稱為MP3。它被設(shè)計(jì)用來大幅度地降低音頻數(shù)據(jù)量。Wav：是錄音時(shí)用的標(biāo)準(zhǔn)的Windows文件格式，文件的擴(kuò)展名為“WAV”，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無(wú)損音樂格式的一種。2、多媒體的格式、多媒體的格式讓I

7、T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.2 知識(shí)點(diǎn)講解到目前為止，很多瀏覽器已經(jīng)實(shí)現(xiàn)了對(duì)HTML5中video和audio元素的支持。各瀏覽器的支持情況如下表所示。3、支持視頻和音頻的瀏覽器、支持視頻和音頻的瀏覽器瀏覽器支持版本IE9.0及以上版本Frefox3.5及以上版本Opear10.5及以上版本Chrome3.0及以上版本Safari3.2及以上版本讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 嵌入視頻和音頻1 12 2知識(shí)引入知識(shí)引入在在HTML5中嵌入視頻中嵌入視頻在在HTML5中嵌入音頻中嵌入音頻3 3音視頻中的音視頻中的source元素元素4 4調(diào)用網(wǎng)頁(yè)多媒體文件調(diào)用網(wǎng)頁(yè)多媒體文件讓IT

8、教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解在HTML5中，video標(biāo)簽用于定義播放視頻文件的標(biāo)準(zhǔn)，它支持三種視頻格式，分別為Ogg、WebM和MPEG4，其基本語(yǔ)法格式如下：在上面的語(yǔ)法格式中，src屬性用于設(shè)置視頻文件的路徑，controls 屬性用于為視頻提供播放控件，這兩個(gè)屬性是video元素的基本屬性。1、 在在HTML5中嵌入視頻中嵌入視頻讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解值得一提的是，在video元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化視頻的播放效果，具體如下表所示。1、 在在HTML5中嵌入視頻中嵌入視頻屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完

9、成后自動(dòng)播放視頻。looploop視頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autoplay，則忽略該屬性。posterurl當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定的比例顯示出來。讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解在HTML5中，audio標(biāo)簽用于定義播放音頻文件的標(biāo)準(zhǔn)，它支持三種音頻格式，分別為Ogg、MP3和wav，其基本格式如下：在上面的基本格式中，src屬性用于設(shè)置音頻文件的路徑，controls 屬性用于為音頻提供播放控件，這和video元素的屬性非常相似。同樣和之間也可

10、以插入文字，用于不支持audio元素的瀏覽器顯示。2、 在在HTML5中嵌入中嵌入音音頻頻讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解值得一提的是，在audio元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化音頻的播放效果，具體如下表所示。2、 在在HTML5中嵌入中嵌入音音頻頻屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完成后自動(dòng)播放音頻。looploop音頻結(jié)束時(shí)重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 autoplay，則忽略該屬性。讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解雖然html5支持Ogg、MPE

11、G 4和WebM的視頻格式以及Vorbis、MP3和Wav的音頻格式，但各瀏覽器對(duì)這些格式卻不完全支持，具體如下表所示。3、音視頻中的音視頻中的source元素元素視頻格式格式IE 9Firefox 4.0Opera 10.6Chrome 6.0Safari 3.0Ogg 支持支持支持 MPEG 4支持 支持支持WebM 支持支持支持 音頻格式Ogg Vorbis 支持支持支持 MP3支持 支持支持Wav 支持支持 支持讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解在HTML5中，運(yùn)用source元素可以為video元素或audio元素提供多個(gè)備用文件。運(yùn)用source元素添加音頻的基本

12、格式如下：source元素一般設(shè)置兩個(gè)屬性：src：用于指定媒體文件的URL地址。type：指定媒體文件的類型。3、音視頻中的音視頻中的source元素元素讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解（1）獲取音視頻文件的獲取音視頻文件的URL。打開網(wǎng)頁(yè)，在搜索工具欄輸入搜索關(guān)鍵詞“MP3”，頁(yè)面中會(huì)出現(xiàn)下載歌曲的網(wǎng)站鏈接，如下圖所示。4、調(diào)用網(wǎng)頁(yè)多媒體文件、調(diào)用網(wǎng)頁(yè)多媒體文件讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解（1）獲取音視頻文件的獲取音視頻文件的URL。選擇一首歌曲，單擊線框標(biāo)示的下載按鈕，彈出如下圖所示的歌曲下載界面。4、調(diào)用網(wǎng)頁(yè)多媒體文件、調(diào)用網(wǎng)頁(yè)多媒體文件讓I

13、T教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解（1）獲取音視頻文件的獲取音視頻文件的URL。選擇“標(biāo)準(zhǔn)品質(zhì)”的MP3音樂，單擊下載按鈕，彈出如下圖所示的歌曲下載對(duì)話框。線框標(biāo)示的部分即為歌曲的URL地址，選中并復(fù)制URL路徑。4、調(diào)用網(wǎng)頁(yè)多媒體文件、調(diào)用網(wǎng)頁(yè)多媒體文件讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.3 知識(shí)點(diǎn)講解（2）插入音頻文件）插入音頻文件將復(fù)制的URL路徑粘貼到音頻文件的示例代碼中，具體如下：調(diào)用網(wǎng)絡(luò)視頻文件的方法和調(diào)用音頻文件方法類似，也需要獲取相關(guān)視頻文件的URL地址，然后通過相關(guān)代碼插入視頻文件即可，示例代碼如下：4、調(diào)用網(wǎng)頁(yè)多媒體文件、調(diào)用網(wǎng)頁(yè)多媒體文件調(diào)用網(wǎng)絡(luò)音頻文件調(diào)

14、用網(wǎng)絡(luò)視頻文件讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.4 CSS控制視頻的寬高1 1知識(shí)引入知識(shí)引入CSS控制視頻的寬高控制視頻的寬高讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.4 知識(shí)點(diǎn)講解在HTML5中，經(jīng)常會(huì)通過為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁(yè)面時(shí)就會(huì)預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁(yè)面的布局不產(chǎn)生變化。1、CSS控制視頻的寬高控制視頻的寬高讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.5 視頻和音頻的方法和事件1 1知識(shí)引入知識(shí)引入視頻和音頻的方法和事件視頻和音頻的方法和事件讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.5 知識(shí)點(diǎn)講解（1）video和和audi

15、o的方法。的方法。HTML5為video和audio提供了接口方法，具體介紹如下表所示。1、視頻和音頻的方法和事件、視頻和音頻的方法和事件方法描述load()加載媒體文件，為播放做準(zhǔn)備。通常用于播放前的預(yù)加載，也會(huì)用于重新加載媒體文件。play()播放媒體文件。如果視頻沒有加載，則加載并播放；如果視頻是暫停的，則變?yōu)椴シ?。pause()暫停播放媒體文件。canPlayType()測(cè)試瀏覽器是否支持指定的媒體類型。讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.5 知識(shí)點(diǎn)講解（2）video和和audio的的事件事件。HTML5還為video和audio元素提供了一系列的接口事件，具體如下表所示。1、視頻

16、和音頻的方法和事件、視頻和音頻的方法和事件方法描述play當(dāng)執(zhí)行方法play()時(shí)觸發(fā)。playing正在播放時(shí)觸發(fā)。pause當(dāng)執(zhí)行了方法pause()時(shí)觸發(fā)。timeupdate當(dāng)播放位置被改變時(shí)觸發(fā)。ended當(dāng)播放結(jié)束后停止播放時(shí)觸發(fā)。waiting在等待加載下一幀時(shí)觸發(fā)。ratechange在當(dāng)前播放速率改變時(shí)觸發(fā)。volumechange在音量改變時(shí)觸發(fā)。canplay以當(dāng)前播放速率，需要緩沖時(shí)觸發(fā)。canplaythrough以當(dāng)前播放速率，不需要緩沖時(shí)觸發(fā)。durationchange當(dāng)播放時(shí)長(zhǎng)改變時(shí)觸發(fā)。loadstart在瀏覽器開始在網(wǎng)上尋找數(shù)據(jù)時(shí)觸發(fā)。progress當(dāng)瀏

17、覽器正在獲取媒體文件時(shí)觸發(fā)。suspend當(dāng)瀏覽器暫停獲取媒體文件，且文件獲取并沒有正常結(jié)束時(shí)觸發(fā)。abort當(dāng)中止獲取媒體數(shù)據(jù)時(shí)觸發(fā)。但這種中止不是由錯(cuò)誤引起的。error當(dāng)獲取媒體過程中出錯(cuò)時(shí)觸發(fā)。emptied當(dāng)所在網(wǎng)絡(luò)變?yōu)槌跏蓟癄顟B(tài)時(shí)觸發(fā)。stalled瀏覽器嘗試獲取媒體數(shù)據(jù)失敗時(shí)觸發(fā)。loadedmetadata在加載完媒體元數(shù)據(jù)時(shí)觸發(fā)。loadeddata在加載完當(dāng)前位置的媒體播放數(shù)據(jù)時(shí)觸發(fā)。seeking瀏覽器正在請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)。seeked瀏覽器停止請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)。讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.6 HTML5音視頻發(fā)展趨勢(shì)1 1知識(shí)引入知識(shí)引入HTML5音視頻發(fā)展趨勢(shì)音

18、視頻發(fā)展趨勢(shì)讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.6 知識(shí)點(diǎn)講解（1）流式音頻視頻流式音頻視頻目前的HTML5視頻范圍中，還沒有比特率切換標(biāo)準(zhǔn)，所以對(duì)視頻的支持僅限于全部加載完畢再播放的方式。但流媒體格式是比較理想的格式，在將來的設(shè)計(jì)中，需要在這個(gè)方面進(jìn)行規(guī)范。（2）跨資源的共享跨資源的共享HTML5的媒體受到了HTTP跨資源共享的限制。HTML5針對(duì)跨資源共享提供了專門的規(guī)范，這種規(guī)范不僅局限于音頻和視頻。1、HTML5音視頻發(fā)展趨勢(shì)音視頻發(fā)展趨勢(shì)讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效8.6 知識(shí)點(diǎn)講解（3）字幕支持）字幕支持如果在HTML5中對(duì)音頻和視頻進(jìn)行編輯可能還需要對(duì)字幕的控制。基于流行的字幕格式SRT的字幕支持規(guī)范仍在編寫中。（4）編解碼的支持）編解碼的支持使用HTML5最大的缺點(diǎn)在于缺少通用編解碼的支持。隨著時(shí)間的推移，最終會(huì)形成一個(gè)通用的、高效率的編解碼器，未來多媒體的形式也會(huì)比現(xiàn)在更加豐富。1、HTML5音視頻發(fā)展趨勢(shì)音視頻發(fā)展趨勢(shì)