audio元素與video元素所具有的屬性大致相同,所以接下來看一下這兩個元素具有那些屬性。
(1)src
在該屬性中指定媒體數據的URL地址。
(2)autoplay
在該屬性中指定媒體是否在頁面加載後自動播放。該屬性的使用方法如下所示。
<video src="xx.mp4" autoplay></video>
(3)preload
在該屬性中指定視頻或音頻數據是否預加載。如果使用預加載,瀏覽器會預先緩衝視頻或音頻數據,這樣可以加快播放速度,因爲播放時數據已經預先緩衝完畢。
該屬性有三個可選擇的值:none、metadata與auto,默認值爲auto。
none表示不進行預加載。
metadata表示只預加載媒體的元數據(媒體字節數、第一幀、播放列表、持續時間等)。
auto表示預加載全部視頻或者音頻。
該屬性的使用方法如下所示。
<video src="xx.mp4" preload="auto"></video>
(4)poster(video元素獨有屬性)
當視頻不可用時,可以使用該元素向用戶展示一幅替代用的圖片。當視頻不可用時,最好使用該屬性,以免展示視頻的區域中出現一片空白。該屬性的使用方法如下所示。
<video src="xx.mp4" poster="xxx.jpg"></video>
(5)loop
在該屬性中制定是否循環播放視頻或音頻。該屬性的使用方法如下所示,
<video src="xx.mp4" autoplay loop></video>
(6)controls
在該屬性中指定是否爲視頻或音頻添加瀏覽器自帶的播放用的控制條。控制條中具有播放、暫停等按鈕。該屬性的使用方法如下所示。
<video src="xx.mp4" controls></video>
開發者也可以在腳本中自定義控制條,而不使用瀏覽器默認的控制條。
(7)width與height(video元素獨有屬性)
在該屬性中指定視頻的寬度與高度(以像素爲單位)。這兩個屬性的使用方法如下所示。
<video src="xx.mp4" width="500" height="330"></video>
(8)error屬性
在讀取、使用媒體數據的過程中,在正常情況下,video元素或audio元素的error屬性爲null,但是任何時候只要出現錯誤,error屬性將返回一個MediaError對象,該對象的code返回對應的錯誤狀態,錯誤狀態共有4個可能值,如下所示。
MEDIA_ERR_ABORTED(數字值爲1):媒體數據的下載過程被用戶中止。
MEDIA_ERR_NETWORK(數字值爲2):確認媒體資源可用,但是在下載時出現網絡錯誤,媒體數據的下載過程被中止。
MEDIA_ERR_DECODE(數字值爲3):確認媒體資源可用,但是解碼時發生錯誤。
MEDIA_ERR_SRC_NOT_SUPPORTED(數字值爲4):媒體資源不可用或媒體格式不被支持。
error屬性爲只讀屬性。
讀取錯誤狀態的代碼示例如下。
<video id="videoElement" src="xx.mp4">
<script>
var video=document.getElementById("videoElement");
video.addEventListener("error",function(){
var error=video.error;
switch(error.code)
{
case 1:
alert("視頻的下載過程被終止。");
break;
case 2:
alert("網絡發生故障,視頻的下載過程被終止。");
break;
case 3:
alert("解碼失敗。");
break;
case 4:
alert("媒體資源不可用或媒體格式不被支持。");
break;
}
},false);
</script>
(9)networkState屬性
在媒體數據加載過程中可以使用video元素或audio元素的networkState屬性讀取當前網絡狀態,共有如下所示的4個可能值。
NETWORK_EMPTY(數字值爲0):元素處於初始狀態。
NETWORK_IDLE(數字值爲1):瀏覽器已選擇好用什麼編碼格式來播放媒體,但尚未建立網絡連接。
NETWORK_LOADING(數字值爲2):媒體數據加載中。
NETWORK_NO_SOURCE(數字值爲3):沒有支持的編碼格式,不執行加載。
networkState屬性爲制度屬性。
讀取網絡狀態的代碼示例如下。
<script>
var video=document.getElementById("video");
video.addEventListener("progress",function(e){
if(video.networkState==2)
{
console.log("加載中...["+e.loaded+" / "+e.total+" byte]");
}
else if(video.networkState==3)
{
console.log("加載失敗");
}
},false);
</script>
(10)currentSrc屬性
可以使用video元素或audio元素的currentSrc屬性讀取播放中的媒體數據的URL地址。currentSrc屬性爲只讀屬性。
(11)buffered屬性
可以使用video元素或audio元素的buffered屬性返回一個對象,該對象實現TimeRanges接口,以確認瀏覽器是否已緩存媒體數據。TIMERanges對象標識一段時間範圍,在大多數情況下,TimeRanges對象表示的時間範圍是一個單一的以0開始的範圍,但是如果瀏覽器發出Range Request請求,這是TimeRanges對象表示的時間範圍是多個時間範圍。
TimeRanges對象具有一個length屬性,表示有多少個時間範圍,大多是情況下存在時間範圍,該值爲1;不存在時間範圍是,該值爲0。TimeRanges對象還具有兩個方法,TimeRanges.start(index)與TimeRanges.end(index),大多數情況下,index值設爲0就可以了。當用videoElement.buffered語句來實現TimeRanges接口時,TimeRanges.start(0)表示當前緩存區內從媒體數據的什麼時間開始進行緩存,TimeRanges.end(0)表示當前緩存區內的結束時間。
buffered屬性爲只讀屬性。
(12)readyState屬性
可以使用video元素或audio元素的readyState屬性返回媒體當前播放位置的就緒狀態,共有5個可能值。
HAVE_NOTHING(數字值爲0):沒有獲取到媒體的任何信息,當前播放位置沒有可播放的數據。
HAVE_MATADATA(數字值爲1):已經獲取到足夠的媒體數據,但是當前播放位置沒有有效的媒體數據(也就是說,獲取到的媒體數據無效,不能播放)。
HAVE_CURRENT_DATA(數字值爲2):當前播放位置已經有數據可以播放,但沒有獲取到可以讓播放器前進的數據。當媒體爲視頻時,意思是當前幀的數據已獲得,但還沒有獲取到下一幀的數據,或者當前幀已經是播放的最後一幀。
HAVE_FUTURE_DATA(數字值爲3):當前播放位置已經有數據可以播放,而且也獲取到可以讓播放器前進的數據。當媒體爲視頻時,意思是當前幀的數據已獲得,而且也獲取到下一幀的數據,當前幀是播放的最後一幀時,readyState屬性不可能爲HAVE_FUTURE_DATA。
HAVE_ENOUGH_DATA(數字值爲4):當前播放位置已經有數據可以播放,同時也獲取到可以讓播放器前進的數據,而且瀏覽器確認媒體數據以某一種速度進行加載,可以確保有足夠的後續數據進行播放。
readyState屬性爲只讀屬性。
(13)seeking屬性與seekable屬性
可以使用video元素或audio元素的seeking屬性返回一個布爾值,表示瀏覽器是否正在請求某一個特定播放位置的數據,true表示瀏覽器正在請求數據,false表示瀏覽器已停止請求。
可以使用video元素或audio元素的seekable屬性返回一個TimeRanges對象,該對象表示請求到的數據的時間範圍。當媒體爲視頻時,開始時間爲請求到的視頻數據的第一幀的時間,結束時間爲請求到的視頻數據的最後一幀時間。
seeking屬性與seekable屬性均爲只讀屬性。
(14)currentTime屬性、startTime屬性與duration屬性
可以使用video元素或audio元素的currentTime屬性讀取媒體的當前播放位置,也可以通過修改currentTime屬性來修改當前播放位置。如果修改的位置上沒有可用的媒體數據時,將拋出INVALID_STATE_ERR異常;如果修改的位置超出了瀏覽器在一次請求中可以請求的數據範圍,將拋出INDEX_SIZE_ERR異常。
可以使用video元素或audio元素的startTime屬性讀取媒體播放的開始時間,通常爲0.
可以使用video元素或audio元素的duration屬性來讀取媒體文件總的播放時間。
三者均爲時間,單位爲秒,currentTime爲可讀寫屬性,其餘兩個均爲只讀屬性。
(15)played、paused、ended屬性
可以使用video元素或audio元素的played屬性返回一個TimeRanges對象,從該對象中可以讀取媒體文件的已播放部分的時間段。開始時間爲已播放部分的開始時間,結束時間爲已播放部分的結束時間。
可以使用video元素或audio元素的paused屬性返回一個布爾值,表示是否處於暫停播放中,true表示媒體暫停播放,false表示媒體正在播放。
可以使用video元素或audio元素的ended屬性來返回一個布爾值,表示是否播放完畢,true表示媒體播放完畢,false表示還沒有播放完畢。
三者均爲只讀屬性。
(16)defaultPlaybackRate屬性與playbackRate屬性
可以使用video元素或audio元素的defaultPlaybackRate屬性讀取或修改媒體默認的播放速率。
可以使用video元素或audio元素的playbackRate屬性讀取或修改媒體當前的播放速率。
(17)volume屬性與mute屬性
可以使用video元素或audio元素的volume屬性讀取或修改媒體的播放音量,範圍爲0到1,0爲靜音,1爲最大音。
可以使用video元素或audio元素的muted屬性讀取或修改媒體的靜音狀態,該值爲布爾值,true表示處於靜音狀態,false表示處於非靜音狀態。