亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Html5 audio標(biāo)簽樣式的修改

  發(fā)布時(shí)間：2016-01-28 15:52:52   作者：佚名   我要評(píng)論
這篇文章主要介紹了Html5標(biāo)簽audio的樣式修改 ,對(duì)html5 audio標(biāo)簽樣式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
先給大家介紹下HTML5中的新元素標(biāo)簽
src：音頻文件路徑。
autobuffer：設(shè)置是否在頁面加載時(shí)自動(dòng)緩沖音頻。
autoplay：設(shè)置音頻是否自動(dòng)播放。
loop：設(shè)置音頻是否要循環(huán)播放。
controls：屬性供添加播放、暫停和音量控件。
由于html5的流行，現(xiàn)在移動(dòng)端大多數(shù)的需求都可以使用audio來播放音頻，但您可能只是需要很簡(jiǎn)單的播放/停止效果，但不同的瀏覽器上的audio樣式卻不盡人意，所以我簡(jiǎn)單的把它進(jìn)行了封裝，效果如下:


作為技術(shù)實(shí)現(xiàn)，它的原理比較簡(jiǎn)單，就是把原生的audio隱藏，然后用div來顯示播放器的效果，然后調(diào)用它的click事件來觸發(fā)play和stop,然后是時(shí)長(zhǎng)duration,這個(gè)值有時(shí)能夠獲取，有時(shí)不行，比較坑，所以建議在audio標(biāo)簽上自定義duration屬性存放時(shí)長(zhǎng)，這時(shí)，如果組件獲取不到時(shí)會(huì)來取這個(gè)值。

復(fù)制代碼
代碼如下:

this.settings.target.on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
});

以上內(nèi)容給大家介紹了Html5 audio標(biāo)簽樣式的修改 ，希望對(duì)大家有所幫助。

相關(guān)文章

最新評(píng)論