H5新特性-視頻,音頻和HTMLMediaElement

（1）瀏覽器支持的視頻格式：　

瀏覽器	MP4	WebM	Ogg
IE9+	+	-	-
Chrome	+	+	+
Firefox	-	+	+
Safari	+	-	-
Opera	-	+	+

標簽：

// 簡寫
<video src="url"  width="寬" height="高">
      視頻格式不支持
</video>

// 標准方式
<video src="url" width="寬" height="高">
　　<source src="視頻url地址"/>

　　<source src="視頻url地址"/>

　　...
　　視頻格式不支持 
</video>

 屬性

（1）autoplay：是否自動播放，布爾值（與muted屬性一起用）

（2）muted：是否靜音播放，布爾值

（3）controls：控制是否顯示視頻的控制按鈕

（4）poster：海報圖片URL（與autoplay沖突，需去掉autoplay）

（5）preload：預載入　

　　　　none  不緩存

　　　　metadata  播放前只加載視頻的時長，寬度，高度等信息

　　　　auto  默認值，瀏覽器盡可能的下載視頻

 

（2）音頻

瀏覽器支持的音頻格式：

瀏覽器	MP3	WAV	Ogg
IE	+	-	-
Chrome	+	+	+
Firefox	-	+	+
Safari	+	+	-
Opera	-	+	+

//簡寫
<audio src="url">
　　瀏覽器不支持的音頻格式
</audio>

//標准
<audio>

</audio>

 屬性：同video（無poster）

 

（3）HTMLMediaElement

HTMLMediaElement  提供對於web頁面中的音頻和視頻通過JavaScript處理的能力。

HTMLAudioElement  音頻處理

HTMLVideoElement  視頻處理

在通過JavaScript對於音頻/視頻進行控制時，首先要通過JavaScript先行獲取到該音頻/視頻對象，然后 再進行相關的控制操作，如：

autoplay

autoplay屬性用於控制多媒體（指音頻和視頻 ）是否自動播放，其語法結構是

//獲取多媒體對象的autoplay屬性
variable = HTMLMediaElement.autoplay
//設置
HTMLMediaElement.autoplay = bool value

 

volume

volume屬性用於獲取/設置媒體的音量，其值從0.0（表示靜音）~1.0（表示最大音量）, 其語法結構是：

//獲取
variable = HTMLMediaElement.volume
//設置
HTMLMediaElement.volume = double value

 

paused

paused屬性用於獲取媒體對象是否正在暫停，其語法結構是：

boolean HTMLElement.paused

 

playbackRate

playbackRate屬性用於獲取/設置媒體的播放速度，1.0表示正常的播放速度；如果值小於1.0，則表示     比正常速度慢，否則將正常速度快，其語法結構是：

//獲取
variable = HTMLMediaElement.playbackRate

//設置
HTMLMediaElement.playbackRate = double value

 

duration

variable = HTMLMediaElemet.duration

duration屬性用於獲取媒體的總長度時間，單位為秒，其語法結構是：

如果媒體不可用，返回值為0

如果媒體可用，但時間長度未知，返回值為NaN

如果媒體以stream(數據流)形式傳輸並且沒有預定長度時，返回Inf

 

currentTime

currentTime屬性用於獲取/設置媒體當前播放時間，單位為秒，其語法結構是：

//獲取媒體當前播放時間
variable = HTMLMediaElement.currentTime
//設置媒體當前播放時間
HTMLMediaElement.currentTime = double value

 

src

src屬性用於獲取/設置媒體對象的URL地址，其語法結構是：

 

//設置
HTMLMediaElement.src = string value
//獲取
variable = HTMLMediaElement.src

 

 

 

 

 

（3.1） 方法

play()

play()方法於實現媒體的播放，其語法結構是：

HTMLMediaElement.play()

 

pause()

pause()方法用於實現媒體的暫停，其語法結構同play()方法

 

（3.2）事件

play() 

在媒體播放時觸發，其語法結構：

HTMLMediaElement.addEventListener('play',function(){
　　...
})

 pause()

在媒體暫停時觸發：

HTMLMediaElement.addEventListener('pause',function(){
　　...
})

canplaythrough()

在媒體的readyState變成can_play_through時觸發，語法結構：

HTMLMediaElement.addEventListener('canplaythrough',function(){
　　...
})

 timeupdate()

在媒體元素的currentTime屬性發生變化的時候觸發（實時顯示當前播放事件）

HTMLMediaElement.addEventListener('timeupdate',function(){
　　...
})