HTML5程序設(shè)計-播放多媒體_第1頁
HTML5程序設(shè)計-播放多媒體_第2頁
HTML5程序設(shè)計-播放多媒體_第3頁
HTML5程序設(shè)計-播放多媒體_第4頁
HTML5程序設(shè)計-播放多媒體_第5頁
已閱讀5頁，還剩52頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第八章播放多媒體課程描述在HTML五之前,要在網(wǎng)頁播放多媒體,需要借助于flash插件。瀏覽器需要安裝flash插件才能播放多媒體。使用HTML五提供地新標簽<audio>與<video>可以很方便地在網(wǎng)頁播放音頻與視頻。本章知識點八.一HTML五音頻八.２HTML五視頻八.一HTML五音頻八.一.一audio標簽八.一.二播放背景音樂八.一.三設(shè)置替換音頻源八.一.四使用JavaScript語言訪問audio對象八.一.一audio標簽在HTML五,可以使用audio標簽定義一個音頻播放器,語法如下:<audiosrc="音頻文件">…</audio>src屬用于指定音頻文件地url。audio標簽支持地音頻文件類型包括.wav,.mp三與.ogg等。<audio>與之間地字符串</audio>指定當瀏覽器不支持audio標簽時顯示地字符串。例八-一<html><head><title>使用audio標簽播放音頻</title></head><body><h一>Audio標簽地例子</h一><audiosrc="music.wav"controls>您地瀏覽器不支持audio標簽。</audio></body></html>在GoogleChrome瀏覽例八-一所述地網(wǎng)頁提示不同瀏覽器地音頻播放器控件地外觀也不盡相同InterExplorer八及其之前版本不支持audio標簽。除了src與controls外audio標簽還包括地主要屬屬值具體描述autoplayTrue或false如果是true,則音頻在就緒后馬上播放end數(shù)值定義播放器在音頻流地何處停止播放。默認會播放到結(jié)尾loopTrue或false如果是true,則音頻會循環(huán)播放loopend數(shù)值定義在音頻流循環(huán)播放停止地位置,默認為end屬地值loopstart數(shù)值定義在音頻流循環(huán)播放地開始位置。默認為start屬地值playcount數(shù)值定義音頻片斷播放多少次。默認為一start數(shù)值定義播放器在音頻流開始播放地位置。默認從開頭播放八.一.二播放背景音樂播放背景音樂時通常不需要顯示播放控件,因此在定義audio標簽時可以將controls屬設(shè)置為false（或不使用conttols屬）。播放背景音樂時需要自動,循環(huán)播放,因此在定義audio標簽時可以將autoplay屬與loop屬設(shè)置為true。例八-二在HTML文件定義一個audio標簽,用于播放背景音樂music.wav,代碼如下:<html><head><title>使用audio標簽播放背景音樂</title></head><body><h一>播放背景音樂地例子</h一><audiosrc="music.wav"autoplayloop>您地瀏覽器不支持audio標簽。</audio></body></html>八.一.三設(shè)置替換音頻源在audio標簽,可以使用source標簽指定多個要播放地音頻文件。語法如下:<audio><sourcesrc="音頻文件一"><sourcesrc="音頻文件二"><sourcesrc="音頻文件三">……</audio>二．effectAllowed屬取值說明copy允許執(zhí)行復(fù)制操作link將源對象鏈接到目地地move將源對象移動到目地地copyLink可以是copy或link,取決于目地對象地缺省值copyMove可以是copy或move,取決于目地對象地缺省值linkMove可以是link或move,取決于目地對象地缺省值all允許所有數(shù)據(jù)傳輸操作none沒有數(shù)據(jù)傳輸操作,即放開（drop）是不執(zhí)行任何操作uninitialized默認值,表明沒有為effectAllowed屬設(shè)置值,執(zhí)行缺省地拖放操作例八-三改例八-二,增加替換音頻源music.mp三,代碼如下:<html><head><title>使用audio標簽播放音頻</title></head><body><h一>Audio標簽地例子</h一><audiosrc="music.wav"controls><sourcesrc="music.wav"><sourcesrc="music.mp三">您地瀏覽器不支持audio標簽。</audio></body></html>八.一.四使用JavaScript語言訪問audio對象一．檢測瀏覽器是否支持audio標簽二．在JavaScript程序獲得audio對象三．a(chǎn)udio對象地屬四．a(chǎn)udio對象地方法五．a(chǎn)udio對象地一．檢測瀏覽器是否支持audio標簽可以通過window.HTMLAudioElement屬判斷瀏覽器是否支持audio標簽。如果window.HTMLAudioElement等于true,則表示瀏覽器支持audio標簽,否則表示不支持。例八-四在網(wǎng)頁定義一個按鈕,單擊此按鈕時,會檢測瀏覽器是否支持audio標簽。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測瀏覽器是否支持audio標簽</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)地定義代碼如下:<scripttype="text/javascript">functioncheck(){if(window.HTMLAudioElement){alert("您地瀏覽器支持audio標簽。");}else{alert("您地瀏覽器不支持audio標簽。");}}</script>二．在JavaScript程序獲得audio對象在JavaScript程序有下面二種方法可以獲得audio對象。（一）使用new關(guān)鍵字創(chuàng)建audio對象,例如:media=newAudio("music.wav");（二）首先在HTML網(wǎng)頁定義一個Audio標簽,然后調(diào)用document.getElementById()函數(shù)獲取對應(yīng)地audio對象。例如定義Audio標簽地代碼如下:<audioid="audio一"src="music.wav"autoplayloop>您地瀏覽器不支持audio標簽。</audio>獲取對應(yīng)audio對象地代碼如下:varmedia=document.getElementById('audio一');三．a(chǎn)udio對象地屬audio對象地常用屬如表八-二所示。屬具體描述currentTime設(shè)置或返回音頻文件開始播放地位置,返回值以"秒"為單位duration返回播放音頻地長度src音頻文件地urlvolume設(shè)置或返回音頻文件地音量workState當前地網(wǎng)絡(luò)狀態(tài)。零表示尚未初始化,一表示正常但沒有使用網(wǎng)絡(luò),二表示正在下載數(shù)據(jù),三表示沒有找到資源paused是否暫停ended是否結(jié)束autoPlay是否自動播放loop是否循環(huán)播放controls是否顯示默認控制條muted是否靜音例八-五演示currentTime屬地使用在網(wǎng)頁定義一個audio標簽,代碼如下:<audioid="audio一"src="music.wav"controls>您地瀏覽器不支持audio標簽。</audio>定義一個"快"按鈕,定義按鈕地代碼如下:<buttonid="foward"onclick="foward();">快</button>單擊按鈕foward將調(diào)用foward()函數(shù)。foward()函數(shù)地定義代碼如下:<scripttype="text/javascript">functionfoward(){if(window.HTMLAudioElement){varmedia=document.getElementById('audio一');media.currentTime+=一;}}</script>例八-六在網(wǎng)頁定義一個按鈕,單擊此按鈕時,會播放music.wav。定義按鈕地代碼如下:<buttonid="play"onclick="playAudio();">播放</button>單擊按鈕play將調(diào)用playAudio()函數(shù)。playAudio()函數(shù)地定義代碼如下:<scripttype="text/javascript">functionplayAudio(){if(window.HTMLAudioElement){media=newAudio("music.wav");media.controls=false;media.play();}}</script>例八-七改例八-六,播放音頻后,將"播放"按鈕改為"暫停"按鈕,單擊"暫停"按鈕后,暫停播放,并將按鈕改為"播放"按鈕。因為要對同一個音頻行播放與暫停二種操作,所以不能像例八-六那樣在每次操作時創(chuàng)建audio對象,需要在網(wǎng)頁定義一個音頻播放器,代碼如下:<audioid="audio一"src="music.wav">您地瀏覽器不支持audio標簽。</audio>定義"播放／暫停"按鈕地代碼如下:<buttonid="play"onclick="playAudio();">播放</button>playAudio()函數(shù)<scripttype="text/javascript">functionplayAudio(){if(window.HTMLAudioElement){varmedia=document.getElementById('audio一'); varbtn=document.getElementById('play');if(media.paused){media.play();btn.textContent="暫停";}else{media.pause();btn.textContent="播放";}}}</script>五．a(chǎn)udio對象地方法具體描述loadstart開始申請數(shù)據(jù)progress正在申請數(shù)據(jù)suspend延遲下載play播放時觸發(fā)pause暫停時觸發(fā)ended播放結(jié)束volumechange改變音量例八-八改例八-七,當播放完音頻后,將按鈕標題改為"播放"。在playAudio()函數(shù)添加如下代碼:media.addEventListener("ended",playend,true);即指定media對象地ended觸發(fā)時調(diào)用playend()函數(shù)。playend()函數(shù)地定義代碼如下:functionplayend(){ varbtn=document.getElementById('play');btn.textContent="播放";}八.２HTML五視頻八.二.一video標簽八.二.一video標簽在HTML五,可以使用video標簽定義一個視頻播放器,語法如下:<videosrc="視頻文件">…</video>src屬用于指定視頻文件地url。video標簽支持地視頻文件格式包括.Ogg,MPEG四與WebM等。<video>與之間地字符串</video>指定當瀏覽器不支持video標簽時顯示地字符串。video標簽地主要屬屬值具體描述autoplayTrue或false如果是true,則視頻在就緒后馬上播放controlsTrue或false如果是true,則向用戶顯示視頻播放器控件,比如播放按鈕end數(shù)值定義播放器在視頻流地何處停止播放。默認會播放到結(jié)尾height數(shù)值視頻播放器地高度,單位為像素loopTrue或false如果是true,則視頻會循環(huán)播放loopend數(shù)值定義在視頻流循環(huán)播放停止地位置,默認為end屬地值loopstart數(shù)值定義在視頻流循環(huán)播放地開始位置。默認為start屬地值playcount數(shù)值定義視頻片斷播放多少次。默認為一posterurl在視頻播放之前所顯示地圖片地URLsrcurl要播放地視頻地URLstart數(shù)值定義播放器在視頻流開始播放地位置。默認從開頭播放width數(shù)值視頻播放器地寬度,單位為像素例八-九<html><head><title>使用video標簽播放視頻</title></head><body><h一>video標簽地例子</h一><videosrc="http://ie.sogou./lab/inc/BigBuckBunny.mp四"controls>您地瀏覽器不支持video標簽。</video></body></html>在GoogleChrome瀏覽例八-九所述地網(wǎng)頁提示不同瀏覽器地音頻播放器控件地外觀也不盡相同InterExplorer八及其之前版本不支持audio標簽。使用source標簽指定多個要播放地視頻文件<video><sourcesrc="視頻文件一"><sourcesrc="視頻文件二"><sourcesrc="視頻文件三">……</video>例八-一零<html><head><title>使用audio標簽播放音頻</title></head><body><h一>Audio標簽地例子</h一><videocontrols="controls"><sourcesrc="http://ie.sogou./lab/inc/BigBuckBunny.mp四"type="video/mp四"/><sourcesrc="http://ie.sogou./lab/inc/BigBuckBunny.ogv"type="video/ogg"/></video></body></html>八.二.二使用JavaScript語言訪問video對象一．檢測瀏覽器是否支持video標簽二．在JavaScript程序獲得video對象三．video對象地屬四．video對象地方法五．video對象地一．檢測瀏覽器是否支持video標簽可以通過document.createElement()方法創(chuàng)建一個video對象,如果成功則表示瀏覽器支持video標簽,否則表示不支持。例八-一一在網(wǎng)頁定義一個按鈕,單擊此按鈕時,會檢測瀏覽器是否支持video標簽。定義按鈕地代碼如下:<buttonid="check"onclick="check();">檢測瀏覽器是否支持video標簽</button>單擊按鈕check將調(diào)用check()函數(shù)。check()函數(shù)地定義代碼如下:<scripttype="text/javascript">functioncheck(){if(supports_video()){alert("您地瀏覽器支持video標簽。");}else{alert("您地瀏覽器不支持video標簽。");}}</script>supports_video()函數(shù)用于檢測瀏覽器是否支持video標簽,代碼如下:function

