雷火神山直播超兩億,Web播放器事件監聽是怎麼實現的?

京東科技開發者發表於2020-02-07

Alt

Web播放器解決了在手機瀏覽器和PC瀏覽器上播放音視訊資料的問題,讓視音訊內容可以不依賴使用者安裝App,就能進行播放以及在社交平臺進行傳播。在視訊業務大資料平臺中,播放資料的統計分析非常重要,所以Web播放器在使用過程中,需要對其內部的資料進行收集並上報至服務端,此時,就需要對發生在其內部的一些播放行為進行事件監聽。

那麼Web播放器事件監聽是怎麼實現的呢?

01 監聽事件明細表

名稱 介紹
play 已經開始播放,呼叫 play() 方法或者設定了 autuplay 為 true 且生效時觸發,這時 paused 屬性為 false。
playing 因緩衝而暫停或停止後恢復播放時觸發,paused 屬性為 false 。通常用這個事件來標記視訊真正播放,play 事件只是開始播放,畫面並沒有開始渲染。
loadstart 開始載入資料時觸發。
durationchange 視訊的時長資料發生變化時觸發。
loadedmetadata 已載入視訊的 metadata。
loadeddata 當前幀的資料已載入,但沒有足夠的資料來播放視訊下一幀時,觸發該事件。
progress 在獲取到媒體資料時觸發。
canplay 當播放器能夠開始播放視訊時觸發。
canplaythrough 當播放器預計能夠在不停下來進行緩衝的情況下持續播放指定的視訊時觸發。
error 視訊播放出現錯誤時觸發。
pause 暫停時觸發。
ratechange 播放速率變更時觸發。
seeked 搜尋指定播放位置結束時觸發。
seeking 搜尋指定播放位置開始時觸發。
timeupdate 當前播放位置有變更,可以理解為 currentTime 有變更。
volumechange 設定音量或者 muted 屬性值變更時觸發。
waiting 播放停止,下一幀內容不可用時觸發。
ended 視訊播放已結束時觸發。此時 currentTime 值等於媒體資源最大值。
fullscreenchange 全屏狀態切換時觸發。

02 技術實現

初始化引數
播放器初始化需要傳入兩個引數,第一個為播放器容器 ID(即video標籤上的ID,該ID名稱可自定義,第二個為功能引數物件。

 var player = JDplayer('player-video-id', options);

初始化播放器返回監聽事件物件的方法
Alt
事件監聽的技術實現

播放器可以通過初始化返回的物件進行事件監聽,示例:

 var player = JDplayer('player-video-id', options);  
  // player.on(type, function(){
  // 做一些處理
 // });
 player.on('error', function(error) {
   // 做一些處理
 });

其中 type 為事件型別,具體事件資訊詳見監聽事件明細表。

03 應用場景

Web播放器可廣泛應用於視訊網站、視訊電商、體育/遊戲賽事直播、線上教育等場景,而事件監聽是Web播放器在實際應用中的重要環節,通過事件監聽,可對使用者的播放行為、播放異常等資料進行完善的統計分析,這對視訊相關業務的規劃、運營和維護都有著重要的參考意義。

您也可以點選“連結”瞭解更多關於京東雲短視訊 SDK的相關資訊。

歡迎點選“京東雲”瞭解更多精彩內容。

Alt
Alt

相關文章