<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<!-- audio元素與video元素屬性:
src屬性:指定播放媒體的URL地址
autoplay屬性:媒體是否在頁面加載后自動播放(裸體屬性)
preload屬性:指定視頻,音頻數據是否預加載
none:不進行預加載
metadata:只預加載媒體元數據(媒體字節數,第一幀,播放列表,持續時間)
auto(默認):預加載全部視頻音頻
poster屬性(video元素獨有):視頻不可用,向用戶展示一替代用圖片
loop屬性:指定是否循環播放音頻,視頻(裸體屬性)
controls屬性:是否為音頻,視頻添加瀏覽器默認播放控制條(裸體屬性)
width,height屬性(video元素獨有):指定視頻寬度,高度
error屬性(只讀):正常情況下,error屬性值為null,只要有錯誤,error屬性返回MediaError對象,錯誤狀態有4個,通過code獲取
MEDIA_ERR_ABORTED(1):媒體下載由於用戶操作被終止
MEDIA_ERR_NETWORK(2):確認媒體資源可用,下載時出現網絡錯誤,下載被終止
MEDIA_ERR_DECODE(3):確認媒體資源可用,解碼時錯誤
MEDIA_ERR_SRC_NOT_SUPPORTED(4):媒體格式不支持
networkState屬性(只讀):在媒體數據加載中,讀取當前網絡狀態
NETWORK_EMPTY(0):處於初始狀態
NETWORK_IDLE(1):瀏覽器已選好編碼格式播放媒體,但尚未建立網絡連接
NETWORK_LOADING(2):媒體數據加載中
NETWORK_NO_SOURCE(3):沒有支持的編碼格式,不加載
currentSrc屬性(只讀):讀取播放中的媒體數據URL地址
buffered屬性(只讀):返回一個實現TimeRanges接口的對象,以確認瀏覽器是否已緩存媒體數據
readyState屬性(只讀):返回媒體當前播放位置就緒狀態
HAVE_NOTHING(0):沒有獲取媒體任何信息,當前位置無可播放數據
HAVE_METADATA(1):獲取到的媒體數據無效,不可播放
HAVE_CURRENT_DATA(2):當前播放位置已有數據可播放,但沒有獲取讓播放器前進的下一數據
HAVE_FUTURE_DATA(3):當前播放位置已經有數據可播放,且獲取到讓播放器前進的數據
HAVE_ENOUGH_DATA(4):當前播放位置已經有數據可以播放,同時獲取讓播放器前進的數據,且瀏覽器已某速度加載,保證後續播放
seeking,seekable屬性(只讀):seeking屬性返回一布爾值,表示瀏覽器是否正在請求某一特定播放位置數據
seekable屬性返回一TimeRanges對象,表示請求道的數據時間範圍
currentTime,startTime(只讀),duration(只讀)屬性:currentTime讀取設置當前媒體播放位置
startTime讀取媒體播放開始時間,通常為0
duration讀取媒體文件總播放時間
三者值均為時間,單位秒
played,paused,ended屬性(只讀):played返回一TimeRanges對象,可讀取媒體已播放部份時間段
paused返回一布爾值,表示是否處於暫定播放狀態
ended返回一布爾值,表示是否播放完畢
defaultPlaybackRate,playbackRate屬性:defaultPlaybackRate讀取或修改媒體默認播放速率
playbackRate讀取或修改媒體當前的播放速率
volume,muted屬性:volume讀取修改媒體的播放音量,範圍0~1
muted讀取或修改媒體的靜音狀態,true處於靜音
audio元素與video元素方法:
play():播放媒體,將paused屬性值為false
pause():暫停播放,將paused屬性值為true
load():重新載入媒體播放,自動修改playbackRate屬性值為defaultPlaybackRate,自動將元素error值null
canPlayType(type):測試瀏覽器是否支持指定媒體類型,返回值:
"":瀏覽器不支持該媒體類型
"maybe":瀏覽器可能支持該媒體類型
"probably":瀏覽器確定支持該媒體類型
事件介紹:
loadstart:瀏覽器開始在尋找媒體數據
progress:瀏覽器正在獲取媒體數據
suspend:瀏覽器暫停獲取媒體數據,但下載過程並未結束
abort:瀏覽器在下載全部媒體數據前終止獲取媒體數據,但並非由錯誤引起
error:獲取媒體數據過程中出錯
emptied:所在網絡突然變為未初始化狀態
stalled:瀏覽器獲取媒體數據失敗
play:即將開始播放
pause:暫停播放
loadedmetadata:瀏覽器獲取完媒體時長和字節數
loadeddata:瀏覽器加載完畢媒體數據,準備播放
waiting:播放過程得不到下一幀而暫停播放(下一幀未加載完),但很快會得到下一幀
playing:正在播放
canplay:瀏覽器能夠播放媒體,但播放其間需緩衝一會
canplaythrough:瀏覽器能播放媒體,不需要緩衝
seeking:seeking屬性變為true,瀏覽器正在請求數據
seeked:seeking屬性變為false,瀏覽器停止請求數據
timeupdate:當前播放位置被改變
ended:播放結束后停止播放
ratechange:defaultplaybackRate,playbackRate屬性改變
durationchange:播放時長被改變
volumechange:volume,muted屬性被改變
-->
<audio src="test.mp3">您的瀏覽器不支持audio元素</audio>
<video width="640" height="360" src="test.mp4" poster="CantUse.jpg">您的瀏覽器不支持video元素</video>
<video>
<!-- source元素為同一個媒體數據指定多個播放格式與編碼方式
確保瀏覽器可以從中選擇一種自己支持的播放格式進行播放
瀏覽器會從上往下判斷對該播放格式是否支持,直到可以支持的播放格式為止
source屬性:
src屬性:指播放媒體的URL地址
type屬性:媒體文件的MIME類型,codes表示所使用的媒體編碼格式
該屬性最好不要省略,方便瀏覽器判斷是否支持該格式
-->
<source src="sample.ogv" type="video/ogg;codecs='theora,vorbis'" />
<source src="sample.mov" type="video/quicktime" />
</video>
<video id="myVideo" src="sample.mp4" />
<div id="netState"></div>
<script type="text/javascript">
var video = document.getElementById("myVideo");
//讀取播放錯誤
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);
//讀取網絡狀態
video.addEventListener("progress", function (e) {
var netState = document.getElementById("netState");
if (video.networkState == 0) {
netState.innerHTML = "初始";
}
else if (video.networkState == 1) {
netState.innerHTML = "網絡錯誤";
}
else if (video.networkState == 2) {
netState.innerHTML = "加載中...[" + e.loaded + "/" + e.total + " byte]";
}
else if (video.networkState == 3) {
netState.innerHTML = "加載失敗";
}
}, false);
</script>
</body>
</html>
多媒體播放
最新推荐文章于 2020-05-11 20:56:10 发布