supports_video(){return!!document.createElement('video').canPlayType;}例八-一一所述地網(wǎng)頁二．在JavaScript程序獲得video對象一般在需要HTML網(wǎng)頁定義一個video標簽,然后調(diào)用document.getElementById()函數(shù)獲取對應(yīng)地audio對象。例如定義video標簽地代碼如下:<videoid="video一"src="http://ie.sogou./lab/inc/BigBuckBunny.mp四"controls>您地瀏覽器不支持video標簽。</video>獲取對應(yīng)video對象地代碼如下:varmedia=document.getElementById('video一');三．video對象地屬屬具體描述autoplay設(shè)置或返回是否在加載完成后隨即播放音頻/視頻controls設(shè)置或返回是否顯示視頻控件currentSrc返回當前視頻地URLcurrentTime設(shè)置或返回視頻文件開始播放地位置,返回值以"秒"為單位duration返回播放音頻在某秒上地播放地長度videoHeight原始視頻地高度width視頻地寬度接上ended是否結(jié)束height視頻地高度loop是否循環(huán)播放muted是否靜音workState當前地網(wǎng)絡(luò)狀態(tài)。零表示尚未初始化,一表示正常但沒有使用網(wǎng)絡(luò),二表示正在下載數(shù)據(jù),三表示沒有找到資源paused是否暫停played是否已播放preload設(shè)置或返回視頻是否應(yīng)該在頁面加載后行加載src設(shè)置或返回視頻元素地當前來源volume設(shè)置或返回視頻文件地音量videoWidth原始視頻地寬度例八-一二演示width屬與videoWidth屬地使用在網(wǎng)頁定義一個video標簽,代碼如下:<videoid="video一"src="http://ie.sogou./lab/inc/BigBuckBunny.mp四"controls>您地瀏覽器不支持video標簽。</video>定義一個"小"按鈕,定義按鈕地代碼如下:<buttonid="MakeSmall"onclick="MakeSmall();">小</button>單擊按鈕MakeSmall將調(diào)用MakeSmall()函數(shù)。MakeSmall()函數(shù)地定義代碼如下:<scripttype="text/javascript">functionsupports_video(){return!!document.createElement('video').canPlayType;}functionMakeSmall(){if(supports_video()){varmedia=document.getElementById('video一');media.width=media.videoWidth/二;}}</script>定義一個"正常"按鈕定義按鈕地代碼如下:<buttonid="normal"onclick="MakeNormal();">正常</button>單擊按鈕normal將調(diào)用MakeNormal()函數(shù)。MakeNormal()函數(shù)地定義代碼如下:functionMakeNormal(){if(supports_video()){varmedia=document.getElementById('video一');media.width=media.videoWidth;}}定義一個"大"按鈕最后定義一個"大"按鈕,定義按鈕地代碼如下:<buttonid="Big"onclick="MakeBig();">大</button>單擊按鈕Big將調(diào)用MakeBig()函數(shù)。MakeBig()函數(shù)地定義代碼如下:functionMakeBig(){if(supports_video()){varmedia=document.getElementById('video一');media.width=media.videoWidth*二;}}例八-一二定義地網(wǎng)頁單擊"小"按鈕,會縮小視頻地大小單擊"大"按鈕,會放大視頻地大小四．video對象地方法video對象地常用方法如表八-七所示。

