第6章 HTML5中的多媒體

本章要求：第6章HTML5中的多媒體video元素與audio元素概述如何在頁面中添加video元素與audio元素video元素與audio元素的屬性video元素與audio元素的方法video元素與audio元素的事件如何捕捉video元素與audio元素的事件主要內(nèi)容1.HTML5頁面中的多媒體2.多媒體元素的屬性3.多媒體元素的方法4.多媒體元素的事件5.綜合實(shí)例——用timeupdate事件動(dòng)態(tài)顯示媒體文件播放時(shí)間第6章HTML5中的多媒體在HTML5中，新增了兩個(gè)元素——video元素與audio元素。video元素專門用來播放網(wǎng)絡(luò)上的視頻或電影，而audio元素專門用來播放網(wǎng)絡(luò)上的音頻數(shù)據(jù)。使用這兩個(gè)元素，就不再需要使用其他任何插件了，只要使用支持HTML5的瀏覽器就可以了。表中介紹了目前瀏覽器對video元素與audio元素的支持情況。表6-1目前瀏覽器對video元素與audio元素的支持情況6.1HTML5頁面中的多媒體瀏覽器支持情況Chrome3.0及以上版本支持Firefox3.5以上版本支持Opera10.5及以上版本支持Safari3.2及以上版本支持這兩個(gè)元素的使用方法都很簡單，首先以audio元素為例，只要把播放音頻的URL給指定元素的src屬性就可以了，audio元素使用方法如下。<audiosrc="http://mingri/demo/test.mp3">您的瀏覽器不支持audio元素！</audio>通過這種方法，可以把指定的音頻數(shù)據(jù)直接嵌入在網(wǎng)頁上，其中“您的瀏覽器不支持audio元素！”為在不支持audio元素的瀏覽器中所顯示的替代文字。video元素的使用方法也很簡單，只要設(shè)定好元素的長、寬等屬性，并且把播放視頻的URL地址指定給該元素的src屬性就可以了，video元素的使用方法如下：<videowidth="640"height="360"src="http://mingri/demo/test.mp3">您的瀏覽器不支持video元素！</video>另外，還可以通過使用source元素來為同一個(gè)媒體數(shù)據(jù)指定多個(gè)播放格式與編碼方式，以確保瀏覽器可以從中選擇一種自己支持的播放格式進(jìn)行播放，瀏覽器的選擇順序?yàn)榇a中的書寫順序，它會(huì)從上往下判斷自己對該播放格式是否支持，直到選擇到自己支持的播放格式為止。其使用方法如下：<videowidth="640"height="360"><!--在Oggtheora格式、Quicktime格式與MP4格式之間選擇自己支持的播放格式。--><sourcesrc="demo/sample.ogv"type="video/ogg;codecs='theora,vorbis'"/><sourcesrc="demo/sample.mov"type="video/quicktime"/></video>source元素具有以下兩個(gè)屬性：src屬性是指播放媒體的URL地址；

type屬性表示媒體類型，其屬性值為播放文件的MIME類型，該屬性中的codecs參數(shù)表示所使用的媒體的編碼格式。

因?yàn)楦鳛g覽器對各種媒體類型及編碼格式的支持情況都各不相同，所以使用source元素來指定多種媒體類型是非常有必要的。IE9：支持H.264和VP8視頻編碼格式；支持MP3和WAV音頻編碼格式。

Firefox4及以上、Opera10及以上：支持OggTheora和VP8視頻編碼格式；支持Oggvorbis和WAV音頻格式。

Chrome6及以上：支持H.264、VP8和OggTheora視頻編碼格式；支持Oggvorbis和MP3音頻編碼格式。video元素與audio元素所具有的屬性大致相同，所以接下來看一下這兩個(gè)元素都具有哪些屬性。src屬性和autoplay屬性src屬性用于指定媒體數(shù)據(jù)的URL地址。autoplay屬性用于指定媒體是否在頁面加載后自動(dòng)播放，使用方法如下：<videosrc="sample.mov"autoplay="autoplay"></video>preload屬性該屬性用于指定視頻或音頻數(shù)據(jù)是否預(yù)加載。如果使用預(yù)加載，則瀏覽器會(huì)預(yù)先將視頻或音頻數(shù)據(jù)進(jìn)行緩沖，這樣可以加快播放速度，因?yàn)椴シ艜r(shí)數(shù)據(jù)已經(jīng)預(yù)先緩沖完畢。該屬性有三個(gè)可選值，分別是“none”、“metadata”和“auto”，其默認(rèn)值為“auto”。none值表示不進(jìn)行預(yù)加載；

