HTML5 Audio/Video 匯總?。?!

在HTML5中的音視頻標(biāo)簽的屬性也不是很多,w3school有很詳細(xì)的講解。
主要是在JS中我們應(yīng)該如何去控制音視頻的狀態(tài)。以下屬性和方法相信大家都會(huì)用的到。

<audio> 標(biāo)簽屬性:

<ul><li>src:音樂的URL
<li>preload:預(yù)加載
<li>autoplay:自動(dòng)播放
<li>loop:循環(huán)播放
<li>controls:瀏覽器自帶的控制條
</ul>

<video> 標(biāo)簽屬性:

<ul><li>src:視頻的URL
<li>poster:視頻封面,沒有播放時(shí)顯示的圖片
<li>preload:預(yù)加載
<li>autoplay:自動(dòng)播放
<li>loop:循環(huán)播放
<li>controls:瀏覽器自帶的控制條
<li>width:視頻寬度
<li>height:視頻高度
</ul>

獲取HTMLMediaElements對(duì)象

<ol>
<li>var media = new Audio(http://www.test.com/test.mp3);
<li>var media = document.getElementsbyId("media");(引號(hào)內(nèi)的media是你音視頻標(biāo)簽的id值)
</ol>

瀏覽器兼容影音格式

瀏覽器、影音格式 Ogg Theora MP4(H.264) WebM
Microsoft Internet Explorer9 × ×
Mozilla Firefox5+ ×
Google Chrome13+
Apple Safari5+ × ×
Opera11+" ×

重點(diǎn)來了?。。?以下JS部分有需要收藏的趕緊拿走~<code>

<ol><li>//錯(cuò)誤狀態(tài)
<li> Media.error; //null:正常
<li> Media.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯(cuò)誤 3.解碼錯(cuò)誤 4.URL無效
<li>//網(wǎng)絡(luò)狀態(tài)
<li> Media.currentSrc; //返回當(dāng)前資源的URL
<li> Media.src = value; //返回或設(shè)置當(dāng)前資源的URL
<li> Media.canPlayType(type); //是否能播放某種格式的資源
<li> Media.networkState; //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源
<li> Media.load(); //重新加載src指定的資源
<li> Media.buffered; //返回已緩沖區(qū)域,TimeRanges
<li> Media.preload; //none:不預(yù)載 metadata:預(yù)載資源信息 auto:

<li>//準(zhǔn)備狀態(tài)
<li> Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
<li> Media.seeking; //是否正在seeking

<li>//回放狀態(tài)
<li> Media.currentTime = value; //當(dāng)前播放的位置,賦值可改變位置
<li> Media.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0
<li> Media.duration; //當(dāng)前資源長(zhǎng)度 流返回?zé)o限
<li> Media.paused; //是否暫停
<li> Media.defaultPlaybackRate = value;//默認(rèn)的回放速度,可以設(shè)置
<li> Media.playbackRate = value;//當(dāng)前播放速度,設(shè)置后馬上改變
<li> Media.played; //返回已經(jīng)播放的區(qū)域,TimeRanges,關(guān)于此對(duì)象見下文
<li> Media.seekable; //返回可以seek的區(qū)域 TimeRanges
<li> Media.ended; //是否結(jié)束
<li> Media.autoPlay; //是否自動(dòng)播放
<li> Media.loop; //是否循環(huán)播放
<li> Media.play(); //播放
<li> Media.pause(); //暫停
<li>//控制
<li> Media.controls;//是否有默認(rèn)控制條
<li> Media.volume = value; //音量
<li> Media.muted = value; //靜音
<li> //TimeRanges(區(qū)域)對(duì)象
<li> TimeRanges.length; //區(qū)域段數(shù)
<li> TimeRanges.start(index) //第index段區(qū)域的開始位置
<li> TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置
</ol>

以下轉(zhuǎn)自http://www.cnblogs.com/luckk/p/5239991.html,歡迎大家探討交流

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容