EasyPlayer播放器是TSINGSEE青犀視頻維護的一個RTSP播放器項目,EasyPlayer遵循了標准流媒體碼流協議,進行實時播放以及碼流錄制,在數據流的播放速度以及畫質的解碼顯示上均做了大量深度的優化。此外EasyPlayer支持多平台的客戶端版本,方便直接使用或在此基礎上進行二次開發,拓展性和靈活性極強。
有的客戶在項目需要獲取到EasyPLayer.JS的相關事件回調,在自己業務當中使用,本文分享下EasyPlayer.JS如何監聽播放等相關事件回調。
1.當用戶生成EasyPLayerJS播放器標簽,需要加入ID用來獲取播放器的DOM實例。
<easy-player id="player" ></easy-player>
2.用播放器標簽的ID獲取video實例,獲取到video后就可以監聽video上的相關事件,詳細事件可查詢文檔,文檔地址:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video。
var player = document.querySelector('#player video')
3.監聽播放事件
player.addEventListener('play', (e)=>{
console.log('播放事件回調:', 'play');
})
完整代碼可參考以下:
<!DOCTYPE HTML>
<html>
<head>
<title>
EasyPlayer
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
</head>
<body>
<easy-player id="player" show-custom-button="true" video-url="http://demo.easygbs.com:10001/hls/34020000001110000001_34020000001110000001_0200000001/playlist.m3u8"></easy-player>
<script>
window.onload = function () {
var player = document.querySelector('#player video')
player.addEventListener('play', (e)=>{
console.log('播放事件回調:', 'play');
})
player.addEventListener('pause', (e)=>{
console.log('暫停事件回調:', 'pause');
})
}
</script>
<script type="text/javascript" src="EasyPlayer-element.min.js"></script></body>
</html>
實現回調的預覽如下:
EasyPlayer播放器功能全面,可動態的設置視頻輸出的顯示比例,調整音量的輸出大小,實時視頻流量數據等,同時支持手動輸入視頻源和獲取指定流媒體服務器的直播視頻源的模式,歡迎大家關注和測試。