HTML5 標籤API整理 一

2022-02-26 15:01:42 字數 3565 閱讀 5189

簡單例項:

<

audio

id="myaudio"

>

audio

>

<

script

>

varmyaudio

=document.getelementbyid(

'myaudio');

myaudio.src ='

../content/audio/海闊天空.***';

myaudio.play();

myaudio.loop

=true

; myaudio.preload

=true

; myaudio.currenttime

script

>

api說明:1.如果需要顯示快取進度,可以參考:html5 media事件

2.不能控制音訊的二進位制資料,如果需要處理二進位制音訊資料,參考html5 webaudioapi簡介(一)

唯讀屬性paused-----判斷是否已經暫停,返回true/false

error----在發生了錯誤後,返回錯誤**可控制屬性src----指定音訊的檔案位置

preload----是否預載入

controls----顯示或隱藏使用者控制介面

muted------設定是否靜音

volume ----在0.0到1.0間的音量值,或查詢當前音量值方法pause()---暫停

canplaytype(obj) ----測試飯後指定指定的mime型別的檔案

事件

loadstart ---客戶端開始請求資料

pause-----pause()方法觸發時

canplaythrough---歌曲已經載入完成

更多屬性audiotracks----返回表示可用音訊滾到的audiotracklist物件。

controller---返回表示音訊大年**控制器的mediacontroller物件。

crossorigin---設定或返回音訊的cors設定

defaultmuted---設定或返回音訊預設是否靜音

mediagroup---設定或返回音訊叔叔的美肌組合的名稱

networkstate---返回音訊的當前網路狀態

seekable---返回標識音訊可定址不煩的timeranges物件

seeking---返回使用者當前收正在音訊中進行查詢。

texttracks---返回標識文字滾到的texttracklist物件

更多方法

getstartdate()----返回新的date物件,表示當前時間線偏移量。

addtexttrack()----想音訊新增新的文字軌道。

更多參考:

例項1:

<

style

>

#volumeslider .slider-selection

style

>

<

div

class

="container"

>

<

p>../content/audio/海闊天空.***

p>

<

button

class

="btn btn-primary"

id="playbtn"

>

<

i class

="glyphicon glyphicon-play"

>

i>

button

>

<

button

class

="btn btn-info"

id="mutedbtn"

>

<

i class

="glyphicon glyphicon-volume-down"

>

i>

button

>

<

button

class

="btn btn-danger"

id="changebtn"

>切換歌曲

button

>

<

div

class

="form-group"

>

<

label

class

="control-label"

>音量:

label

>

<

input

class

="form-control"

id="volume"

data-slider-id

="volumeslider"

data-slider-min

="0"

data-slider-max

="100"

data-slider-step

="1"

/>

div>

div>

<

audio

id="myaudio"

>

audio

>

js**:

var currentfile = '../content/audio/海闊天空.***';

//判斷瀏覽器是否支援audio

if (!window.htmlaudioelement)

else

myaudio.play();

icon.removeclass('glyphicon-play').addclass('glyphicon-pause');

} else

});//

靜音按鈕

$('#mutedbtn').click(function

() );

//音量按鈕

$('#volume').slider().on('change', function

(e) );

$('#changebtn').click(function

() );

//監聽事件

myaudio.oncanplay = function

() myaudio.onplay = function

() myaudio.onpause = function

() myaudio.onprogress = function

() myaudio.ontimeupdate = function

(e)

}

顯示結果:

HTML5 標籤API整理 一

簡單例項 audio id myaudio audio script varmyaudio document.getelementbyid myaudio myaudio.src content audio 海闊天空.myaudio.play myaudio.loop true myaudio.pr...

HTML5標籤整理一

標籤定義超連結,用於從乙個頁面鏈結到另乙個頁面。元素最重要的屬性是 href 屬性,它指定鏈結的目標。在所有瀏覽器中,鏈結的預設外觀是 屬性值描述 charset char encoding html 5 中不支援。coords coordinates html 5 中不支援。href url鏈結的...

HTML5標籤整理三

標籤定義聲音,比如 或其他音訊流。一段簡單的 html 5 音訊 您的瀏覽器不支援 audio 標籤。可以在開始標籤和結束標籤之間放置文字內容,這樣老的瀏覽器就可以顯示出不支援該標籤的資訊。屬性值描述 autoplay autoplay controls controls loop loop pre...