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

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

01 監聽事件明細表

02 技術實現

03 應用場景

相關文章