第6章HTML5中的多媒體

1、本章要求本章要求：第第6 6章章 HTML5HTML5中的多媒體中的多媒體uvideo元素與audio元素概述u如何在頁面中添加video元素與audio元素uvideo元素與audio元素的屬性uvideo元素與audio元素的方法uvideo元素與audio元素的事件u如何捕捉video元素與audio元素的事件主要內容主要內容1.HTML5頁面中的多媒體2.多媒體元素的屬性3.多媒體元素的方法4.多媒體元素的事件5.綜合實例用timeupdate事件動態(tài)顯示媒體文件播放時間第第6 6章章 HTML5HTML5中的多媒體中的多媒體 在HTML5中，新增了兩個元素video元素與audio元

2、素。video元素專門用來播放網絡上的視頻或電影，而audio元素專門用來播放網絡上的音頻數據。使用這兩個元素，就不再需要使用其他任何插件了，只要使用支持HTML5的瀏覽器就可以了。表中介紹了目前瀏覽器對video元素與audio元素的支持情況。表6-1 目前瀏覽器對video元素與audio元素的支持情況6.1 HTML56.1 HTML5頁面中的多媒體頁面中的多媒體瀏覽器支持情況Chrome3.0及以上版本支持Firefox3.5以上版本支持Opera10.5及以上版本支持Safari3.2及以上版本支持 這兩個元素的使用方法都很簡單，首先以audio元素為例，只要把播放音頻的URL給指定

3、元素的src屬性就可以了，audio元素使用方法如下。 您的瀏覽器不支持audio元素！ 通過這種方法，可以把指定的音頻數據直接嵌入在網頁上，其中“您的瀏覽器不支持audio元素！”為在不支持audio元素的瀏覽器中所顯示的替代文字。 video元素的使用方法也很簡單，只要設定好元素的長、寬等屬性，并且把播放視頻的URL地址指定給該元素的src屬性就可以了，video元素的使用方法如下： 您的瀏覽器不支持video元素！ 另外，還可以通過使用source元素來為同一個媒體數據指定多個播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放，瀏覽器的選擇順序為代碼中的書寫順序，

4、它會從上往下判斷自己對該播放格式是否支持，直到選擇到自己支持的播放格式為止。其使用方法如下： source元素具有以下兩個屬性：psrc屬性是指播放媒體的URL地址； ptype屬性表示媒體類型，其屬性值為播放文件的MIME類型，該屬性中的codecs參數表示所使用的媒體的編碼格式。 因為各瀏覽器對各種媒體類型及編碼格式的支持情況都各不相同，所以使用source元素來指定多種媒體類型是非常有必要的。pIE9：支持H.264和VP8視頻編碼格式；支持MP3和WAV音頻編碼格式。 pFirefox 4及以上、Opera 10及以上：支持Ogg Theora和VP8視頻編碼格式；支持Ogg vorb

5、is和WAV音頻格式。 pChrome 6及以上：支持H.264、VP8和Ogg Theora視頻編碼格式；支持Ogg vorbis和MP3音頻編碼格式。video元素與audio元素所具有的屬性大致相同，所以接下來看一下這兩個元素都具有哪些屬性。psrc屬性和autoplay屬性src屬性用于指定媒體數據的URL地址。autoplay屬性用于指定媒體是否在頁面加載后自動播放，使用方法如下：ppreload屬性 該屬性用于指定視頻或音頻數據是否預加載。如果使用預加載，則瀏覽器會預先將視頻或音頻數據進行緩沖，這樣可以加快播放速度，因為播放時數據已經預先緩沖完畢。該屬性有三個可選值，分別是“non

6、e”、“metadata”和“auto”，其默認值為“auto”。lnone值表示不進行預加載； lmetadata表示只預加載媒體的元數據（媒體字節(jié)數、第一幀、播放列表、持續(xù)時間等）。 lauto表示預加載全部視頻或音頻。該屬性的使用方法如下。6.2 6.2 多媒體元素的屬性多媒體元素的屬性pposter（video元素獨有屬性）和loop屬性 當視頻不可用時，可以使用該元素向用戶展示一幅替代用的圖片。當視頻不可用時，最好使用poster屬性，以免展示視頻的區(qū)域中出現一片空白。該屬性的使用方法如下：loop屬性用于指定是否循環(huán)播放視頻或音頻，其使用方法如下：pcontrols屬性、width