metadata表示只預(yù)加載媒體的元數(shù)據(jù)（媒體字節(jié)數(shù)、第一幀、播放列表、持續(xù)時(shí)間等）。

auto表示預(yù)加載全部視頻或音頻。該屬性的使用方法如下。<videosrc="sample.mov"preload="auto"></video>6.2多媒體元素的屬性poster（video元素獨(dú)有屬性）和loop屬性當(dāng)視頻不可用時(shí)，可以使用該元素向用戶展示一幅替代用的圖片。當(dāng)視頻不可用時(shí)，最好使用poster屬性，以免展示視頻的區(qū)域中出現(xiàn)一片空白。該屬性的使用方法如下：<videosrc="sample.mov"poster="cannotuse.jpg"></video>loop屬性用于指定是否循環(huán)播放視頻或音頻，其使用方法如下：<videosrc="sample.mov"autoplay="autoplay"loop="loop"></video>controls屬性、width屬性和height屬性（后兩個(gè)video元素獨(dú)有屬性）controls屬性指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條?？刂茥l中具有播放、暫停等按鈕。其使用方法如下：<videosrc="sample.mov"controls="controls"></video>圖6-1所示為Firefox3.5瀏覽器自帶的播放視頻時(shí)用的控制條的外觀。圖6-1Firefox3.5瀏覽器自帶的播放視頻時(shí)用的控制條說明：

開發(fā)者也可以在腳本中自定義控制條，而不使用瀏覽器默認(rèn)的。width屬性與height屬性用于指定視頻的寬度與高度（以像素為單位），使用方法如下：<videosrc="sample.mov"width="500"height="500"></video>error屬性在讀取、使用媒體數(shù)據(jù)的過程中，在正常情況下，該屬性為null，但是任何時(shí)候只要出現(xiàn)錯(cuò)誤，該屬性將返回一個(gè)MediaError對象，該對象的code屬性返回對應(yīng)的錯(cuò)誤狀態(tài)，其可能的值包括：MEDIA_ERR_ABORTED（數(shù)值1）：媒體數(shù)據(jù)的下載過程由于用戶的操作原因而被終止。

MEDIA_ERR_NETWORK（數(shù)值2）：確認(rèn)媒體資源可用，但是在下載時(shí)出現(xiàn)網(wǎng)絡(luò)錯(cuò)誤，媒體數(shù)據(jù)的下載過程被終止。

