第8章多媒體技術ppt課件

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

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

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

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

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

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

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

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

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

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

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

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

13、T教學更簡單，讓IT學習更有效8.3 知識點講解（1）獲取音視頻文件的獲取音視頻文件的URL。選擇“標準品質”的MP3音樂，單擊下載按鈕，彈出如下圖所示的歌曲下載對話框。線框標示的部分即為歌曲的URL地址，選中并復制URL路徑。4、調用網頁多媒體文件、調用網頁多媒體文件讓IT教學更簡單，讓IT學習更有效8.3 知識點講解（2）插入音頻文件）插入音頻文件將復制的URL路徑粘貼到音頻文件的示例代碼中，具體如下：調用網絡視頻文件的方法和調用音頻文件方法類似，也需要獲取相關視頻文件的URL地址，然后通過相關代碼插入視頻文件即可，示例代碼如下：4、調用網頁多媒體文件、調用網頁多媒體文件調用網絡音頻文件調

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

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

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

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

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