HTML5的Audio/Video標簽,屬性,方法,事件實例分析

本文小編為大家詳細介紹“HTML5的Audio/Video標簽,屬性,方法,事件實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML5的Audio/Video標簽,屬性,方法,事件實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

<audio> 標簽屬性：

src：音樂的URL

preload：預加載

autoplay：自動播放

loop：循環播放

controls：瀏覽器自帶的控制條

Html代碼 

<audio id=”media” src=”http://www.abc.com/test.mp3&Prime; controls></audio>  

<video> 標簽屬性：

src：視頻的URL

poster：視頻封面，沒有播放時顯示的圖片

preload：預加載

autoplay：自動播放

loop：循環播放

controls：瀏覽器自帶的控制條

width：視頻寬度

height：視頻高度

Html代碼 

<video id=”media” src=”http://www.abc.com/test.mp4&Prime; controls width=”400px” heigt=”400px”></video>  

獲取HTMLVideoElement和HTMLAudioElement對象

Js代碼 

//audio可以直接通過new創建對象  

Media = new Audio(“http://www.abc.com/test.mp3&Prime;);  

//audio和video都可以通過標簽獲取對象  

Media = document.getElementByIdx_x(“media”);  

Media方法和屬性：

HTMLVideoElement 和 HTMLAudioElement 均繼承自 HTMLMediaElement

Js代碼 

//錯誤狀態  

   Media.error; //null:正常  

   Media.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效  

//網絡狀態  

   Media.currentSrc; //返回當前資源的URL  

   Media.src = value; //返回或設置當前資源的URL  

   Media.canPlayType(type); //是否能播放某種格式的資源  

   Media.networkState; //0.此元素未初始化  1.正常但沒有使用網絡  2.正在下載數據  3.沒有找到資源  

   Media.load(); //重新加載src指定的資源  

   Media.buffered; //返回已緩沖區域，TimeRanges  

   Media.preload; //none:不預載 metadata:預載資源信息 auto:  

//準備狀態  

   Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA  

   Media.seeking; //是否正在seeking  

//回放狀態  

   Media.currentTime = value; //當前播放的位置，賦值可改變位置  

   Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0  

   Media.duration; //當前資源長度 流返回無限  

   Media.paused; //是否暫停  

   Media.defaultPlaybackRate = value;//默認的回放速度，可以設置  

   Media.playbackRate = value;//當前播放速度，設置后馬上改變  

   Media.played; //返回已經播放的區域，TimeRanges，關于此對象見下文  

   Media.seekable; //返回可以seek的區域 TimeRanges  

   Media.ended; //是否結束  

   Media.autoPlay;  //是否自動播放  

   Media.loop;  //是否循環播放  

   Media.play();    //播放  

   Media.pause();   //暫停  

//控制  

   Media.controls;//是否有默認控制條  

   Media.volume = value; //音量  

   Media.muted = value; //靜音  

   //TimeRanges(區域)對象  

   TimeRanges.length; //區域段數  

   TimeRanges.start(index) //第index段區域的開始位置  

   TimeRanges.end(index) //第index段區域的結束位置  

事件：

Js代碼 

       eventTester = function(e){  

    Media.addEventListener(e,function(){  

        console.log((new Date()).getTime(),e);  

    });  

}  

eventTester(“loadstart”);   //客戶端開始請求數據  

eventTester(“progress”);    //客戶端正在請求數據  

eventTester(“suspend”);     //延遲下載  

eventTester(“abort”);       //客戶端主動終止下載（不是因為錯誤引起），  

eventTester(“error”);       //請求數據時遇到錯誤  

eventTester(“stalled”);     //網速失速  

eventTester(“play”);        //play()和autoplay開始播放時觸發  

eventTester(“pause”);       //pause()觸發  

eventTester(“loadedmetadata”);  //成功獲取資源長度  

eventTester(“loadeddata”);  //  

eventTester(“waiting”);     //等待數據，并非錯誤  

eventTester(“playing”);     //開始回放  

eventTester(“canplay”);     //可以播放，但中途可能因為加載而暫停  

eventTester(“canplaythrough”); //可以播放，歌曲全部加載完畢  

eventTester(“seeking”);     //尋找中  

eventTester(“seeked”);      //尋找完畢  

eventTester(“timeupdate”);  //播放時間改變  

eventTester(“ended”);       //播放結束  

eventTester(“ratechange”);  //播放速率改變  

eventTester(“durationchange”);  //資源長度改變  

eventTester(“volumechange”);    //音量改變  

讀到這里，這篇“HTML5的Audio/Video標簽,屬性,方法,事件實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。