APP
EasyPlayer播放器是TSINGSEE青犀視頻維護(hù)的一個RTSP播放器項(xiàng)目，EasyPlayer遵循了標(biāo)準(zhǔn)流媒體碼流協(xié)議，進(jìn)行實(shí)時播放以及碼流錄制，在數(shù)據(jù)流的播放速度以及畫質(zhì)的解碼顯示上均做了大量深度的優(yōu)化。此外EasyPlayer支持多平臺的客戶端版本，方便直接使用或在此基礎(chǔ)上進(jìn)行二次開發(fā)，拓展性和靈活性極強(qiáng)。
有的客戶在項(xiàng)目需要獲取到EasyPLayer.JS的相關(guān)事件回調(diào)，在自己業(yè)務(wù)當(dāng)中使用，本文分享下EasyPlayer.JS如何監(jiān)聽播放等相關(guān)事件回調(diào)。
1.當(dāng)用戶生成EasyPLayerJS播放器標(biāo)簽，需要加入ID用來獲取播放器的DOM實(shí)例。
<easy-player id="player" ></easy-player>
2. 用播放器標(biāo)簽的ID獲取video實(shí)例，獲取到video后就可以監(jiān)聽video上的相關(guān)事件，詳細(xì)事件可查詢文檔，文檔地址：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video。var player = document.querySelector('#player video')
3.監(jiān)聽播放事件
<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('播放事件回調(diào)：', 'play');
})
player.addEventListener('pause', (e)=>{
console.log('暫停事件回調(diào)：', 'pause');
})
}
</script>
<script type="text/javascript" src="EasyPlayer-element.min.js"></script></body>
</html>
實(shí)現(xiàn)回調(diào)的預(yù)覽如下：
EasyPlayer播放器功能全面，可動態(tài)的設(shè)置視頻輸出的顯示比例，調(diào)整音量的輸出大小，實(shí)時視頻流量數(shù)據(jù)等，同時支持手動輸入視頻源和獲取指定流媒體服務(wù)器的直播視頻源的模式，歡迎大家關(guān)注和測試。
本文摘自 ：https://blog.51cto.com/t
