通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5中的視頻和音頻標(biāo)簽及應(yīng)用實例-閱讀頁
2024-12-04 07:40本頁面
【正文】 工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/27 頁 17 語句改變?yōu)槿缦? 的形式： audioTagObject = new Video()。 =audioTagID。 } /** 對所創(chuàng)建出的 audio標(biāo)簽對象設(shè)置相關(guān)的播放屬性，顯示播放按鈕和自動播放音頻 */ = 。 =true。*/ } /**音頻暫停事件 */ function pausePlayAudio() { var audioTagObject = (audioTagID)。 } } /**音頻繼續(xù)事件 */ function goOnPlayAudio() { var audioTagObject = (audioTagID)。 } } /script /head body div input type=text id=audioSourceInputTagID value= / input id=startPlayButtonID type=button value= 加載音頻文件 onclick=loadAndPlayAudio()。/ input id=goOnPlayButtonID type=button value= 繼續(xù)音頻文件 onclick=goOnPlayAudio()。 charset=gb18030 title應(yīng)用 JavaScript 實現(xiàn)在線控制視頻和音頻的代碼示例 /title style type=text/css playOrPauseButtonID{ width:100px。 } enlargeOrNormalSizeButtonID{ width:120px。 } fullScreenSizeButtonID{ width:120px。 } /style script type=text/javascript function playOrPauseVideo() { var videoTagObject = (39。)。playOrPauseButtonID39。 if (){ =暫停音頻文件 。 } else{ =播放音頻文件 。 } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 20/27 頁 20 } var currentSize=1。videoTagID39。 var enlargeOrNormalSizeButtonTagObject = (39。)。 = ( * 2 ) 。 break。 = ( * 1 ) 。 break。videoTagID39。 /** 在 和 Chrome 15 瀏覽器中 ()。 而在 Firefox 瀏覽器中 ()。 W3C 的提議 ()。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 21/27 頁 21 */ ()。/ input id=enlargeOrNormalSizeButtonID type=button value= 擴大 播放區(qū) 域 onclick=enlargeOrNormalAreaSize()。/ /div /body /html 在 IE9 中的執(zhí)行結(jié)果 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 22/27 頁 22 在 IE9 中不支持全屏控制，在 Google Chrome 瀏覽器中的執(zhí)行結(jié)果 與播放過程相關(guān)的典型事件名稱及含義 （ 1） loadstart 客戶端開始請求數(shù)據(jù)并讓瀏覽器尋找所要播放的媒體資源，但并不意味著就會馬上加載相關(guān)的媒體資源數(shù)據(jù)，則要看對 preload 屬性的設(shè)置狀態(tài)： ? 如果將 preload（預(yù)裝載的方式）成員屬性設(shè)置為“ none”的話，則“ loadstart”事件就是唯一在播放視頻前觸發(fā)的事件。 （ 2） progress 客戶端正在請求數(shù)據(jù)，數(shù)據(jù)正在下載到客戶端的瀏覽器中時觸發(fā)并直到整個媒體文件下載完畢。 （ 4） abort 客戶端主動終止下載（不是因為錯誤引起）。 （ 6） stalled 網(wǎng)速失速。 （ 8） pause pause()觸發(fā)。但要注意的是，此時只是表明瀏覽器僅僅已經(jīng)加載了媒體文件的元數(shù)據(jù)信息而已。 （ 10） loadeddata 視頻播放器第 一次完成了當(dāng)前播放位置的視頻渲染。 （ 12） playing 真正處于播放的狀態(tài)，這個時候我們才是真正的在觀看視頻。不過只是表示預(yù)期可以正常播放，不保證之后的播放不會出現(xiàn)緩沖等待。 但要注意的是，這個只是播放器根據(jù)網(wǎng)速和播放進度的預(yù)期估計，不代表后面的數(shù)據(jù)全部都預(yù)先緩沖完畢了，如果你手動推動控制欄的進度條，可能仍然會出現(xiàn)緩沖的，或者你后面網(wǎng)絡(luò)斷開了，一樣沒辦法繼續(xù)播放，除非是真的緩沖完了。 （ 16） seeked 尋找完畢。 （ 18） ended 該事件是在媒體播放完畢到達最后 的時候觸發(fā)，而－無論是正常情況下的結(jié)束或是用戶自己拖動播放進度條到媒體文件的最后結(jié)束位置。 （ 19） ratechange 播放速率改變。 （ 21） volumechange 音量改變。 charset=gb18030 titlevideo 標(biāo)簽的播放狀態(tài)事件示例 /title script type=text/javascript var videoTagObject。 if(){ // Mozilla, Netscape, Firefox //監(jiān)聽視頻播放結(jié)束事件 (39。,playEndEventResponse, false)。timeupdate39。 // 監(jiān)聽視頻播放過程中的發(fā)生錯誤事件 (39。,playErrorEventResponse, false)。onended39。 (39。,timeUpdateEventResponse)。onerror39。 } } function timeUpdateEventResponse(){ var timeDisplay = (time)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 26/27 頁 26 } function playErrorEventResponse(){ switch (){ //錯誤代碼的含義： 無效 case : alert(視頻的下載過程被中止。 break。 )。 case : alert(解碼過程中出現(xiàn)了錯誤，導(dǎo)致解碼失敗。 break。 )。 default: alert(發(fā)生未知錯誤。 } } function playEndEventResponse(){ (播放過程結(jié)束。 } function startPlay(){ // 播放視頻 ()。 } /script 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 27/27 頁 27 /head body onload=initVideoTagEvent() video id=videoTagID src= controls /videobr /span id=time/span button onclick=startPlay()開始播放 /button button onclick=pausePlay()暫停播放 /button /body /html 執(zhí)行的結(jié)果 在播放完成后將彈出“播放過程結(jié)束”的提示信息對話框
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1