7、屬性和height屬性（后兩個video元素獨有屬性） controls屬性指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條?？刂茥l中具有播放、暫停等按鈕。其使用方法如下：圖6-1所示為Firefox 3.5瀏覽器自帶的播放視頻時用的控制條的外觀。圖6-1 Firefox3.5瀏覽器自帶的播放視頻時用的控制條說明： 開發(fā)者也可以在腳本中自定義控制條，而不使用瀏覽器默認的。width屬性與height屬性用于指定視頻的寬度與高度（以像素為單位），使用方法如下：perror屬性在讀取、使用媒體數據的過程中，在正常情況下，該屬性為null，但是任何時候只要出現錯誤，該屬性將返回一個MediaErr

8、or對象，該對象的code屬性返回對應的錯誤狀態(tài)，其可能的值包括：lMEDIA_ERR_ABORTED（數值1）：媒體數據的下載過程由于用戶的操作原因而被終止。 lMEDIA_ERR_NETWORK（數值2）：確認媒體資源可用，但是在下載時出現網絡錯誤，媒體數據的下載過程被終止。 lMEDIA_ERR_DECODE(數值3）：確認媒體資源可用，但是解碼時發(fā)生錯誤。 lMEDIA_ERR_SRC_NOT_SUPPORTED（數值4）：媒體資源不可用媒體格式不被支持。 lerror屬性為只讀屬性。讀取錯誤狀態(tài)的代碼如下：var video=document.getElementById(video

9、 Element);video.addEventListener(error,function() var error=video.error;switch (error.code) case 1: alert(視頻的下載過程被中止。); break; case 2: alert(網絡發(fā)生故障，視頻的下載過程被中止。); break; case 3: alert(解碼失敗。); break; case 4: alert(不支持播放的視頻格式。); break; default: alert(發(fā)生未知錯誤。); ,false);pnetworkState屬性該屬性在媒體數據加載過程中讀取當前網絡

10、的狀態(tài)，其值包括：lNETWORK_EMPTY（數值0）：元素處于初始狀態(tài)。 lNETWORK_IDLE（數值1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。 lNETWORK_LOADING（數值2）：媒體數據加載中。 lNETWORK_NO_SOURCE（數值3）：沒有支持的編碼格式，不執(zhí)行加載。 networkState屬性為只讀屬性，讀取網絡狀態(tài)的實例代碼如下：var video = document.getElementById(video);video.addEventListener(progress, function(e) var networkStateD

11、isplay=document.getElementById(networkState);if(workState=2)networkStateDisplay.innerHTML=加載中.+e.loaded+/+e.total+byte;else if(workState=3)networkStateDisplay.innerHTML=加載失??；,false);p currentSrc屬性、buffered屬性 可以用currentSrc屬性來讀取播放中的媒體數據的URL地址，該屬性為只讀屬性。 buffered屬性返回一個實現TimeRanges接口的對象，以確認瀏覽器是否已緩存媒體數據。T

12、imeRanges對象表示一段時間范圍，在大多數情況下，該對象表示的時間范圍是一個單一的以“0”開始的范圍，但是如果瀏覽器發(fā)出Range Requests請求，這時TimeRanges對象表示的時間范圍是多個時間范圍。 TimeRanges對象具有一個length屬性，表示有多少個時間范圍，多數情況下存在時間范圍時，該值為“1”；不存在時間范圍時，該值為“0”，該對象有兩個方法：start(index)和end(index)，多數情況下將index設置為“0”就可以了。當用element.buffered語句來實現TimeRanges接口時，start(0)表示當前緩存區(qū)內從媒體數據的什么時間

13、開始進行緩存，end(0)表示當前緩存區(qū)內的結束時間。buffered屬性為只讀屬性。preadyState屬性該屬性返回媒體當前播放位置的就緒狀態(tài)，其值包括：lHAVE_NOTHING（數值0）：沒有獲取到媒體的任何信息，當前播放位置沒有可播放數據。 lHAVE_METADATA（數值1）：已經獲取到了足夠的媒體數據，但是當前播放位置沒有有效的媒體數據（也就是說，獲取到的媒體數據無效，不能播放）。 lHAVE_CURRENT_DATA（數值2）：當前播放位置已經有數據可以播放，但沒有獲取到可以讓播放器前進的數據。當媒體為視頻時，意思是當前幀的數據已獲得，但還沒有獲取到下一幀的數據，或者當前幀

14、已經是播放的最后一幀。 lHAVE_FUTURE_DATA（數值3）：當前播放位置已經有數據可以播放，而且也獲取到了可以讓播放器前進的數據。當媒體為視頻時，意思是當前幀的數據已獲取，而且也獲取到了下一幀的數據，當前幀是播放的最后一幀時，readyState屬性不可能為HAVE_FUTURE_DATA。 lHAVE_ENOUGH_DATA（數值4）：當前播放位置已經有數據可以播放，同時也獲取到了可以讓播放器前進的數據，而且瀏覽器確認媒體數據以某一種速度進行加載，可以保證有足夠的后續(xù)數據進行播放。preadyState屬性為只讀屬性。seeking屬性和seekable屬性seeking屬性返回一

15、個布爾值，表示瀏覽器是否正在請求某一特定播放位置的數據，true表示瀏覽器正在請求數據，false表示瀏覽器已停止請求。seekable屬性返回一個TimeRanges對象，該對象表示請求到的數據的時間范圍。當媒體為視頻時，開始時間為請求到視頻數據第一幀的時間，結束時間為請求到視頻數據最后一幀的時間。這兩個屬性均為只讀屬性。pcurrentTime屬性、startTime屬性和duration屬性currentTime屬性用于讀取媒體的當前播放位置，也可以通過修改currentTime屬性來修改當前播放位置。如果修改的位置上沒有可用的媒體數據時，將拋出INVALID_STATE_ERR異常；如

16、果修改的位置超出了瀏覽器在一次請求中可以請求的數據范圍，將拋出INDEX_SIZE_ERR異常。startTime屬性用來讀取媒體播放的開始時間，通常為“0”。duration屬性來讀取媒體文件總的播放時間。pplayed屬性、paused屬性和ended屬性 played屬性返回一個TimeRanges對象，從該對象中可以讀取媒體文件的已播放部分的時間段。開始時間為已播放部分的開始時間，結束時間為已播放部分的結束時間。paused屬性返回一個布爾值，表示是否暫停播放，true表示媒體暫停播放，false表示媒體正在播放。 ended屬性返回一個布爾值，表示是否播放完畢，true表示媒體播放完

17、畢，false表示還沒有播放完畢。pdefaultPlaybackRate屬性和playbackRate屬性 defaultPlaybackRate屬性用來讀取或修改媒體默認的播放速率。 playbackRate屬性用于讀取或修改媒體當前的播放速率。pvolume屬性和muted屬性 volume屬性用于讀取或修改媒體的播放音量，范圍為“0”到“1”，“0”為靜音，“1”為最大音量。 muted屬性用于讀取或修改媒體的靜音狀態(tài)，該值為布爾值，true表示處于靜音狀態(tài)，false表示處于非靜音狀態(tài)。6.3 6.3 多媒體元素的方法多媒體元素的方法6.3.1 媒體播放時的方法6.3.2 canPl

18、ayType方法p使用media.play()播放視頻，并會將media.paused的值強行設為false。p使用media.pause()暫停視頻，并會將media.paused的值強行設為true。p使用media.load()重新載入視頻，并會將media.playbackRate的值強行設為media.defaultPlaybackRate的值，且強行將media.error的值設為null。 【例例6-16-1】 下面來看一個媒體播放的示例。在本例中通過video元素加載一段視頻文件，為了展示視頻播放時所應用的方法，在控制視頻的放時，并沒有應用瀏覽器自帶的控制條來控制視頻的播放而是

19、通過添加“播放”與“暫?！卑粹o來控制視頻文件的播放與暫停。實例代碼如下。媒體播放示例var video;/聲明變量function init() 6.3.1 6.3.1 媒體播放時的方法媒體播放時的方法video = document.getElementById(video1); video.addEventListener(ended, function() /監(jiān)聽視頻播放結束事件 alert(播放結束。); , true);function play() video.play();/ 播放視頻function pause() video.pause(); /暫停播放 播放 暫停本例的運行

20、效果如圖6-2所示。圖6-2 媒體播放實例使用canPlayType方法測試瀏覽器是否支持指定的媒介類型，該方法的定義如下。var support=videoElement.canPlayType(type); videoElement表示頁面上的video元素或audio元素。該方法使用一個參數type，該參數的指定方法與source元素的type參數的指定方法相同，都用播放文件的MIME類型來指定，可以在指定的字符串中加上表示媒體編碼格式的codes參數。該方法返回3個可能值（均為瀏覽器判斷的結果）。p空字符串：瀏覽器不支持此種媒體類型；pmaybe：瀏覽器可能支持此種媒體類型；pprob

21、ably：瀏覽器確定支持此種媒體類型6.3.2 canPlayType6.3.2 canPlayType方法方法6.4 6.4 多媒體元素的事件多媒體元素的事件6.4.1 事件處理6.4.2 事件介紹 在利用video元素或audio元素讀取或播放媒體數據的時候，會觸發(fā)一系列的事件，如果JavaScript腳本來捕捉這些事件，就可以對這些事件進行處理了。對于這些事件的捕捉及其處理，可以按兩種方式來進行。 一種是監(jiān)聽的方式：addEventListener(“事件名”,處理函數,處理方式)方法來對事件的發(fā)生進行監(jiān)聽，該方法的定義如下。videoElement.addEventListener(t

22、ype,listener,useCapture); videoElement表示頁面上的video元素或audio元素。type為事件名稱，listener表示綁定的函數，useCapture是一個布爾值，表示該事件的響應順序，該值如果為true，則瀏覽器采用Capture響應方式，如果為false，瀏覽器采用bubbing響應方式，一般采用false，默認情況下也為false。 另一種是直接賦值的方式。事件處理方式為JavaScript腳本中常見的獲取事件句柄的方式，如下例所示。function begin_playing()(中略);6.4.1 6.4.1 事件處理事件處理 接下來，將介紹

23、瀏覽器在請求媒體數據、下載媒體數據、播放媒體數據一直到播放結束這一系列過程中，到底會觸發(fā)哪些事件。ploadstart事件：瀏覽器開始請求媒介；pprogress事件：瀏覽器正在獲取媒介；psuspend事件：瀏覽器非主動獲取媒介數據，但沒有加載完整個媒介資源；pabort事件：瀏覽器在完全加載前中止獲取媒介數據，但是并不是由錯誤引起的；perror事件：獲取媒介數據出錯；pemptied事件：媒介元素的網絡狀態(tài)突然變?yōu)槲闯跏蓟豢赡芤鸬脑蛴袃蓚€：1、載入媒體過程中突然發(fā)生一個致命錯誤；2、在瀏覽器正在選擇支持的播放格式時，又調用了load方法重新載入媒體。pstalled事件：瀏覽器獲取