方法具體描述canPlayType是否能播放指定格式地資源load加載src屬指定地資源play播放pause暫停例八-一三定義一個video標簽,用于播放指定地在線mp四文件。單擊視頻畫面則播放視頻,再次單擊則會暫停播放。定義一個視頻播放器地代碼如下:<videoid="video一"src="http://ie.sogou./lab/inc/BigBuckBunny.mp四"controlsonclick="playvideo();">您地瀏覽器不支持video標簽。</video>playvideo()函數(shù)<scripttype="text/javascript">functionsupports_video(){return!!document.createElement('video').canPlayType;}functionplayvideo(){if(supports_video()){varmedia=document.getElementById('video一');if(media.paused){media.play();}else{media.pause();}}}</script>五．video對象地video對象地常用如表八-八所示。方法具體描述canplay當瀏覽器可以播放音頻/視頻時loadeddata當瀏覽器已加載視頻地當前幀時loadstart開始申請數(shù)據(jù)progress正在申請數(shù)據(jù)suspend延遲下載play播放時觸發(fā)pause暫停時觸發(fā)ended播放結(jié)束volumechange改變音量waiting當視頻由于需要緩沖下一幀而停止例八-一四在網(wǎng)頁定義二個視頻播放器,當播放視頻一時,就暫停視頻二;當暫停視頻一時,就播放視頻二。網(wǎng)頁代碼如下:<videoid="video一"src="http://ie.sogou./lab/inc/BigBuckBunny.mp四"controls>您地瀏覽器不支持video標簽。</video><videoid="video二"src="http://ie.sogou./lab/inc/BigBuckBunny.ogv"controls>您地瀏覽器不支持video標簽。</video>接上<scripttype="text/javascript">functionregister(){varmedia一=document.getElementById('video一');media一.addEventListener("play",pauseVideo二,true);media一.addEventListener("pause",playVideo二,true);}functionpauseVideo二(){varmedia二=document.getElementById('video二');media二.pause();}functionplayVideo二(){varmedia二=document.getElementById('video二');media二.play();}window.addEventListener("load",register,true);</script>八.三視頻播放插件Video.js本節(jié)介紹一個基于HTML五地視頻播放器插件Video.js。Video.js插件地使用方法很簡單,首先可以使用下面地語句在線引用video.js腳本。<scriptsrc="http://vjs.zencdn./五.八.八/video.js"></script>如果希望在IE八支持Video.js播放器,則還需要使用下面地語句引用video.js腳本<scriptsrc="http://vjs.zencdn./ie八/一.一.二/videojs-ie八.min.js"></script>然后再使用下面地語句引用樣式表文件。<

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論