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

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

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

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

4、是支持多聲道,1、視頻和音頻編解碼器,8.2 知識點(diǎn)講解,1）視頻格式 視頻格式包含視頻編碼、音頻編碼和容器格式。在HTML5中嵌入的視頻格式主要包括Ogg、MPEG 4、WebM等，具體介紹如下。 Ogg：指帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。 MPEG 4：指帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件。 WebM：指帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件,2、多媒體的格式,8.2 知識點(diǎn)講解,2）音頻格式 音頻格式是指要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件。在HTML5中嵌入的音頻格式主要包括Vorbis、

5、MP3、Wav等，具體介紹如下。 Vorbis：是類似ACC的另一種免費(fèi)、開源的音頻編碼，是用于替代MP3的下一代音頻壓縮技術(shù)。 MP3：是一種音頻壓縮技術(shù)，其全稱是動態(tài)影像專家壓縮標(biāo)準(zhǔn)音頻層面3（Moving Picture Experts Group Audio Layer III），簡稱為MP3。它被設(shè)計(jì)用來大幅度地降低音頻數(shù)據(jù)量。 Wav：是錄音時(shí)用的標(biāo)準(zhǔn)的Windows文件格式，文件的擴(kuò)展名為“WAV”，數(shù)據(jù)本身的格式為PCM或壓縮型，屬于無損音樂格式的一種,2、多媒體的格式,8.2 知識點(diǎn)講解,到目前為止，很多瀏覽器已經(jīng)實(shí)現(xiàn)了對HTML5中video和audio元素的支持。各瀏覽器

6、的支持情況如下表所示,3、支持視頻和音頻的瀏覽器,8.3 嵌入視頻和音頻,知識引入,在HTML5中嵌入視頻,在HTML5中嵌入音頻,音視頻中的source元素,調(diào)用網(wǎng)頁多媒體文件,8.3 知識點(diǎn)講解,在HTML5中，video標(biāo)簽用于定義播放視頻文件的標(biāo)準(zhǔn)，它支持三種視頻格式，分別為Ogg、WebM和MPEG4，其基本語法格式如下： 在上面的語法格式中，src屬性用于設(shè)置視頻文件的路徑，controls 屬性用于為視頻提供播放控件，這兩個(gè)屬性是video元素的基本屬性,1、 在HTML5中嵌入視頻,8.3 知識點(diǎn)講解,值得一提的是，在video元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化視頻的播放效

7、果，具體如下表所示,1、 在HTML5中嵌入視頻,8.3 知識點(diǎn)講解,在HTML5中，audio標(biāo)簽用于定義播放音頻文件的標(biāo)準(zhǔn)，它支持三種音頻格式，分別為Ogg、MP3和wav，其基本格式如下： 在上面的基本格式中，src屬性用于設(shè)置音頻文件的路徑，controls 屬性用于為音頻提供播放控件，這和video元素的屬性非常相似。同樣和之間也可以插入文字，用于不支持audio元素的瀏覽器顯示,2、 在HTML5中嵌入音頻,8.3 知識點(diǎn)講解,值得一提的是，在audio元素中還可以添加其他屬性，來進(jìn)一步優(yōu)化音頻的播放效果，具體如下表所示,2、 在HTML5中嵌入音頻,8.3 知識點(diǎn)講解,雖然htm

8、l5支持Ogg、MPEG 4和WebM的視頻格式以及Vorbis、MP3和Wav的音頻格式，但各瀏覽器對這些格式卻不完全支持，具體如下表所示,3、音視頻中的source元素,8.3 知識點(diǎn)講解,在HTML5中，運(yùn)用source元素可以為video元素或audio元素提供多個(gè)備用文件。運(yùn)用source元素添加音頻的基本格式如下： source元素一般設(shè)置兩個(gè)屬性： src：用于指定媒體文件的URL地址。 type：指定媒體文件的類型,3、音視頻中的source元素,8.3 知識點(diǎn)講解,1）獲取音視頻文件的URL。 打開網(wǎng)頁，在搜索工具欄輸入搜索關(guān)鍵詞“MP3”，頁面中會出現(xiàn)下載歌曲的網(wǎng)站鏈接，如

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

10、例代碼如下,4、調(diào)用網(wǎng)頁多媒體文件,調(diào)用網(wǎng)絡(luò)音頻文件,調(diào)用網(wǎng)絡(luò)視頻文件,8.4 CSS控制視頻的寬高,知識引入,CSS控制視頻的寬高,8.4 知識點(diǎn)講解,在HTML5中，經(jīng)常會通過為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁面時(shí)就會預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁面的布局不產(chǎn)生變化,1、CSS控制視頻的寬高,8.5 視頻和音頻的方法和事件,知識引入,視頻和音頻的方法和事件,8.5 知識點(diǎn)講解,1）video和audio的方法。 HTML5為video和audio提供了接口方法，具體介紹如下表所示,1、視頻和音頻的方法和事件,8.5 知識點(diǎn)講解,2）vide

11、o和audio的事件。 HTML5還為video和audio元素提供了一系列的接口事件，具體如下表所示,1、視頻和音頻的方法和事件,8.6 HTML5音視頻發(fā)展趨勢,知識引入,HTML5音視頻發(fā)展趨勢,8.6 知識點(diǎn)講解,1）流式音頻視頻 目前的HTML5視頻范圍中，還沒有比特率切換標(biāo)準(zhǔn)，所以對視頻的支持僅限于全部加載完畢再播放的方式。但流媒體格式是比較理想的格式，在將來的設(shè)計(jì)中，需要在這個(gè)方面進(jìn)行規(guī)范。 （2）跨資源的共享 HTML5的媒體受到了HTTP跨資源共享的限制。HTML5針對跨資源共享提供了專門的規(guī)范，這種規(guī)范不僅局限于音頻和視頻,1、HTML5音視頻發(fā)展趨勢,8.6 知識點(diǎn)講解,

12、3）字幕支持 如果在HTML5中對音頻和視頻進(jìn)行編輯可能還需要對字幕的控制?；诹餍械淖帜桓袷絊RT的字幕支持規(guī)范仍在編寫中。 （4）編解碼的支持 使用HTML5最大的缺點(diǎn)在于缺少通用編解碼的支持。隨著時(shí)間的推移，最終會形成一個(gè)通用的、高效率的編解碼器，未來多媒體的形式也會比現(xiàn)在更加豐富,1、HTML5音視頻發(fā)展趨勢,8.7 制作音樂播放界面,本章前幾節(jié)重點(diǎn)講解了多媒體的格式、瀏覽器對HTML5音視頻的支持情況以及在HTML5頁面中嵌入音視頻文件的方法。為了加深讀者對網(wǎng)頁多媒體標(biāo)記的理解和運(yùn)用，本節(jié)將通過案例的形式分步驟制作一個(gè)音樂播放界面，其效果如下圖所示,案例引入,8.7 案例實(shí)現(xiàn),本章小結(jié),本章首先介紹了HTML5多媒體特性、多媒體的格式以及瀏覽器的支持情況，然后講解了在HTML5頁面中嵌套多媒體文件的方法，最后簡單介紹了HTML5音頻和視頻的方法、事件以及發(fā)展趨勢并運(yùn)用所學(xué)知識制作了一個(gè)音樂播放頁面。 通過本章的學(xué)習(xí)，讀者應(yīng)該能夠了解H