HTML5的video事件簡單介紹

admin發表於2017-02-23
本章節通過簡短的程式碼介紹一下html5中常用的幾個video事件。非常的簡單,需要的朋友可以簡單做一下參考。

一.獲取視訊時間長度:

當視訊載入以後,可以使用onloadedmetadata事件獲取視訊的長度。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
video.onloadedmetadata=function(){ 
  var vLength=video.duration; 
  console.log(vLength); 
}

二.獲取視訊的播放進度:

當視訊開始播放之後,可以使用ontimeupdate事件獲取當前視訊的播放進度,當video物件的currentTime屬性發生改變時觸發ontimeupdate事件。currentTime屬性是浮點小數,可取到12位數的小數位數,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
video.ontimeupdate=function(){ 
  var vTime=video.currentTime; 
  console.log(vTime); 
};

相關文章