MEDIA_ERR_DECODE(數(shù)值3）：確認(rèn)媒體資源可用，但是解碼時(shí)發(fā)生錯(cuò)誤。

MEDIA_ERR_SRC_NOT_SUPPORTED（數(shù)值4）：媒體資源不可用媒體格式不被支持。

error屬性為只讀屬性。讀取錯(cuò)誤狀態(tài)的代碼如下：<videoid="videoElement"src="mingri.mov"><script>varvideo=document.getElementById("videoElement");video.addEventListener("error",function(){{ varerror=video.error; switch(error.code){case1:alert("視頻的下載過程被中止。");break;case2:alert("網(wǎng)絡(luò)發(fā)生故障，視頻的下載過程被中止。");break;case3:alert("解碼失敗。");break;case4:alert("不支持播放的視頻格式。");break;default:alert("發(fā)生未知錯(cuò)誤。");}},false);</script>networkState屬性該屬性在媒體數(shù)據(jù)加載過程中讀取當(dāng)前網(wǎng)絡(luò)的狀態(tài)，其值包括：NETWORK_EMPTY（數(shù)值0）：元素處于初始狀態(tài)。

NETWORK_IDLE（數(shù)值1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網(wǎng)絡(luò)連接。

NETWORK_LOADING（數(shù)值2）：媒體數(shù)據(jù)加載中。

NETWORK_NO_SOURCE（數(shù)值3）：沒有支持的編碼格式，不執(zhí)行加載。

networkState屬性為只讀屬性，讀取網(wǎng)絡(luò)狀態(tài)的實(shí)例代碼如下：<script>varvideo=document.getElementById("video");video.addEventListener("progress",function(e){ varnetworkStateDisplay=document.getElementById("networkState"); if(workState==2) { networkStateDisplay.innerHTML="加載中...["+e.loaded+"/"+e.total+"byte]"; } elseif(workState==3) { networkStateDisplay.innerHTML="加載失敗"； }},false);</script>

currentSrc屬性、buffered屬性可以用currentSrc屬性來讀取播放中的媒體數(shù)據(jù)的URL地址，該屬性為只讀屬性。buffered屬性返回一個(gè)實(shí)現(xiàn)TimeRanges接口的對象，以確認(rèn)瀏覽器是否已緩存媒體數(shù)據(jù)。TimeRanges對象表示一段時(shí)間范圍，在大多數(shù)情況下，該對象表示的時(shí)間范圍是一個(gè)單一的以“0”開始的范圍，但是如果瀏覽器發(fā)出RangeRequests請求，這時(shí)TimeRanges對象表示的時(shí)間范圍是多個(gè)時(shí)間范圍。TimeRanges對象具有一個(gè)length屬性，表示有多少個(gè)時(shí)間范圍，多數(shù)情況下存在時(shí)間范圍時(shí)，該值為“1”；不存在時(shí)間范圍時(shí)，該值為“0”，該對象有兩個(gè)方法：start(index)和end(index)，多數(shù)情況下將index設(shè)置為“0”就可以了。當(dāng)用element.buffered語句來實(shí)現(xiàn)TimeRanges接口時(shí)，start(0)表示當(dāng)前緩存區(qū)內(nèi)從媒體數(shù)據(jù)的什么時(shí)間開始進(jìn)行緩存，end(0)表示當(dāng)前緩存區(qū)內(nèi)的結(jié)束時(shí)間。buffered屬性為只讀屬性。readyState屬性該屬性返回媒體當(dāng)前播放位置的就緒狀態(tài)，其值包括：HAVE_NOTHING（數(shù)值0）：沒有獲取到媒體的任何信息，當(dāng)前播放位置沒有可播放數(shù)據(jù)。

HAVE_METADATA（數(shù)值1）：已經(jīng)獲取到了足夠的媒體數(shù)據(jù)，但是當(dāng)前播放位置沒有有效的媒體數(shù)據(jù)（也就是說，獲取到的媒體數(shù)據(jù)無效，不能播放）。

HAVE_CURRENT_DATA（數(shù)值2）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，但沒有獲取到可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前幀的數(shù)據(jù)已獲得，但還沒有獲取到下一幀的數(shù)據(jù)，或者當(dāng)前幀已經(jīng)是播放的最后一幀。

HAVE_FUTURE_DATA（數(shù)值3）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，而且也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)。當(dāng)媒體為視頻時(shí)，意思是當(dāng)前幀的數(shù)據(jù)已獲取，而且也獲取到了下一幀的數(shù)據(jù)，當(dāng)前幀是播放的最后一幀時(shí)，readyState屬性不可能為HAVE_FUTURE_DATA。

HAVE_ENOUGH_DATA（數(shù)值4）：當(dāng)前播放位置已經(jīng)有數(shù)據(jù)可以播放，同時(shí)也獲取到了可以讓播放器前進(jìn)的數(shù)據(jù)，而且瀏覽器確認(rèn)媒體數(shù)據(jù)以某一種速度進(jìn)行加載，可以保證有足夠的后續(xù)數(shù)據(jù)進(jìn)行播放。readyState屬性為只讀屬性。seeking屬性和seekable屬性seeking屬性返回一個(gè)布爾值，表示瀏覽器是否正在請求某一特定播放位置的數(shù)據(jù)，true表示瀏覽器正在請求數(shù)據(jù)，false表示瀏覽器已停止請求。seekable屬性返回一個(gè)TimeRanges對象，該對象表示請求到的數(shù)據(jù)的時(shí)間范圍。當(dāng)媒體為視頻時(shí)，開始時(shí)間為請求到視頻數(shù)據(jù)第一幀的時(shí)間，結(jié)束時(shí)間為請求到視頻數(shù)據(jù)最后一幀的時(shí)間。這兩個(gè)屬性均為只讀屬性。currentTime屬性、startTime屬性和duration屬性currentTime屬性用于讀取媒體的當(dāng)前播放位置，也可以通過修改currentTime屬性來修改當(dāng)前播放位置。如果修改的位置上沒有可用的媒體數(shù)據(jù)時(shí)，將拋出INVALID_STATE_ERR異常；如果修改的位置超出了瀏覽器在一次請求中可以請求的數(shù)據(jù)范圍，將拋出INDEX_SIZE_ERR異常。startTime屬性用來讀取媒體播放的開始時(shí)間，通常為“0”。duration屬性來讀取媒體文件總的播放時(shí)間。played屬性、paused屬性和ended屬性played屬性返回一個(gè)TimeRanges對象，從該對象中可以讀取媒體文件的已播放部分的時(shí)間段。開始時(shí)間為已播放部分的開始時(shí)間，結(jié)束時(shí)間為已播放部分的結(jié)束時(shí)間。paused屬性返回一個(gè)布爾值，表示是否暫停播放，true表示媒體暫停播放，false表示媒體正在播放。ended屬性返回一個(gè)布爾值，表示是否播放完畢，true表示媒體播放完畢，false表示還沒有播放完畢。defaultPlaybackRate屬性和playbackRate屬性defaultPlaybackRate屬性用來讀取或修改媒體默認(rèn)的播放速率。playbackRate屬性用于讀取或修改媒體當(dāng)前的播放速率。volume屬性和muted屬性volume屬性用于讀取或修改媒體的播放音量，范圍為“0”到“1”，“0”為靜音，“1”為最大音量。muted屬性用于讀取或修改媒體的靜音狀態(tài)，該值為布爾值，true表示處于靜音狀態(tài)，false表示處于非靜音狀態(tài)。6.3多媒體元素的方法6.3.1媒體播放時(shí)的方法6.3.2canPlayType方法使用media.play()播放視頻，并會(huì)將media.paused的值強(qiáng)行設(shè)為false。使用media.pause()暫停視頻，并會(huì)將media.paused的值強(qiáng)行設(shè)為true。使用media.load()重新載入視頻，并會(huì)將media.playbackRate的值強(qiáng)行設(shè)為media.defaultPlaybackRate的值，且強(qiáng)行將media.error的值設(shè)為null?！纠?-1】下面來看一個(gè)媒體播放的示例。在本例中通過video元素加載一段視頻文件，為了展示視頻播放時(shí)所應(yīng)用的方法，在控制視頻的放時(shí)，并沒有應(yīng)用瀏覽器自帶的控制條來控制視頻的播放而是通過添加“播放”與“暫?！卑粹o來控制視頻文件的播放與暫停。實(shí)例代碼如下。<html><head><metacharset="UTF-8"></meta><title>媒體播放示例</title><script>varvideo; //聲明變量functioninit()6.3.1媒體播放時(shí)的方法video=document.getElementById("video1");video.addEventListener("ended",function() //監(jiān)聽視頻播放結(jié)束事件{alert("播放結(jié)束。");},true);}functionplay(){

video.play(); //播放視頻}functionpause(){

video.pause(); //暫停播放}</script></head><bodyonload="init()"><!—可以添加controls屬性來顯示瀏覽器自帶的播放用的控制條。--><videoid="video1"src="2.ogv"></video><br/><buttononclick="play()">播放</button><buttononclick="pause()">暫停</button></body></html>本例的運(yùn)行效果如圖6-2所示。圖6-2媒體播放實(shí)例使用canPlayType方法測試瀏覽器是否支持指定的媒介類型，該方法的定義如下。varsupport=videoElement.canPlayType(type);videoElement表示頁面上的video元素或audio元素。該方法使用一個(gè)參數(shù)type，該參數(shù)的指定方法與source元素的type參數(shù)的指定方法相同，都用播放文件的MIME類型來指定，可以在指定的字符串中加上表示媒體編碼格式的codes參數(shù)。該方法返回3個(gè)可能值（均為瀏覽器判斷的結(jié)果）?？兆址簽g覽器不支持此種媒體類型；maybe：瀏覽器可能支持此種媒體類型；probably：瀏覽器確定支持此種媒體類型6.3.2canPlayType方法6.4多媒體元素的事件6.4.1事件處理6.4.2事件介紹在利用video元素或audio元素讀取或播放媒體數(shù)據(jù)的時(shí)候，會(huì)觸發(fā)一系列的事件，如果JavaScript腳本來捕捉這些事件，就可以對這些事件進(jìn)行處理了。對于這些事件的捕捉及其處理，可以按兩種方式來進(jìn)行。一種是監(jiān)聽的方式：addEventListener(“事件名”,處理函數(shù),處理方式)方法來對事件的發(fā)生進(jìn)行監(jiān)聽，該方法的定義如下。videoElement.addEventListener(type,listener,useCapture);videoElement表示頁面上的video元素或audio元素。type為事件名稱，listener表示綁定的函數(shù)，useCapture是一個(gè)布爾值，表示該事件的響應(yīng)順序，該值如果為true，則瀏覽器采用Capture響應(yīng)方式，如果為false，瀏覽器采用bubbing響應(yīng)方式，一般采用false，默認(rèn)情況下也為false。另一種是直接賦值的方式。事件處理方式為JavaScript腳本中常見的獲取事件句柄的方式，如下例所示。<videoid="video1"src="mrsoft.mov"onplay="begin_playing()"></video>functionbegin_playing(){ (中略)};6.4.1事件處理接下來，將介紹瀏覽器在請求媒體數(shù)據(jù)、下載媒體數(shù)據(jù)、播放媒體數(shù)據(jù)一直到播放結(jié)束這一系列過程中，到底會(huì)觸發(fā)哪些事件。loadstart事件：瀏覽器開始請求媒介；progress事件：瀏覽器正在獲取媒介；suspend事件：瀏覽器非主動(dòng)獲取媒介數(shù)據(jù)，但沒有加載完整個(gè)媒介資源；abort事件：瀏覽器在完全加載前中止獲取媒介數(shù)據(jù)，但是并不是由錯(cuò)誤引起的；error事件：獲取媒介數(shù)據(jù)出錯(cuò)；emptied事件：媒介元素的網(wǎng)絡(luò)狀態(tài)突然變?yōu)槲闯跏蓟?；可能引起的原因有兩個(gè)：1、載入媒體過程中突然發(fā)生一個(gè)致命錯(cuò)誤；2、在瀏覽器正在選擇支持的播放格式時(shí)，又調(diào)用了load方法重新載入媒體。stalled事件：瀏覽器獲取媒介數(shù)據(jù)異常；play事件：即將開始播放，當(dāng)執(zhí)行了play方法時(shí)觸發(fā)，或數(shù)據(jù)下載后元素被設(shè)為autoplay（自動(dòng)播放）屬性。pause事件：暫停播放，當(dāng)執(zhí)行了pause方法時(shí)觸發(fā)。loadedmetadata事件：瀏覽器獲取完媒介資源的時(shí)長和字節(jié)loadeddata事件：瀏覽器已加載當(dāng)前播放位置的媒介數(shù)據(jù)；waiting事件：播放由于下一幀無效（例如未加載）而已停止（但瀏覽器確認(rèn)下一幀會(huì)馬上有效）；6.4.2事件介紹

playing事件：已經(jīng)開始播放；canplay事件：瀏覽器能夠開始媒介播放，但估計(jì)以當(dāng)前速率播放不能直接將媒介播放完（播放期間需要緩沖）；canplaythrough事件：瀏覽器估計(jì)以當(dāng)前速率直接播放可以直接播放完整個(gè)媒介資源（期間不需要緩沖）；seeking事件：瀏覽器正在請求數(shù)據(jù)（seeking屬性值為true）；seeked事件：瀏覽器停止請求數(shù)據(jù)（seeking屬性值為false）；timeupdate事件：當(dāng)前播放位置（currentTime屬性）改變，可能是播放過程中的自然改變，也可能是被人為地改變，或由于播放不能連續(xù)而發(fā)生的跳變；ended事件：播放由于媒介結(jié)束而停止；ratechange事件：默認(rèn)播放速率（defaultPlaybackRate屬性）改變或播放速率（playbackRate屬性）改變；durationchange事件：媒介時(shí)長（duration屬性）改變；volumechange事件：音量（volume屬性）改變或靜音（muted屬性）。本實(shí)例通過timeupdate事件動(dòng)態(tài)顯示媒體文件播放時(shí)間，效果如圖6-3所示。圖6-3timeupdate事件顯示媒體文件播放6.5綜合實(shí)例——用timeupdate事件動(dòng)態(tài)顯示媒體文件播放時(shí)間程序開發(fā)步驟如下：（1）新建一個(gè)js3.js腳本文件，該文件中定義控制媒體播放的函數(shù)，代碼如下：function$$(id){returndocument.getElementById(id);functionv_move(v){ $$("pTip").style.display=(v)?"block":"none";functionv_loadstart(){ $$(“spnPlayTip”).innerHTML=“開始加載”;functionv_palying(){ $$(“spnPlayTip”).innerHTML=“正在播放”;functionv_pause(){ $$("spnPlayTip").innerHTML="已經(jīng)暫停";functionv_ended(){ $$(“spnPlayTip”).innerHTML=“播放完成”;functionv_timeupdate(e){ varstrCurTime=RuleTime(Math.floor(e.currentTime/60),2)+":"+ RuleTime(Math.floor(e.currentTime%60),2);varstrEndTime=RuleTime(Math.floor(e.duration/60),2)+":"+ RuleTime(Math.floor(e.duration%60),2); $$(“spnTimeTip”).innerHTML=strCurTime+“/”+strEndTime;//轉(zhuǎn)換時(shí)間顯示格式functionRuleTime(num,n){varlen=num.toString().length;while(len<n){num="0"+num;len++;returnnum;

（2）新建一個(gè)html文件，調(diào)用js3.js腳本文件中JavaScript函數(shù)控制媒體文件的播放，代碼如下：<html><head><metacharset="utf-8"/><title>通過timeupdate事件動(dòng)態(tài)顯示媒體文件播放時(shí)間</title><linkhref="Css/css1.css"rel="styles