【正文】 。 } function pausePlay(){ //暫停播放 ()。 )。 )。 break。 case : alert(不支持播放的視頻格式。 )。 break。 case : alert(網絡發(fā)生故障，視頻的下載過程被中止。 )。 //用秒數(shù)來顯示當前播放進度 = () + ／ + () +（秒） 。,playErrorEventResponse)。 (39。ontimeupdate39。,playEndEventResponse)。 } else { // IE (39。error39。,timeUpdateEventResponse, false)。 //監(jiān)聽視頻播放時間變化事件 (39。ended39。 function initVideoTagEvent(){ videoTagObject = (videoTagID)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 25/27 頁 25 與播放過程相關的典型事件的應用示例 頁面標簽及控制代碼 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 （ 20） durationchange 資源長度改變， duration(視頻播放總時長 )屬性被更新。 video比 audio標簽對象的 ended 屬性默認是設置為 false 的，當然當媒體文件播放到最后的時候， ended 屬性則變?yōu)?true。 （ 17） timeupdate 播放時間改變。 （ 15） seeking 尋找中。 （ 14） canplaythrough 可以播放，歌曲全部加載完畢 —— 播放器認為從現(xiàn)在開始播放，直到播放結束，不再會因為等待后面的數(shù)據(jù)而出現(xiàn)緩沖等待。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 24/27 頁 24 （ 13） canplay 確認已經裝載足夠的媒體信息，并可以播放，但中途可能因為加載而暫停 —— 視頻播放器已經可以開始播放視頻了。 （ 11） waiting 等待數(shù)據(jù)，并非錯誤 —— 播放由于下一幀數(shù)據(jù)未獲取到導致播放停止，但是播放器沒有主動預期其停止，仍然在努力的獲取數(shù)據(jù)，簡單的說就是在等待下一幀視頻數(shù)據(jù)，暫時還無法播放。如果某個媒體是問題文件而導致不能正常加載（比如出現(xiàn)了 404 錯誤），則會直接產生 error 事件。 （ 9） loadedmetadata 成功獲取資源長度等 meta（元）信息完畢 —— 播放器已經獲取了視頻信息的時長和視頻資源文件的大小等信息。 （ 7） play play()和 autoplay 開始播放時觸發(fā) —— 播放器不再保持“暫?！睜顟B(tài)，即“ play()”方法被調用或者 autoplay 屬性設置為 true 期望播放器自動開始播放。 （ 5） error 請求數(shù)據(jù)時遇到錯誤。 （ 3） suspend 延遲下載。 ? 如果 preload 成員屬 性設置為“ metadata”或者是“ auto”，則會觸發(fā)“ progress”和“ loadmetadata”事件（如果沒預加載的話，這兩個事件也會觸發(fā)，但不會在播放楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 23/27 頁 23 前發(fā)生）。/ input id=fullScreenSizeButtonID type=button value= 全 屏 播 放 區(qū) 域 onclick=enlargeFullScreenAreaSize()。 } /script /head body div video src= id=videoTagID/video br input id=playOrPauseButtonID type=button value= 播放音頻文件 onclick=playOrPauseVideo()。 ()。 ()。 ()。)。 } } function enlargeFullScreenAreaSize() { var videoTagObject = (39。 currentSize=1。 case 2: =擴大播放區(qū)域 。 currentSize=2。 switch(currentSize){ case 1: =恢復為正常尺寸 。enlargeOrNormalSizeButtonID39。)。 function enlargeOrNormalAreaSize() { var videoTagObject = (39。 ()。 ()。)。 var playOrPauseButtonTagObject = (39。videoTagID39。 height:30px。 height:30px。 height:30px。/ /div /body /html 在 IE9 中的執(zhí)行結果 在 Google Chrome 瀏覽器中的執(zhí)行結果 應用 JavaScript 實現(xiàn)在線控制視頻和音頻的代碼示例 代碼示例 !DOCTYPE html html 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 19/27 頁 19 head meta equiv=ContentType content=text/html。/ input id=pausePlayButtonID type=button value= 暫停音頻文件 onclick=pausePlayAudio()。 /** 識別目前是否已經處于暫停狀態(tài)，如果已經為暫停，則開始第 2 次重復播放設置 */ if(){ 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 18/27 頁 18 ()。 /** 識別目前是否已經處于 暫停狀態(tài)，如果已經為暫停，則不需要再重復設置 */ if(!){ ()。 /**將媒體文件設置為創(chuàng)建后自動播放，因此不再需要 ()。 //數(shù)據(jù)源 =true。 (audioTagObject)。 */ audioTagObject = (audio)。 /** 識別是否已經創(chuàng)建出了 audio標簽對象，如果已經創(chuàng)建則不再重復地創(chuàng)建 */ if(audioTagObject==null){ /** 也可以將下面的 audioTagObject = (audio)。 var audioTagObject。 height:30px。 height:30px。 height:30px。 lineheight:20px。 charset=gb18030 title編程控制 HTML5 的音頻示例頁面 /title style type=text/css audioSourceInputTagID{ width:150px。通過“ !!”將結果轉換為布爾值。).canPlayType)。 編程動態(tài)創(chuàng)建和控制 HTML5 的音頻示例 通過腳本進行兼容性檢測 var hasVideo=!!((39。 除了這些之外， video標簽還有一個 audio標簽所不支持的特性：抓取圖像幀。 （ 2） width、 height 可以設置或者獲得視頻播放的屏幕區(qū)域的寬和高等尺寸信息。 video比 audio標簽增加有如下的成員屬性 （ 1） poster 在視頻加載完成之前，代表視頻內容圖片 URL 地址。 （ 8） src 返回當前的媒體文件資源的 URL 地址或設置當前媒體文件資源的 URL （ 9） default