24、媒介數據異常；pplay事件：即將開始播放，當執(zhí)行了play方法時觸發(fā)，或數據下載后元素被設為autoplay（自動播放）屬性。ppause事件：暫停播放，當執(zhí)行了pause方法時觸發(fā)。ploadedmetadata事件：瀏覽器獲取完媒介資源的時長和字節(jié)ploadeddata事件：瀏覽器已加載當前播放位置的媒介數據；pwaiting事件：播放由于下一幀無效（例如未加載）而已停止（但瀏覽器確認下一幀會馬上有效）；6.4.2 6.4.2 事件介紹事件介紹p playing事件：已經開始播放；pcanplay事件：瀏覽器能夠開始媒介播放，但估計以當前速率播放不能直接將媒介播放完（播放期間需要緩沖）；

25、pcanplaythrough事件：瀏覽器估計以當前速率直接播放可以直接播放完整個媒介資源（期間不需要緩沖）；pseeking事件：瀏覽器正在請求數據（seeking屬性值為true）；pseeked事件：瀏覽器停止請求數據（seeking屬性值為false）；ptimeupdate事件：當前播放位置（currentTime屬性）改變，可能是播放過程中的自然改變，也可能是被人為地改變，或由于播放不能連續(xù)而發(fā)生的跳變；pended事件：播放由于媒介結束而停止；pratechange事件：默認播放速率（defaultPlaybackRate屬性）改變或播放速率（playbackRate屬性）改變；

26、pdurationchange事件：媒介時長（duration屬性）改變；pvolumechange事件：音量（volume屬性）改變或靜音（muted屬性）。本實例通過timeupdate事件動態(tài)顯示媒體文件播放時間，效果如圖6-3所示。圖6-3 timeupdate事件顯示媒體文件播放6.5 6.5 綜合實例綜合實例用用timeupdatetimeupdate事件事件動態(tài)顯示媒體文件播放時間動態(tài)顯示媒體文件播放時間程序開發(fā)步驟如下：（1）新建一個js3.js腳本文件，該文件中定義控制媒體播放的函數，代碼如下：function $(id) return document.getElement

27、ById(id);function v_move(v)$(pTip).style.display=(v)?block:none;function v_loadstart() $(“spnPlayTip”).innerHTML=“開始加載”;function v_palying()$(“spnPlayTip”).innerHTML=“正在播放”;function v_pause()$(spnPlayTip).innerHTML=已經暫停;function v_ended()$(“spnPlayTip”).innerHTML=“播放完成”;function v_timeupdate(e)var strCurTime=RuleTime(Math.floor(e