版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
目錄處理視頻處理音頻實(shí)例6-4：檢測(cè)瀏覽器是否支持這個(gè)媒體類型實(shí)例6-1：播放一首音樂實(shí)例6-2：顯示加載視頻的狀態(tài)實(shí)例6-3：出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例6-5：顯示視頻的播放狀態(tài)綜合實(shí)例：為視頻設(shè)置素材圖片并顯示播放時(shí)間目錄處理視頻處理音頻實(shí)例6-4：檢測(cè)瀏覽器是否支持這個(gè)媒體類1處理視頻6.1.1使用video標(biāo)記在HTML5標(biāo)記語(yǔ)言中，通過新增標(biāo)記video可以在網(wǎng)頁(yè)中播放視頻，并控制視頻播放。當(dāng)前，video標(biāo)記支持以下三種視頻格式：Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。MPEG4：帶有視頻編碼和AAC音頻編碼的MPEG4文件。WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。1處理視頻6.1.1使用video標(biāo)記在HTML5標(biāo)記語(yǔ)1處理視頻目前主流瀏覽器對(duì)上述三種格式的支持信息如下表所示。主流瀏覽器版本支持video標(biāo)記的情況在HTML5標(biāo)記語(yǔ)言中，使用video標(biāo)記的格式如下所示。<videosrc="movie.ogg"controls="controls"></video>1處理視頻目前主流瀏覽器對(duì)上述三種格式的支持信息如下表所示。1處理視頻control：供添加播放、暫停和音量控件。<video>與</video>之間插入的內(nèi)容：供不支持video元素的瀏覽器顯示信息。例如下面的代碼：<videosrc="movie.ogg"width="320"height="240"controls="controls">你的瀏覽器不支持這種格式</video>1處理視頻control：供添加播放、暫停和音量控件。<vi1處理視頻另外，video標(biāo)記允許多個(gè)source元素。source元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。例以下面的代碼。<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">你的瀏覽器不支持這種格式</video>1處理視頻另外，video標(biāo)記允許多個(gè)source元素。so1處理視頻6.1.2<video>標(biāo)記的屬性在HTML5標(biāo)記語(yǔ)言中，<video>標(biāo)記中各個(gè)屬性的具體說明如下表所示。<video>的屬性信息1處理視頻6.1.2<video>標(biāo)記的屬性在HTML52處理音頻6.2.1audio標(biāo)記在HTML5標(biāo)記語(yǔ)言中，通過使用audio標(biāo)記元素可以播放聲音文件或者音頻流?，F(xiàn)在的audio標(biāo)記支持三種音頻格式，這三種格式在主流瀏覽器版本的支持信息如下表所示。主流瀏覽器版本支持audio標(biāo)記的情況2處理音頻6.2.1audio標(biāo)記在HTML5標(biāo)記語(yǔ)言中2處理音頻假如想在HTML5中播放音頻，只需通過以下代碼即可實(shí)現(xiàn)。<audiosrc="song.ogg"controls="controls"></audio>control屬性：供添加播放、暫停和音量控件。<audio>與</audio>之間插入的內(nèi)容：供不支持audio元素的瀏覽器顯示。例如在下面的演示代碼中，使用一個(gè)名為“ogg”格式的音頻文件，可以適用于Firefox、Opera以及Chrome瀏覽器。<audiosrc="song.ogg"controls="controls">你的瀏覽器不支持！</audio>2處理音頻假如想在HTML5中播放音頻，只需通過以下代碼即可2處理音頻在標(biāo)記audio中允許有多個(gè)source元素，通過source元素可以鏈接不同的音頻文件。瀏覽器默認(rèn)將使用第一個(gè)可識(shí)別的格式。例以下面的代碼。<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">你的瀏覽器不支持！</audio>2處理音頻在標(biāo)記audio中允許有多個(gè)source元素，通過2處理音頻6.2.2<audio>標(biāo)記的屬性在HTML5標(biāo)記語(yǔ)言中，<audio>標(biāo)記中各個(gè)屬性的具體說明如下表所示。<audio>的屬性信息2處理音頻6.2.2<audio>標(biāo)記的屬性在HTML53實(shí)例6-1
播放一首音樂實(shí)例文件的實(shí)現(xiàn)代碼如下所示。<!DOCTYPEHTML><html><body><audiocontrols="controls"autoplay="autoplay"><sourcesrc="song.mp3"type="audio/mpeg"/><sourcesrc="song.ogg"type="audio/mpeg"/>你的瀏覽器不支持！</audio></body></html>3實(shí)例6-1
播放一首音樂實(shí)例文件的實(shí)現(xiàn)代碼如下所示。<!3實(shí)例6-1
播放一首音樂上述代碼的功能是在網(wǎng)頁(yè)中自動(dòng)播放名為“”的音頻文件，當(dāng)該文件不存在時(shí)，將播放“”音頻文件。在代碼中音頻文件和實(shí)例文件同屬于一個(gè)目錄下。執(zhí)行后的效果如下圖所示。執(zhí)行效果3實(shí)例6-1
播放一首音樂上述代碼的功能是在網(wǎng)頁(yè)中自動(dòng)播放4實(shí)例6-2
顯示加載視頻的狀態(tài)在HTML5標(biāo)記語(yǔ)言中，通過多媒體元素<video>的“networkState”屬性可以返回視頻文件的網(wǎng)絡(luò)狀態(tài)。當(dāng)瀏覽器讀取視頻文件時(shí)會(huì)觸發(fā)“progress”事件，通過該事件可以獲取視頻文件在被打開過程中各個(gè)不同階段的網(wǎng)絡(luò)狀態(tài)值。其中“networkState”為只讀屬性，該屬性對(duì)應(yīng)以下4個(gè)返回值。NETWORK_EMPTY：返回值為0，表示數(shù)據(jù)加載初始化。NETWORK_IDLE：返回值為1，文件加載成功，等待請(qǐng)求播放。NETWORK_LOADING：返回值為2，文件正在加載過程中。NETWORK_NO_SOURCE：返回值為3，表示加載出錯(cuò)。4實(shí)例6-2
顯示加載視頻的狀態(tài)在HTML5標(biāo)記語(yǔ)言中，通4實(shí)例6-2
顯示加載視頻的狀態(tài)在接下來的內(nèi)容中，將通過一個(gè)具體實(shí)例來講解顯示加載視頻狀態(tài)的方法。具體實(shí)現(xiàn)流程如下：（1）分別添加一個(gè)多媒體元素<video>和一個(gè)<span>元素。（2）當(dāng)使用<video>元素加載視頻文件時(shí)，在觸發(fā)的“progress”事件中顯示文件在加載過程中返回的“networkState”屬性值，這一顯示過程是通過<span>元素實(shí)現(xiàn)的。實(shí)例文件的具體實(shí)現(xiàn)代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><video>networkState屬性</title>4實(shí)例6-2
顯示加載視頻的狀態(tài)在接下來的內(nèi)容中，將通過一4實(shí)例6-2
顯示加載視頻的狀態(tài)<linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js2.js"/></script></head><body><div><videoid="vdoMain"src="123.ogg"width="360px"height="220px"onProgress="Video_Progress(this)"controls="true">
當(dāng)前瀏覽器不支持視頻！</video><spanid="spnStatus"></span><div></body></html>4實(shí)例6-2
顯示加載視頻的狀態(tài)<linkhref="c4實(shí)例6-2
顯示加載視頻的狀態(tài)腳本文件的具體代碼如下所示。function$$(id){returndocument.getElementById(id);}functionVideo_Progress(e){varintState=workState;$$("spnStatus").style.display="block";$$("spnStatus").innerHTML=StrByNum(intState) if(intState==1){$$("spnStatus").style.display="none";}}4實(shí)例6-2
顯示加載視頻的狀態(tài)腳本文件的具體代碼如下所示4實(shí)例6-2
顯示加載視頻的狀態(tài)functionStrByNum(n){switch(n){case0:return"正在初始化...";case1:return"數(shù)據(jù)加載完成!";case2:return"正在加載中...";case3:return"數(shù)據(jù)加載失敗!";}}4實(shí)例6-2
顯示加載視頻的狀態(tài)functionStrB4實(shí)例6-2
顯示加載視頻的狀態(tài)縱覽上述代碼，媒體元素<video>在觸發(fā)加載視頻文件事件“progress”時(shí)，調(diào)用一個(gè)自定義的函數(shù)Video_Progress()，此函數(shù)的運(yùn)作流程如下：（1）將<video>元素的“networkState”屬性值保存至變量“intState”中。（2）將顯示狀態(tài)信息<span>元素的可見樣式設(shè)置為“block”，表示可見。（3）調(diào)用另一個(gè)自定義的函數(shù)StrByNum()，將保存至變量“intState”中的
“networkState”屬性值轉(zhuǎn)成相應(yīng)的文字說明信息，并賦值給顯示狀態(tài)信息元素<span>，用于實(shí)現(xiàn)在頁(yè)面中的動(dòng)態(tài)顯示效果。（4）當(dāng)返回的“networkState”屬性值為“1”時(shí)，表示數(shù)據(jù)加載完成，再將顯示狀態(tài)信息<span>元素的可見樣式設(shè)置為“none”，即隱藏該元素。4實(shí)例6-2
顯示加載視頻的狀態(tài)縱覽上述代碼，媒體元素<v4實(shí)例6-2
顯示加載視頻的狀態(tài)在OperaMobileEmulator中的測(cè)試效果如下圖所示。執(zhí)行效果4實(shí)例6-2
顯示加載視頻的狀態(tài)在OperaMobile5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在HTML5標(biāo)記語(yǔ)言中，屬性“error”是一個(gè)只讀屬性。在使用多媒體元素加載或讀取文件過程中，如果出現(xiàn)異?；蝈e(cuò)誤就會(huì)觸發(fā)該元素的“error”事件。在該事件中，可以通過元素的“error”屬性返回一個(gè)error對(duì)象，根據(jù)該對(duì)象的“code”返回當(dāng)前的錯(cuò)誤值。下面將通過一個(gè)演示實(shí)例來講解在播放屏幕中顯示出錯(cuò)信息的方法。具體實(shí)現(xiàn)流程如下：（1）分別添加了一個(gè)多媒體元素<video>和一個(gè)<span>元素。（2）當(dāng)使用<video>元素加載一個(gè)不支持的播放格式文件時(shí)觸發(fā)“error”事件，通過<span>元素顯示加載出錯(cuò)后“error”屬性返回的錯(cuò)誤代碼信息。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在HTML5標(biāo)5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例文件的具體實(shí)現(xiàn)代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><video>error屬性</title><linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js3.js"/></script></head><body>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例文件的具體5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息<div><videoid="vdoMain"src="123.mm"width="360px"height="220px"onError="Video_Error(this)"controls="true">
你的瀏覽器不支持視頻</video><spanid="spnStatus"></span><div></body></html>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息<div>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}functionVideo_Error(e){varintState=e.error.code;$$("spnStatus").style.display="block";$$("spnStatus").innerHTML=ErrorByNum(intState);}functionErrorByNum(n){腳本文件的具體實(shí)現(xiàn)代碼如下所示。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息//Java5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息switch(n){case1:return"加載異常，用戶請(qǐng)求中止!";case2:return"加載中止，網(wǎng)絡(luò)錯(cuò)誤！";case3:return"加載完成，解碼出錯(cuò)"; case4:return"不支持的播放格式!";}}5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息switch5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在上述代碼中，因?yàn)橐曨l元素<video>不支持載入文件“”的播放格式，所以會(huì)觸發(fā)“error”事件。在該事件中將調(diào)用函數(shù)Video_Error()，此函數(shù)的執(zhí)行流程如下：（1）通過變量“intState”保存error對(duì)象返回的錯(cuò)誤代碼值“code”。（2）將該值通過另一個(gè)函數(shù)ErrorByNum()返回對(duì)應(yīng)的文字說明信息。（3）將獲取的說明信息顯示在頁(yè)面元素<span>中。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在上述代碼中，5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息執(zhí)行后的效果如下圖所示。執(zhí)行效果5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息執(zhí)行后的效果如6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在HTML5標(biāo)記語(yǔ)言中，因?yàn)闉g覽器對(duì)多媒體元素加載媒體文件類型支持的不同，所以在使用多媒體元素加載文件前需要檢測(cè)當(dāng)前瀏覽器是否支持媒體文件類型。檢測(cè)的方法是通過調(diào)用多媒體元素的canPlayType（type）方法實(shí)現(xiàn)，其中參數(shù)“type”表示需要瀏覽器檢測(cè)的類型，該類型與媒體文件的IMIME類型一致；通過多媒體元素的canPlayType（type）方法，可以返回以下三個(gè)值：空字符：表示瀏覽器不支持該類型的媒體文件。maybe：表示瀏覽器可能支持該類型的媒體文件。probably：表示瀏覽器支持該類型的媒體文件。6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在HTML5標(biāo)6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型下面將通過一個(gè)演示實(shí)例來檢測(cè)瀏覽器是否支持媒體類型。在本實(shí)例的實(shí)現(xiàn)文件是，具體實(shí)現(xiàn)流程如下：（1）在頁(yè)面中添加了一個(gè)多媒體元素<video>，并在多媒體元素的底部創(chuàng)建一個(gè)<span>元素，功能是檢測(cè)瀏覽器是否支持各種媒體類型。（2）設(shè)置當(dāng)單擊<span>元素后在頁(yè)面中顯示檢測(cè)后的結(jié)果。實(shí)例文件的具體代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>檢測(cè)瀏覽器支持媒體類型</title><linkhref="css.css"rel="stylesheet"type="text/css">6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型下面將通過一個(gè)6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型<scripttype="text/JavaScript"language="jscript"src="js4.js"/></script></head><body><div><videoid="vdoMain"src="123.ogg"width="360px"height="220px">
你的瀏覽器不支持視頻</video><pid="pTool"><spanonClick="v_chkType();">檢測(cè)</span></p><spanid="spnResult"></span><div></body></html>6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型<script6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型腳本文件的具體實(shí)現(xiàn)代碼如下：function$$(id){returndocument.getElementById(id);}vari=0,j=0,k=0;functionv_chkType(){ varstrHTML="";vararrType=newArray('audio/mpeg;','audio/mov;','audio/mp4; codecs="mp4a.40.2"','audio/ogg;codecs="vorbis"','video/webm;codecs="vp8,vorbis"','audio/wav;codecs="1"');for(intI=0;intI<arrType.length;intI++){switch($$("vdoMain").canPlayType(arrType[intI])){6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型腳本文件的具體6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型case"":i=i+1;break;case"maybe":j=j+1;break;case"probably":k=k+1;break;}} strHTML+="空字符:"+i+"<br>"; strHTML+="maybe:"+j+"<br>"; strHTML+="probably:"+k; $$("spnResult").style.display="block"; $$("spnResult").innerHTML=strHTML;}6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型case"6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在上述代碼中，當(dāng)用戶在頁(yè)面中單擊內(nèi)容為“檢測(cè)”的<span>元素時(shí)，將調(diào)用一個(gè)自定義函數(shù)v_chkType()。此函數(shù)的運(yùn)作流程如下：（1）定義一個(gè)數(shù)組“arrType”，用于保存各種媒體類型及編碼格式。（2）遍歷該數(shù)組中的元素。在遍歷過程中，調(diào)用多媒體元素的canPlayType()方法，對(duì)每種類型及編碼格式進(jìn)行檢測(cè)，并將返回檢測(cè)結(jié)果值的累加總量保存至各自變量。執(zhí)行效果（3）將這些變量值數(shù)據(jù)通過ID號(hào)為“spnResult”的元素顯示在頁(yè)面中。執(zhí)行后的效果如圖所示。6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在上述代碼中，7實(shí)例6-5
顯示視頻的播放狀態(tài)在HTML5標(biāo)記語(yǔ)言中，多媒體元素不僅擁有相關(guān)的屬性、方法，而且還有一系列完備的事件機(jī)制。在本章前面介紹多媒體元素的“networkState”屬性與“error”屬性時(shí)，分別觸發(fā)了“progress”事件與“error”事件。除此之外，還有許多記錄媒體文件播放過程的事件，例如“playing”等。在媒體文件被瀏覽請(qǐng)求加載、開始加載、開始播放、暫停播放、播放結(jié)束這一系列的流程中所觸發(fā)的事件，稱為“媒體播放事件”，也是多媒體元素的核心事件。通過對(duì)這些事件的跟蹤，可以很方便地獲取媒體文件在各個(gè)階段的播放狀態(tài)。7實(shí)例6-5
顯示視頻的播放狀態(tài)在HTML5標(biāo)記語(yǔ)言中，多7實(shí)例6-5
顯示視頻的播放狀態(tài)在接下來的內(nèi)容中，將通過一個(gè)演示實(shí)例來講解顯示當(dāng)前正在播放視頻的狀態(tài)的方法。具體實(shí)現(xiàn)流程如下：（1）在頁(yè)面中添加了一個(gè)多媒體元素<video>，并增加了“controls”屬性。（2）通過自定義函數(shù)綁定了多個(gè)播放事件。（3）在事件中分別記錄媒體元素的即時(shí)狀態(tài)，并以動(dòng)態(tài)的方式將狀態(tài)內(nèi)容顯示在ID號(hào)為“spnPlayTip”的頁(yè)面元素中。7實(shí)例6-5
顯示視頻的播放狀態(tài)在接下來的內(nèi)容中，將通過一7實(shí)例6-5
顯示視頻的播放狀態(tài)實(shí)例文件的具體代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>顯示播放狀態(tài)</title><linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js5.js"/></script></head><body><div>7實(shí)例6-5
顯示視頻的播放狀態(tài)實(shí)例文件的具體代碼如下所示7實(shí)例6-5
顯示視頻的播放狀態(tài)<videoid="vdoMain"src="123.ogg"width="360px"height="220px"controls="true"onMouseOut="v_move(0)"onMouseOver="v_move(1)"onPlaying="v_palying()"onPause="v_pause()"onLoadStart="v_loadstart();"onEnded="v_ended();">
你的瀏覽器不支持視頻</video><pid="pTip"><spanid="spnPlayTip"class="spnL">播放完成</span></p><div></body></html>7實(shí)例6-5
顯示視頻的播放狀態(tài)<videoid="v7實(shí)例6-5
顯示視頻的播放狀態(tài)腳本文件的具體實(shí)現(xiàn)代碼如下所示。//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}functionv_move(v){ $$("pTip").style.display=(v)?"block":"none";}functionv_loadstart(){ $$("spnPlayTip").innerHTML="開始加載";}7實(shí)例6-5
顯示視頻的播放狀態(tài)腳本文件的具體實(shí)現(xiàn)代碼如下7實(shí)例6-5
顯示視頻的播放狀態(tài)functionv_palying(){ $$("spnPlayTip").innerHTML="正在播放";}functionv_pause(){ $$("spnPlayTip").innerHTML="已經(jīng)暫停";}functionv_ended(){ $$("spnPlayTip").innerHTML="播放完成";}7實(shí)例6-5
顯示視頻的播放狀態(tài)functionv_pa7實(shí)例6-5
顯示視頻的播放狀態(tài)上述代碼實(shí)現(xiàn)了鼠標(biāo)移至多媒體元素時(shí)顯示媒體播放狀態(tài)的功能，在移出元素時(shí)隱藏播放狀態(tài)。實(shí)現(xiàn)方法是在多媒體元素的onMouseOut與onMouseOver事件中，通過傳遞不同的參數(shù)值調(diào)用同一個(gè)自定義的函數(shù)v_move()。在該函數(shù)中將根據(jù)傳回的參數(shù)值，顯示或隱藏ID號(hào)為“pTip”的頁(yè)面元素，從而實(shí)現(xiàn)鼠標(biāo)移至或移出多媒體元素的效果。為了在多媒體元素觸發(fā)播放事件的過程中動(dòng)態(tài)顯示媒體文件的播放狀態(tài)，需要在綁定的事件中，修改ID號(hào)為“spnPlayTip”的元素內(nèi)容。執(zhí)行后的效果如右圖所示。執(zhí)行效果7實(shí)例6-5
顯示視頻的播放狀態(tài)上述代碼實(shí)現(xiàn)了鼠標(biāo)移至多媒7綜
合
實(shí)
例
為
視
頻
設(shè)
置
素
材
圖
片
并
顯
示
播
放
時(shí)
間在HTML5標(biāo)記語(yǔ)言中，如果在媒體文件播放過程中的播放位置發(fā)生變化，就會(huì)觸發(fā)事件timeupdate。通過結(jié)合使用timeupdate事件和多媒體元素的“currentTime”與“duration”屬性，可以動(dòng)態(tài)顯示媒體文件播放的當(dāng)前時(shí)間與總量時(shí)間。在接下來的內(nèi)容中，將通過一個(gè)演示實(shí)例來講解顯示播放視頻時(shí)間信息的方法。具體操作可參考書中步驟。
執(zhí)行效果7綜
合
實(shí)
例
為
視
頻
設(shè)
置
素
材
圖
片
并
目錄處理視頻處理音頻實(shí)例6-4：檢測(cè)瀏覽器是否支持這個(gè)媒體類型實(shí)例6-1：播放一首音樂實(shí)例6-2：顯示加載視頻的狀態(tài)實(shí)例6-3：出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例6-5：顯示視頻的播放狀態(tài)綜合實(shí)例：為視頻設(shè)置素材圖片并顯示播放時(shí)間目錄處理視頻處理音頻實(shí)例6-4：檢測(cè)瀏覽器是否支持這個(gè)媒體類1處理視頻6.1.1使用video標(biāo)記在HTML5標(biāo)記語(yǔ)言中，通過新增標(biāo)記video可以在網(wǎng)頁(yè)中播放視頻，并控制視頻播放。當(dāng)前，video標(biāo)記支持以下三種視頻格式：Ogg：帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。MPEG4：帶有視頻編碼和AAC音頻編碼的MPEG4文件。WebM：帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。1處理視頻6.1.1使用video標(biāo)記在HTML5標(biāo)記語(yǔ)1處理視頻目前主流瀏覽器對(duì)上述三種格式的支持信息如下表所示。主流瀏覽器版本支持video標(biāo)記的情況在HTML5標(biāo)記語(yǔ)言中，使用video標(biāo)記的格式如下所示。<videosrc="movie.ogg"controls="controls"></video>1處理視頻目前主流瀏覽器對(duì)上述三種格式的支持信息如下表所示。1處理視頻control：供添加播放、暫停和音量控件。<video>與</video>之間插入的內(nèi)容：供不支持video元素的瀏覽器顯示信息。例如下面的代碼：<videosrc="movie.ogg"width="320"height="240"controls="controls">你的瀏覽器不支持這種格式</video>1處理視頻control：供添加播放、暫停和音量控件。<vi1處理視頻另外，video標(biāo)記允許多個(gè)source元素。source元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。例以下面的代碼。<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">你的瀏覽器不支持這種格式</video>1處理視頻另外，video標(biāo)記允許多個(gè)source元素。so1處理視頻6.1.2<video>標(biāo)記的屬性在HTML5標(biāo)記語(yǔ)言中，<video>標(biāo)記中各個(gè)屬性的具體說明如下表所示。<video>的屬性信息1處理視頻6.1.2<video>標(biāo)記的屬性在HTML52處理音頻6.2.1audio標(biāo)記在HTML5標(biāo)記語(yǔ)言中，通過使用audio標(biāo)記元素可以播放聲音文件或者音頻流。現(xiàn)在的audio標(biāo)記支持三種音頻格式，這三種格式在主流瀏覽器版本的支持信息如下表所示。主流瀏覽器版本支持audio標(biāo)記的情況2處理音頻6.2.1audio標(biāo)記在HTML5標(biāo)記語(yǔ)言中2處理音頻假如想在HTML5中播放音頻，只需通過以下代碼即可實(shí)現(xiàn)。<audiosrc="song.ogg"controls="controls"></audio>control屬性：供添加播放、暫停和音量控件。<audio>與</audio>之間插入的內(nèi)容：供不支持audio元素的瀏覽器顯示。例如在下面的演示代碼中，使用一個(gè)名為“ogg”格式的音頻文件，可以適用于Firefox、Opera以及Chrome瀏覽器。<audiosrc="song.ogg"controls="controls">你的瀏覽器不支持！</audio>2處理音頻假如想在HTML5中播放音頻，只需通過以下代碼即可2處理音頻在標(biāo)記audio中允許有多個(gè)source元素，通過source元素可以鏈接不同的音頻文件。瀏覽器默認(rèn)將使用第一個(gè)可識(shí)別的格式。例以下面的代碼。<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">你的瀏覽器不支持！</audio>2處理音頻在標(biāo)記audio中允許有多個(gè)source元素，通過2處理音頻6.2.2<audio>標(biāo)記的屬性在HTML5標(biāo)記語(yǔ)言中，<audio>標(biāo)記中各個(gè)屬性的具體說明如下表所示。<audio>的屬性信息2處理音頻6.2.2<audio>標(biāo)記的屬性在HTML53實(shí)例6-1
播放一首音樂實(shí)例文件的實(shí)現(xiàn)代碼如下所示。<!DOCTYPEHTML><html><body><audiocontrols="controls"autoplay="autoplay"><sourcesrc="song.mp3"type="audio/mpeg"/><sourcesrc="song.ogg"type="audio/mpeg"/>你的瀏覽器不支持！</audio></body></html>3實(shí)例6-1
播放一首音樂實(shí)例文件的實(shí)現(xiàn)代碼如下所示。<!3實(shí)例6-1
播放一首音樂上述代碼的功能是在網(wǎng)頁(yè)中自動(dòng)播放名為“”的音頻文件，當(dāng)該文件不存在時(shí)，將播放“”音頻文件。在代碼中音頻文件和實(shí)例文件同屬于一個(gè)目錄下。執(zhí)行后的效果如下圖所示。執(zhí)行效果3實(shí)例6-1
播放一首音樂上述代碼的功能是在網(wǎng)頁(yè)中自動(dòng)播放4實(shí)例6-2
顯示加載視頻的狀態(tài)在HTML5標(biāo)記語(yǔ)言中，通過多媒體元素<video>的“networkState”屬性可以返回視頻文件的網(wǎng)絡(luò)狀態(tài)。當(dāng)瀏覽器讀取視頻文件時(shí)會(huì)觸發(fā)“progress”事件，通過該事件可以獲取視頻文件在被打開過程中各個(gè)不同階段的網(wǎng)絡(luò)狀態(tài)值。其中“networkState”為只讀屬性，該屬性對(duì)應(yīng)以下4個(gè)返回值。NETWORK_EMPTY：返回值為0，表示數(shù)據(jù)加載初始化。NETWORK_IDLE：返回值為1，文件加載成功，等待請(qǐng)求播放。NETWORK_LOADING：返回值為2，文件正在加載過程中。NETWORK_NO_SOURCE：返回值為3，表示加載出錯(cuò)。4實(shí)例6-2
顯示加載視頻的狀態(tài)在HTML5標(biāo)記語(yǔ)言中，通4實(shí)例6-2
顯示加載視頻的狀態(tài)在接下來的內(nèi)容中，將通過一個(gè)具體實(shí)例來講解顯示加載視頻狀態(tài)的方法。具體實(shí)現(xiàn)流程如下：（1）分別添加一個(gè)多媒體元素<video>和一個(gè)<span>元素。（2）當(dāng)使用<video>元素加載視頻文件時(shí)，在觸發(fā)的“progress”事件中顯示文件在加載過程中返回的“networkState”屬性值，這一顯示過程是通過<span>元素實(shí)現(xiàn)的。實(shí)例文件的具體實(shí)現(xiàn)代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><video>networkState屬性</title>4實(shí)例6-2
顯示加載視頻的狀態(tài)在接下來的內(nèi)容中，將通過一4實(shí)例6-2
顯示加載視頻的狀態(tài)<linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js2.js"/></script></head><body><div><videoid="vdoMain"src="123.ogg"width="360px"height="220px"onProgress="Video_Progress(this)"controls="true">
當(dāng)前瀏覽器不支持視頻！</video><spanid="spnStatus"></span><div></body></html>4實(shí)例6-2
顯示加載視頻的狀態(tài)<linkhref="c4實(shí)例6-2
顯示加載視頻的狀態(tài)腳本文件的具體代碼如下所示。function$$(id){returndocument.getElementById(id);}functionVideo_Progress(e){varintState=workState;$$("spnStatus").style.display="block";$$("spnStatus").innerHTML=StrByNum(intState) if(intState==1){$$("spnStatus").style.display="none";}}4實(shí)例6-2
顯示加載視頻的狀態(tài)腳本文件的具體代碼如下所示4實(shí)例6-2
顯示加載視頻的狀態(tài)functionStrByNum(n){switch(n){case0:return"正在初始化...";case1:return"數(shù)據(jù)加載完成!";case2:return"正在加載中...";case3:return"數(shù)據(jù)加載失敗!";}}4實(shí)例6-2
顯示加載視頻的狀態(tài)functionStrB4實(shí)例6-2
顯示加載視頻的狀態(tài)縱覽上述代碼，媒體元素<video>在觸發(fā)加載視頻文件事件“progress”時(shí)，調(diào)用一個(gè)自定義的函數(shù)Video_Progress()，此函數(shù)的運(yùn)作流程如下：（1）將<video>元素的“networkState”屬性值保存至變量“intState”中。（2）將顯示狀態(tài)信息<span>元素的可見樣式設(shè)置為“block”，表示可見。（3）調(diào)用另一個(gè)自定義的函數(shù)StrByNum()，將保存至變量“intState”中的
“networkState”屬性值轉(zhuǎn)成相應(yīng)的文字說明信息，并賦值給顯示狀態(tài)信息元素<span>，用于實(shí)現(xiàn)在頁(yè)面中的動(dòng)態(tài)顯示效果。（4）當(dāng)返回的“networkState”屬性值為“1”時(shí)，表示數(shù)據(jù)加載完成，再將顯示狀態(tài)信息<span>元素的可見樣式設(shè)置為“none”，即隱藏該元素。4實(shí)例6-2
顯示加載視頻的狀態(tài)縱覽上述代碼，媒體元素<v4實(shí)例6-2
顯示加載視頻的狀態(tài)在OperaMobileEmulator中的測(cè)試效果如下圖所示。執(zhí)行效果4實(shí)例6-2
顯示加載視頻的狀態(tài)在OperaMobile5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在HTML5標(biāo)記語(yǔ)言中，屬性“error”是一個(gè)只讀屬性。在使用多媒體元素加載或讀取文件過程中，如果出現(xiàn)異?；蝈e(cuò)誤就會(huì)觸發(fā)該元素的“error”事件。在該事件中，可以通過元素的“error”屬性返回一個(gè)error對(duì)象，根據(jù)該對(duì)象的“code”返回當(dāng)前的錯(cuò)誤值。下面將通過一個(gè)演示實(shí)例來講解在播放屏幕中顯示出錯(cuò)信息的方法。具體實(shí)現(xiàn)流程如下：（1）分別添加了一個(gè)多媒體元素<video>和一個(gè)<span>元素。（2）當(dāng)使用<video>元素加載一個(gè)不支持的播放格式文件時(shí)觸發(fā)“error”事件，通過<span>元素顯示加載出錯(cuò)后“error”屬性返回的錯(cuò)誤代碼信息。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在HTML5標(biāo)5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例文件的具體實(shí)現(xiàn)代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title><video>error屬性</title><linkhref="css.css"rel="stylesheet"type="text/css"><scripttype="text/JavaScript"language="jscript"src="js3.js"/></script></head><body>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息實(shí)例文件的具體5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息<div><videoid="vdoMain"src="123.mm"width="360px"height="220px"onError="Video_Error(this)"controls="true">
你的瀏覽器不支持視頻</video><spanid="spnStatus"></span><div></body></html>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息<div>5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息//JavaScriptDocumentfunction$$(id){returndocument.getElementById(id);}functionVideo_Error(e){varintState=e.error.code;$$("spnStatus").style.display="block";$$("spnStatus").innerHTML=ErrorByNum(intState);}functionErrorByNum(n){腳本文件的具體實(shí)現(xiàn)代碼如下所示。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息//Java5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息switch(n){case1:return"加載異常，用戶請(qǐng)求中止!";case2:return"加載中止，網(wǎng)絡(luò)錯(cuò)誤！";case3:return"加載完成，解碼出錯(cuò)"; case4:return"不支持的播放格式!";}}5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息switch5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在上述代碼中，因?yàn)橐曨l元素<video>不支持載入文件“”的播放格式，所以會(huì)觸發(fā)“error”事件。在該事件中將調(diào)用函數(shù)Video_Error()，此函數(shù)的執(zhí)行流程如下：（1）通過變量“intState”保存error對(duì)象返回的錯(cuò)誤代碼值“code”。（2）將該值通過另一個(gè)函數(shù)ErrorByNum()返回對(duì)應(yīng)的文字說明信息。（3）將獲取的說明信息顯示在頁(yè)面元素<span>中。5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息在上述代碼中，5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息執(zhí)行后的效果如下圖所示。執(zhí)行效果5實(shí)例6-3
出錯(cuò)時(shí)在播放屏幕中顯示出錯(cuò)信息執(zhí)行后的效果如6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在HTML5標(biāo)記語(yǔ)言中，因?yàn)闉g覽器對(duì)多媒體元素加載媒體文件類型支持的不同，所以在使用多媒體元素加載文件前需要檢測(cè)當(dāng)前瀏覽器是否支持媒體文件類型。檢測(cè)的方法是通過調(diào)用多媒體元素的canPlayType（type）方法實(shí)現(xiàn)，其中參數(shù)“type”表示需要瀏覽器檢測(cè)的類型，該類型與媒體文件的IMIME類型一致；通過多媒體元素的canPlayType（type）方法，可以返回以下三個(gè)值：空字符：表示瀏覽器不支持該類型的媒體文件。maybe：表示瀏覽器可能支持該類型的媒體文件。probably：表示瀏覽器支持該類型的媒體文件。6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在HTML5標(biāo)6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型下面將通過一個(gè)演示實(shí)例來檢測(cè)瀏覽器是否支持媒體類型。在本實(shí)例的實(shí)現(xiàn)文件是，具體實(shí)現(xiàn)流程如下：（1）在頁(yè)面中添加了一個(gè)多媒體元素<video>，并在多媒體元素的底部創(chuàng)建一個(gè)<span>元素，功能是檢測(cè)瀏覽器是否支持各種媒體類型。（2）設(shè)置當(dāng)單擊<span>元素后在頁(yè)面中顯示檢測(cè)后的結(jié)果。實(shí)例文件的具體代碼如下所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>檢測(cè)瀏覽器支持媒體類型</title><linkhref="css.css"rel="stylesheet"type="text/css">6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型下面將通過一個(gè)6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型<scripttype="text/JavaScript"language="jscript"src="js4.js"/></script></head><body><div><videoid="vdoMain"src="123.ogg"width="360px"height="220px">
你的瀏覽器不支持視頻</video><pid="pTool"><spanonClick="v_chkType();">檢測(cè)</span></p><spanid="spnResult"></span><div></body></html>6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型<script6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型腳本文件的具體實(shí)現(xiàn)代碼如下：function$$(id){returndocument.getElementById(id);}vari=0,j=0,k=0;functionv_chkType(){ varstrHTML="";vararrType=newArray('audio/mpeg;','audio/mov;','audio/mp4; codecs="mp4a.40.2"','audio/ogg;codecs="vorbis"','video/webm;codecs="vp8,vorbis"','audio/wav;codecs="1"');for(intI=0;intI<arrType.length;intI++){switch($$("vdoMain").canPlayType(arrType[intI])){6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型腳本文件的具體6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型case"":i=i+1;break;case"maybe":j=j+1;break;case"probably":k=k+1;break;}} strHTML+="空字符:"+i+"<br>"; strHTML+="maybe:"+j+"<br>"; strHTML+="probably:"+k; $$("spnResult").style.display="block"; $$("spnResult").innerHTML=strHTML;}6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型case"6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在上述代碼中，當(dāng)用戶在頁(yè)面中單擊內(nèi)容為“檢測(cè)”的<span>元素時(shí)，將調(diào)用一個(gè)自定義函數(shù)v_chkType()。此函數(shù)的運(yùn)作流程如下：（1）定義一個(gè)數(shù)組“arrType”，用于保存各種媒體類型及編碼格式。（2）遍歷該數(shù)組中的元素。在遍歷過程中，調(diào)用多媒體元素的canPlayType()方法，對(duì)每種類型及編碼格式進(jìn)行檢測(cè)，并將返回檢測(cè)結(jié)果值的累加總量保存至各自變量。執(zhí)行效果（3）將這些變量值數(shù)據(jù)通過ID號(hào)為“spnResult”的元素顯示在頁(yè)面中。執(zhí)行后的效果如圖所示。6實(shí)例6-4
檢測(cè)瀏覽器是否支持這個(gè)媒體類型在上述代碼中，7實(shí)例6-5
顯示視頻的播放狀態(tài)在HTML5標(biāo)記語(yǔ)言中，多媒體元素不僅擁有相關(guān)的屬性、方法，而且還有一系列完備的事件機(jī)制。在本章前面介紹多媒體元素的“networkState”屬性與“error”屬性時(shí)，分別觸發(fā)了“progress”事件與“error”事件。除此之外，還有許多記錄媒體文件播放過程的事件，例如“
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 物流配送路徑優(yōu)化對(duì)比表
- 開幕致辭與企業(yè)愿景演講實(shí)錄
- 抵押房產(chǎn)借款合同
- 江西省吉安市2024-2025學(xué)年高一上學(xué)期期末教學(xué)質(zhì)量檢測(cè)生物學(xué)試題（含答案）
- 安徽省宿州市碭山縣2024-2025學(xué)年高一上學(xué)期期末考試生物學(xué)試題（含答案）
- 商務(wù)活動(dòng)策劃與執(zhí)行指南
- 醫(yī)院門診部運(yùn)營(yíng)管理協(xié)議
- 私人營(yíng)養(yǎng)師營(yíng)養(yǎng)指導(dǎo)服務(wù)合同
- 智慧城市綜合項(xiàng)目實(shí)施方案合同
- 企業(yè)品牌使用權(quán)轉(zhuǎn)讓協(xié)議
- 《莖和葉》說課稿-2023-2024學(xué)年科學(xué)四年級(jí)下冊(cè)教科版
- 2024年皖西衛(wèi)生職業(yè)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)及答案解析
- 公務(wù)接待知識(shí)培訓(xùn)
- 2024年終通信監(jiān)理工作總結(jié)范文（2篇）
- 2024年04月北京中信銀行總行社會(huì)招考（420）筆試歷年參考題庫(kù)附帶答案詳解
- 2025年中遠(yuǎn)海運(yùn)集團(tuán)招聘筆試參考題庫(kù)含答案解析
- 【含答案、詳細(xì)解析】2024年山東省青島市中考數(shù)學(xué)試題
- 小學(xué)安全教育四年級(jí)
- 開題報(bào)告：實(shí)現(xiàn)綜合育人價(jià)值的中學(xué)勞動(dòng)教育課程體系研究
- 《人工智能：AIGC基礎(chǔ)與應(yīng)用》題庫(kù) 填空題
- 文本數(shù)據(jù)質(zhì)量評(píng)估標(biāo)準(zhǔn)-洞察分析
評(píng)論
0/150
提交評(píng)論