1. 程式人生 > 實用技巧 >H5新增——音視訊標籤

H5新增——音視訊標籤

html5標籤

<video>:Html5提供的播放視訊的標籤
	src:資源地址
	controls:該屬性定義是顯示還是隱藏使用者控制介面
	
<audio>:Html5提供的播放音訊的標籤
	src:資源地址
	controls:該屬性定義是顯示還是隱藏使用者控制介面
	
<source>
	視訊:
	type='video/webm; codecs="vp8, vorbis"'
	type='video/ogg; codecs="theora, vorbis"'
	type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
	
	音訊:
	type='audio/ogg; codecs="vorbis"'
	type='audio/aac; codecs="aac"'
	type='audio/mpeg'

video標籤的屬性

width  :視訊顯示區域的寬度,單位是CSS畫素
height :視訊展示區域的高度,單位是CSS畫素
poster :一個海報幀的URL,用於在使用者播放或者跳幀之前展示

src		  :	   要嵌到頁面的視訊的URL
controls  :  顯示或隱藏使用者控制介面
autoplay  :  媒體是否自動播放
loop  	  :  媒體是否迴圈播放
muted  	  :  是否靜音
preload   :  該屬性旨在告訴瀏覽器作者認為達到最佳的使用者體驗的方式是什麼
				none: 提示作者認為使用者不需要檢視該視訊,伺服器也想要最小化訪問流量;
					      換句話說就是提示瀏覽器該視訊不需要快取。
				metadata: 提示儘管作者認為使用者不需要檢視該視訊,
						     不過抓取元資料(比如:長度)還是很合理的。
				auto: 使用者需要這個視訊優先載入;換句話說就是提示:如果需要的話,
					     可以下載整個視訊,即使使用者並不一定會用它。
				空字串:也就代指 auto 值。

audio標籤的屬性

src		  
controls  
autoplay  
loop  	  
muted  	  
preload   

音視訊js相關屬性

duration    :  媒體總時間(只讀)
currentTime :  開始播放到現在所用的時間(可讀寫)
muted       :  是否靜音(可讀寫,相比於volume優先順序要高)
volume      :  0.0-1.0的音量相對值(可讀寫)
paused      :  媒體是否暫停(只讀)
ended       :  媒體是否播放完畢(只讀)
error       :  媒體發生錯誤的時候,返回錯誤程式碼 (只讀)
currentSrc  :  以字串的形式返回媒體地址(只讀)


視訊多的部分:
	poster  :   視訊播放前的預覽圖片(讀寫)
	width、height  :   設定視訊的尺寸(讀寫)
	videoWidth、 videoHeight  :   視訊的實際尺寸(只讀)

音視訊js相關函式

play()  :  媒體播放
pause()  :  媒體暫停
load()  :  重新載入媒體

js相關事件

視訊:
	abort	 在播放被終止時觸發,例如, 當播放中的視訊重新開始播放時會觸發這個事件。
	canplay	在媒體資料已經有足夠的資料(至少播放數幀)可供播放時觸發。這個事件對應CAN_PLAY的readyState。
	canplaythrough	在媒體的readyState變為CAN_PLAY_THROUGH時觸發,表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意:手動設定currentTime會使得firefox觸發一次canplaythrough事件,其他瀏覽器或許不會如此。
	durationchange	元資訊已載入或已改變,表明媒體的長度發生了改變。例如,在媒體已被載入足夠的長度從而得知總長度時會觸發這個事件。
	emptied	媒體被清空(初始化)時觸發。
	ended	播放結束時觸發。
	error	在發生錯誤時觸發。元素的error屬性會包含更多資訊。參閱Error handling獲得詳細資訊。
	loadeddata	媒體的第一幀已經載入完畢。
	loadedmetadata	媒體的元資料已經載入完畢,現在所有的屬性包含了它們應有的有效資訊。
	loadstart	在媒體開始載入時觸發。
	mozaudioavailable	當音訊資料快取並交給音訊層處理時
	pause	播放暫停時觸發。
	play	在媒體回放被暫停後再次開始時觸發。即,在一次暫停事件後恢復媒體回放。
	playing	在媒體開始播放時觸發(不論是初次播放、在暫停後恢復、或是在結束後重新開始)。
	progress	告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的資訊可以在元素的buffered屬性中獲取到。
	ratechange	在回放速率變化時觸發。
	seeked	在跳躍操作完成時觸發。
	seeking	在跳躍操作開始時觸發。
	stalled	在嘗試獲取媒體資料,但資料不可用時觸發。
	suspend	在媒體資源載入終止時觸發,這可能是因為下載已完成或因為其他原因暫停。
	timeupdate	元素的currentTime屬性表示的時間已經改變。
	volumechange	在音訊音量改變時觸發(既可以是volume屬性改變,也可以是muted屬性改變).。
	waiting	在一個待執行的操作(如回放)因等待另一個操作(如跳躍或下載)被延遲時觸發

音訊:
	abort	 在播放被終止時觸發,例如, 當播放中的視訊重新開始播放時會觸發這個事件。
	canplay	在媒體資料已經有足夠的資料(至少播放數幀)可供播放時觸發。這個事件對應CAN_PLAY的readyState。
	canplaythrough	在媒體的readyState變為CAN_PLAY_THROUGH時觸發,表明媒體可以在保持當前的下載速度的情況下不被中斷地播放完畢。注意:手動設定currentTime會使得firefox觸發一次canplaythrough事件,其他瀏覽器或許不會如此。
	durationchange	元資訊已載入或已改變,表明媒體的長度發生了改變。例如,在媒體已被載入足夠的長度從而得知總長度時會觸發這個事件。
	emptied	媒體被清空(初始化)時觸發。
	ended	播放結束時觸發。
	error	在發生錯誤時觸發。元素的error屬性會包含更多資訊。參閱Error handling獲得詳細資訊。
	loadeddata	媒體的第一幀已經載入完畢。
	loadedmetadata	媒體的元資料已經載入完畢,現在所有的屬性包含了它們應有的有效資訊。
	loadstart	在媒體開始載入時觸發。
	mozaudioavailable	當音訊資料快取並交給音訊層處理時
	pause	播放暫停時觸發。
	play	在媒體回放被暫停後再次開始時觸發。即,在一次暫停事件後恢復媒體回放。
	playing	在媒體開始播放時觸發(不論是初次播放、在暫停後恢復、或是在結束後重新開始)。
	progress	告知媒體相關部分的下載進度時週期性地觸發。有關媒體當前已下載總計的資訊可以在元素的buffered屬性中獲取到。
	ratechange	在回放速率變化時觸發。
	seeked	在跳躍操作完成時觸發。
	seeking	在跳躍操作開始時觸發。
	stalled	在嘗試獲取媒體資料,但資料不可用時觸發。
	suspend	在媒體資源載入終止時觸發,這可能是因為下載已完成或因為其他原因暫停。
	timeupdate	元素的currentTime屬性表示的時間已經改變。
	volumechange	在音訊音量改變時觸發(既可以是volume屬性改變,也可以是muted屬性改變).。
	waiting	在一個待執行的操作(如回放)因等待另一個操作(如跳躍或下載)被延遲時觸發