雷火神山直播超兩億,Web播放器事件監聽是怎麼實現的?
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);
初始化播放器返回監聽事件物件的方法
事件監聽的技術實現
播放器可以通過初始化返回的物件進行事件監聽,示例:
var player = JDplayer('player-video-id', options);
// player.on(type, function(){
// 做一些處理
// });
player.on('error', function(error) {
// 做一些處理
});
其中 type 為事件型別,具體事件資訊詳見監聽事件明細表。
03 應用場景
Web播放器可廣泛應用於視訊網站、視訊電商、體育/遊戲賽事直播、線上教育等場景,而事件監聽是Web播放器在實際應用中的重要環節,通過事件監聽,可對使用者的播放行為、播放異常等資料進行完善的統計分析,這對視訊相關業務的規劃、運營和維護都有著重要的參考意義。
您也可以點選“連結”瞭解更多關於京東雲短視訊 SDK的相關資訊。
歡迎點選“京東雲”瞭解更多精彩內容。
相關文章
- 微信直播是怎麼實現的?
- 移動Web——localStorage,sessionStorage,Storage事件監聽WebSession事件
- 事件監聽事件
- spring-event-事件監聽機制實現Spring事件
- 直播美顏SDK祛痘功能是怎麼實現的?
- 背景透明的實現,直播電商原始碼是怎麼做的原始碼
- Flutter事件監聽Flutter事件
- jQuery事件監聽jQuery事件
- 監聽滑鼠事件事件
- 事件和事件監聽器事件
- Laravel 中的事件監聽Laravel事件
- passive 的事件監聽器事件
- 直播美顏SDK中的美白功能是怎麼實現的?
- java鍵盤監聽之視窗監聽的實現Java
- 【Redis系列】Spring boot實現監聽Redis key失效事件RedisSpring Boot事件
- 閱讀layim程式碼小記,監聽事件實現方法事件
- Java GUI之事件監聽與處理的匿名類實現方法JavaGUI事件
- 【監聽】兩庫互配靜態監聽
- vue之監聽事件Vue事件
- 監聽鍵盤事件事件
- 初識事件監聽事件
- JS事件監聽器JS事件
- JS怎麼監聽div元素的resizeJS
- 監聽所有模型的 saved 事件模型事件
- JS的事件監聽機制JS事件
- Lumen 實現 SQL 監聽SQL
- Jbpm4監聽的實現
- 蘋果簽名:馬雲的“無人超市”在火神山開業蘋果
- 直播商城原始碼,Android實現監聽Settings值變化的功能原始碼Android
- 成品直播原始碼,Android實現監聽Settings值變化的功能原始碼Android
- 直播美顏SDK是怎樣在直播中實現美顏的?
- deleted事件監聽報錯delete事件
- 如何移除事件監聽器事件
- 鍵盤監聽事件--向左事件
- java 自定義監聽事件Java事件
- javascript監聽鍵盤事件JavaScript事件
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- Web中的監聽器【Listener】Web