HTML5中視頻音頻的使用詳解

<video id="media" src="examp.mp4" width="500" 
poster="examp1.jpg" >您的瀏覽器不支持video</video>

<video controls = “controls”>
   <source src=”1.mp4” type=”video/mp4” />  //src屬性寫到source標簽中，要指定視頻的type類型，例如MP4的即為type=“video/mp4”
   <source src = “2.ogg” type=”video/ogg” />  //ogg格式
   <source src=”3.webm” type=”video/webm” />   //webm格式
</video>

API 屬性 

• duration：返回當前音頻/視頻的長度（以秒計）
• paused：設(shè)置或返回音頻/視頻是否暫停
• currentTime：設(shè)置或返回音頻/視頻中的當前播放位置（以秒計）
• ended：返回音頻/視頻的播放是否已結(jié)束

1.4 Video API

1.4.1 Video 方法

常用方法

• play()：開始播放音頻/視頻
• pause()：暫停當前播放的音頻/視頻

1.4.2網(wǎng)絡(luò)狀態(tài)

獲取video對象

Media = document.getElementById("media");

1.Media.currentSrc; 

    返回當前資源的URL 

2.Media.src = value; 

    返回或設(shè)置當前資源的URL 

3.Media.canPlayType(type); 

    是否能播放某種格式的資源 

4.Media.networkState; 

    0.此元素未初始化 

    1.正常但沒有使用網(wǎng)絡(luò) 

    2.正在下載數(shù)據(jù) 

    3.沒有找到資源 

5.Media.load(); 

    重新加載src指定的資源 

6.Media.buffered; 

    返回已緩沖區(qū)域，TimeRanges 

7.Media.preload; 

    none:不預(yù)載 

    metadata:預(yù)載資源信息 

    auto: 

1.4.3 準備狀態(tài)

1.Media.readyState 

2.Media.seeking; 

    是否正在seeking 

1.4.4 回放狀態(tài)

1.Media.currentTime = value; 

    當前播放的位置，賦值可改變位置 

2.Media.startTime; 

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

3.Media.duration; 

    當前資源長度 流返回無限 

4.Media.paused; 

    是否暫停 

5.Media.defaultPlaybackRate = value; 

    默認的回放速度，可以設(shè)置 

6.Media.playbackRate = value; 

    當前播放速度，設(shè)置后馬上改變 

7.Media.played; 

    返回已經(jīng)播放的區(qū)域，TimeRanges，關(guān)于此對象見下文 

8.Media.seekable; 

    返回可以seek的區(qū)域 TimeRanges 

9.Media.ended; 

    是否結(jié)束 

10.Media.autoPlay; 

    是否自動播放 

11.Media.loop; 

    是否循環(huán)播放 

12.Media.play(); 

    播放 

13.Media.pause(); 

    暫停 

1.4.5 視頻控制

• Media.controls;//是否有默認控制條
• Media.volume = value; //音量
• Media.muted = value; //靜音
• TimeRanges(區(qū)域)對象
• TimeRanges.length; //區(qū)域段數(shù)
• TimeRanges.start(index) //第index段區(qū)域的開始位置
• TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置

1.4.6 相關(guān)事件

1.首先綁定事件的話可以通過js中的addEventListener方法來綁定事件 

2.常用事件 

• oncanplay：當文件就緒可以開始播放時運行的腳本（緩沖已足夠開始時）。
• ontimeupdate： 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。
• onended：當媒介已到達結(jié)尾時運行的腳本（可發(fā)送類似“感謝觀看”之類的消息）。

1.4.7 其他

1.全屏:

• element.webkitRequestFullScreen();( webkit)
• element.mozRequestFullScreen(); (Firefox )
• element.requestFullscreen(); (W3C )

2.退出全屏：

• document.webkitCancelFullScreen(); (webkit )
• document.mozCancelFullScreen(); (Firefox)
• document.exitFullscreen(); (W3C)

二、audio

2.1 audio格式

1.常見的音頻格式

    音頻編碼：ACC、MP3、Vorbis 

2.HTML5支持的音頻格式：

• Ogg 免費 支持的瀏覽器:C、F、O
• MP3 收費 支持的瀏覽器: I、C、S
• Wav 收費 支持的瀏覽器: F、O、S

2.2 audio標簽中的一些常用屬性

對于音樂格式的支持 

audio可通過new來創(chuàng)建。也可以通過用document來獲取

//通過new關(guān)鍵字來創(chuàng)建Audio對象
var Music = new Audio("test.mp3");
//通過document來獲取已經(jīng)存在的Audio對象
var Music = document.getElementById("audio");
//當然這里也可以使用document.getElementsByClassName('className')等其他的方法來獲取。

2.3 api所提供的對audio標簽操作的一些屬性和方法

2.4 常用的控制用的函數(shù)

2.5 audio標簽API中的常用事件

首先綁定事件的話可以通過js中的addEventListener方法來綁定事件  

其實video的api和audio幾乎一致。稍稍有點不同。所以基本上會了一個其他的也就都會了

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。