<!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 发布
2037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
