網頁設計程式語法JavaScriptHTML5 Audio/Video DOM 方法/屬性/事件

HTML Audio/Video DOM 方法/屬性/事件

Audio/Video Methods 方法

Method 方法Description 描述
addTextTrack()添加字幕軌道向媒體添加新的 Text Track 字幕軌道
canPlayType()可以播放類型檢查瀏覽器是否可以播放指定的媒體類型
load()加載重新加載媒體元素
play()播放開始播放媒體
pause()暫停暫停正在播放的媒體


Audio/Video Properties 屬性

Property 屬性Description 描述
audioTracks音頻曲目返回表示可用音軌的 AudioTrackList 對象
autoplay自動播放設置或返回媒體,是否應在加載後立即開始播放 {vid.autoplay = true;}
buffered緩衝返回表示媒體的緩衝部分的 TimeRanges 對象
controller控制器返回表示媒體當前媒體控制器的 MediaController 對象
controls控件設置或返回媒體是否應顯示控件(如播放/暫停等)
crossOrigin跨越原點設置或返回媒體的 CORS 設置
currentSrc當前來源返回當前媒體的 URL
currentTime當前時間設置或返回媒體中的當前播放位置(以秒 Seconds 為單位)
defaultMuted默認靜音設置或返回媒體是否應默認靜音 {vid.defaultMuted = true}
defaultPlaybackRate默認播放速率設置或返回媒體播放的默認速度 {vid.defaultPlaybackRate = 0.5}
duration持續時間返回當前媒體的長度(以秒為單位)
ended結束返回媒體的播放是否已結束
error錯誤返回表示媒體錯誤狀態的 MediaError 對象 {vid.error.code}
loop循環設置或返回完成後媒體是否循環新開始 {vid.loop = true}
mediaGroup媒體集團設置或返回媒體所屬的組(用於鏈接多個媒體元素)
muted靜音設置或返回媒體是否靜音 {video.muted = (video.muted) ? !1 : !0;}
networkState網絡狀態返回媒體的當前 Network State 網絡狀態
paused暫停返回媒體是否暫停
playbackRate回放速率設置或返回媒體播放的速度
played已經播放返回表示媒體播放部分的 TimeRanges 對象
preload預加載設置或返回頁面加載時是否應加載媒體
readyState準備狀態返回媒體的當前就緒狀態
seekable可搜索返回表示媒體的可搜索部分的 TimeRanges 對象
seeking尋求返回用戶當前是否在媒體中尋找
src來源設置或返回媒體元素的當前 Source/src 來源
startDate開始時間日期返回表示當前時間偏移量的 Date 時間日期對象
textTracks文字追踪返回表示可用文本軌道的 TextTrackList 對象 {vid.textTracks.length}
videoTracks視頻軌道返回表示可用視頻軌道的 VideoTrackList 對象
volume音量設置或返回媒體的音量


Audio/Video Events 事件

Event 事件Description 描述
abort中止媒體加載中止時觸發
canplay可以播放當瀏覽器開始播放媒體時觸發
canplaythrough可以通過播放當瀏覽器可以在不停止緩衝的情況下播放媒體時觸發
durationchange時間變化媒體持續時間改變時觸發
emptied清空當前播放列表為空時觸發
ended播放結束當前播放列表結束時觸發
error錯誤加載媒體時發生錯誤時觸發 MediaError
loadeddata加載數據當瀏覽器加載媒體的當前幀時觸發
loadedmetadata加載元數據當瀏覽器加載媒體的元數據時觸發
loadstart加載啟動瀏覽器開始查找媒體時觸發
pause暫停媒體暫停時觸發
play播放媒體啟動或不再暫停時觸發
playing播放在暫停或停止 Buffering 緩衝後播放媒體時觸發
progress進展當瀏覽器正在下載媒體時觸發
ratechange變化率當媒體的播放速度改變時觸發
seeked尋找當用戶完成 Moving/Skipping 移動視頻中的新位置時觸發
seeking尋求當用戶開始移動/跳到媒體中的新位置時觸發
stalled停滯瀏覽器嘗試獲取媒體數據時觸發,但數據不可用
suspend中止/暫停當瀏覽器有意不獲取媒體數據時觸發
timeupdate時間更新當前播放位置發生變化時觸發
volumechange音量變化音量改變時觸發
waiting等待視頻停止時觸發,因為它需要緩衝下一幀


TimeRanges

返回一個表示數字的無符號長整數,所代表的時間範圍由時間範圍對象。

TimeRanges.length
var vid = document.GetElementById("video");
var buf = vid.buffered;
var numRanges = buf.length;
if (buf.length == 1) {
  // 只有一個範圍
  if (buf.start(0) == 0 && buf.end(0) == vid.duration) {
    // 一個範圍從開始和結束開始,在視頻結束時,整個事情都會被加載。
  }
}

可以使用元素的屬性 seekable 來決定媒體目前能查找的範圍。它返回一個 TimeRanges 時間對象。

mediaElement.seekable.start(); // 返回開始時間
mediaElement.seekable.end(); // 返回結束時間


MediaError 錯誤處理程序、輸出錯誤消息

創建 <video> 元素,為其創建錯誤處理程序,將該元素的 src 屬性設置為要顯示在該元素中的視頻資源。

var vid = document.createElement('video');
vid.onerror = function() {console.log("Error with media: " + vid.error.code);}
vid.src="http://www.eion.com.tw/3D-ANIMATION.html";

例如在 iOS 系統下媒體格式不正確則出現 error.code = 4

  • 1 MEDIA_ERR_ABORTED 相關資源的獲取被用戶請求中止。
  • 2 MEDIA_ERR_NETWORK 發生了某種網絡錯誤,導致媒體無法成功獲取,儘管之前已經可用。
  • 3 MEDIA_ERR_DECODE 儘管以前被確定為可用,但嘗試解碼媒體資源時發生錯誤,導致錯誤。
  • 4 MEDIA_ERR_SRC_NOT_SUPPORTED 關聯的資源或媒體提供程序對象(如 MediaStream)已被發現不適合。

Modification in