雷火神山直播超兩億,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的相關資訊。
歡迎點選“京東雲”瞭解更多精彩內容。
相關文章
- 微信直播是怎麼實現的?
- spring-event-事件監聽機制實現Spring事件
- 移動Web——localStorage,sessionStorage,Storage事件監聽WebSession事件
- python使用裝飾器實現的事件中心(監聽器)Python事件
- 【Redis系列】Spring boot實現監聽Redis key失效事件RedisSpring Boot事件
- 事件和事件監聽器事件
- 監聽滑鼠事件事件
- jQuery事件監聽jQuery事件
- Flutter事件監聽Flutter事件
- springboot事件監聽Spring Boot事件
- js 監聽事件JS事件
- JavaScript 事件監聽JavaScript事件
- 聯影智慧AI入駐火神山、雷神山醫院,分析肺段以搜尋新冠病毒特徵AI特徵
- java鍵盤監聽之視窗監聽的實現Java
- 直播商城原始碼,Android實現監聽Settings值變化的功能原始碼Android
- 成品直播原始碼,Android實現監聽Settings值變化的功能原始碼Android
- 直播美顏SDK祛痘功能是怎麼實現的?
- vue之監聽事件Vue事件
- 初識事件監聽事件
- 監聽鍵盤事件事件
- 監聽所有模型的 saved 事件模型事件
- Lumen 實現 SQL 監聽SQL
- 背景透明的實現,直播電商原始碼是怎麼做的原始碼
- 直播美顏SDK中的美白功能是怎麼實現的?
- JS怎麼監聽div元素的resizeJS
- Spring Boot 事件和監聽Spring Boot事件
- deleted事件監聽報錯delete事件
- 如何移除事件監聽器事件
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- java springboot監聽事件和處理事件JavaSpring Boot事件
- js 註冊事件的兩種方式詳解,傳統註冊事件與方法監聽註冊事件(addEventListener)JS事件dev
- js 監聽事件的疊加和移除JS事件
- 監聽瀏覽器的後退事件瀏覽器事件
- 統一監聽所有模型的模型事件模型事件
- Android的事件處理——監聽介面方式Android事件
- 使用 vue 例項更好的監聽事件Vue事件
- 基於laravel的事件監聽例項Laravel事件
- h5 storage事件監聽H5事件