【正文】 src= controls autoplay width=300 height=210/video audio src= controls autoplay /audio /body /html 示例執(zhí)行的結(jié)果 因此，在 HTML5 播放視頻和音頻的標(biāo)簽定義非常簡潔和可讀性。 （ 2）提供了一組標(biāo)準(zhǔn) JavaScript API 控制播放過程 使用 HTML5 對視頻和音頻處理技術(shù)支持的優(yōu)勢 （ 1）主要的優(yōu)點(diǎn) 瀏覽器自帶，因而無需安裝；更容易通過 JavaScript 腳本來控制和播放內(nèi)容。 ? Height：設(shè)置視頻播放器的高度。如果使用 autoplay 屬性，則該屬性忽略。 ? Poster：該屬性用于指定一張圖片，在當(dāng)前視頻數(shù)據(jù)無效時(shí)顯示，從而達(dá)到預(yù)覽圖的效果。因此，應(yīng)用此 source子標(biāo)簽還能夠用于兼容不同的瀏覽器的播放。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 9/27 頁 9 ? type：定義播放器在音頻流中的什么位置開始播放，默認(rèn)從開頭播放。 charset=gb18030 titleHTML5 的視頻示例頁面 /title /head body p video src= controls autoplay 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 10/27 頁 10 divp本視頻為 MP4 格式，可以在 IE IE10 和 Google Chrome 瀏覽 器下正確工作 /p /div /video /p /body /html （ 2）示例頁面中的各個(gè)標(biāo)簽的說明 頁面中的視頻使用 src 屬性從外部 Web 站點(diǎn)加載該視頻，其中的 controls 屬性指示瀏覽器顯示瀏覽器的視頻播放標(biāo)準(zhǔn)控件，而 autoplay 屬性指示瀏覽器開始自動(dòng)播放視頻。 （ 4）本示例在 Google 的 Chrome 瀏覽器中的執(zhí)行結(jié)果 全屏播放按鈕 播放 /暫停按鈕 播 放進(jìn)度條 音量控制條，但由于視頻沒有聲音，因此不顯示出。 在實(shí)際應(yīng)用中需要考慮的相關(guān)問題 兼容各個(gè)主流的瀏覽器的方法 （ 1）兼容新版的各個(gè)主流的瀏覽器的方法 為了能夠?qū)崿F(xiàn)在主流的瀏覽器中顯示，一般需創(chuàng)建三種視頻格式以實(shí)現(xiàn)對 Firefox、Safari/Chrome 和 IE 等瀏覽器的支持。 video autoplay controls source src= type=video/mp4 source src= type=video/webm a href=如果不能在線播放本視頻，可以點(diǎn)擊下載離線播放 /a /video ? 方法之二：添加對 Flash Player 插件的支持，由相關(guān)的 Flash Player 插件實(shí)現(xiàn)在線播放。 全屏播放和自適應(yīng)屏幕的長寬比 （ 1）全 屏播放 全屏播放能夠提升視覺體驗(yàn)并增加觀看者的參與感，在許多的桌面瀏覽器中都使用了內(nèi)置的控制機(jī)制實(shí)現(xiàn)全屏播放。 W3C 最近正在開發(fā)一個(gè)全屏 API 標(biāo)準(zhǔn)。 （ 2）自適應(yīng)屏幕的長寬比 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/27 頁 13 顯示器的長寬比與視頻元素的大小通常并不匹配，因此如何控制視頻在屏幕上的布局至關(guān)重要。 視頻和音頻的常用控制的 JavaScript 函數(shù) （ 1） load() 通常不必調(diào)用，除非是動(dòng)態(tài)生成的元素，用來在播放前預(yù)加載或者重新加載由 src 屬性所指定的資源。 var supportsFoolVideo=!!((39。))。 （ 4） startTime 返回最早的播放時(shí)間，一般是 ，除非是緩沖過的媒體文件，并且一部分內(nèi)容已經(jīng)不再緩沖區(qū)，則不為 0。 （ 8） seeking 是否正在 seeking?；蛘卟樵儭? （ 5） volume 從 到 之間設(shè)置音量大小，或者查詢返回當(dāng)前的音量大小。 （ 10） playbackRate 當(dāng)前播放速度，如果重新設(shè)置，則馬上改變。 （ 3） videoWidth、 videoHeight 返回視頻的固有或自適應(yīng)寬度和高度，此屬性為只讀屬性。vedio39。 示例頁面 !DOCTYPE HTML html head meta equiv=ContentType content=text/html。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 16/27 頁 16 } startPlayButtonID{ width:100px。 } goOnPlayButtonID{ width:100px。 /** 獲得所創(chuàng)建的 audio標(biāo)簽對象 */ audioTagObject = (audioTagID)。 =audioTagID。 =true。 } } /**音頻繼續(xù)事件 */ function goOnPlayAudio() { var audioTagObject = (audioTagID)。/ input id=goOnPlayButtonID type=button value= 繼續(xù)音頻文件 onclick=goOnPlayAudio()。 } enlargeOrNormalSizeButtonID{ width:120px。 } /style script type=text/javascript function playOrPauseVideo() { var videoTagObject = (39。playOrPauseButtonID39。 } else{ =播放音頻文件 。videoTagID39。)。 break。 break。 /** 在 和 Chrome 15 瀏覽器中 ()。 W3C 的提議 ()。/ input id=enlargeOrNormalSizeButtonID type=button value= 擴(kuò)大 播放區(qū) 域 onclick=enlargeOrNormalAreaSize()。 （ 2） progress 客戶端正在請求數(shù)據(jù)，數(shù)據(jù)正在下載到客戶端的瀏覽器中時(shí)觸發(fā)并直到整個(gè)媒體文件下載完畢。 （ 6） stalled 網(wǎng)速失速。但要注意的是，此時(shí)只是表明瀏覽器僅僅已經(jīng)加載了媒體文件的元數(shù)據(jù)信息而已。 （ 12） playing 真正處于播放的狀態(tài)，這個(gè)時(shí)候我們才是真正的在觀看視頻。 但要注意的是，這個(gè)只是播放器根據(jù)網(wǎng)速和播放進(jìn)度的預(yù)期估計(jì)，不代表后面的數(shù)據(jù)全部都預(yù)先緩沖完畢了，如果你手動(dòng)推動(dòng)控制欄的進(jìn)度條，可能仍然會出現(xiàn)緩沖的，或者你后面網(wǎng)絡(luò)斷開了，一樣沒辦法繼續(xù)播放，除非是真的緩沖完了。 （ 18） ended 該事件是在媒體播放完畢到達(dá)最后 的時(shí)候觸發(fā)，而－無論是正常情況下的結(jié)束或是用戶自己拖動(dòng)播放進(jìn)度條到媒體文件的最后結(jié)束位置。 （ 21） volumechange 音量改變。 if(){ // Mozilla, Netscape, Firefox //監(jiān)聽視頻播放結(jié)束事件 (39。timeupdate39。,playErrorEventResponse, false)。 (39。onerror39。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 26/27 頁 26 } function playErrorEventResponse(){ switch (){ //錯(cuò)誤代碼的含義： 無效 case : alert(視頻的下載過程被中止。 )。 break。 default: alert(發(fā)生未知錯(cuò)誤。 } function startPlay(){ // 播放視頻 ()