當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

EasyPlayer.JS如何監(jiān)聽播放等相關(guān)事件回調(diào)?
2021-09-24 14:48:35

EasyPlayer播放器是TSINGSEE青犀視頻維護的一個RTSP播放器項目,EasyPlayer遵循了標準流媒體碼流協(xié)議,進行實時播放以及碼流錄制,在數(shù)據(jù)流的播放速度以及畫質(zhì)的解碼顯示上均做了大量深度的優(yōu)化。此外EasyPlayer支持多平臺的客戶端版本,方便直接使用或在此基礎(chǔ)上進行二次開發(fā),拓展性和靈活性極強。

EasyPlayer.JS如何監(jiān)聽播放等相關(guān)事件回調(diào)?_ide

有的客戶在項目需要獲取到EasyPLayer.JS的相關(guān)事件回調(diào),在自己業(yè)務(wù)當(dāng)中使用,本文分享下EasyPlayer.JS如何監(jiān)聽播放等相關(guān)事件回調(diào)。

1.當(dāng)用戶生成EasyPLayerJS播放器標簽,需要加入ID用來獲取播放器的DOM實例。

<easy-player id="player" ></easy-player>

2. 用播放器標簽的ID獲取video實例,獲取到video后就可以監(jiān)聽video上的相關(guān)事件,詳細事件可查詢文檔,文檔地址:

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video。var player = document.querySelector('#player video')

3.監(jiān)聽播放事件

<!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('播放事件回調(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>

實現(xiàn)回調(diào)的預(yù)覽如下:

EasyPlayer.JS如何監(jiān)聽播放等相關(guān)事件回調(diào)?_html_02

EasyPlayer播放器功能全面,可動態(tài)的設(shè)置視頻輸出的顯示比例,調(diào)整音量的輸出大小,實時視頻流量數(shù)據(jù)等,同時支持手動輸入視頻源和獲取指定流媒體服務(wù)器的直播視頻源的模式,歡迎大家關(guān)注和測試。

本文摘自 :https://blog.51cto.com/t

開通會員,享受整站包年服務(wù)立即開通 >