EasyPlayer is an RTSP player project maintained by TSINGSEE Video. EasyPlayer follows the standard code stream protocol for real-time playback and code stream recording, with a lot of in-depth optimizations in the playback speed of data stream and decoding and display of picture quality. In addition, EasyPlayer supports multi-platform client version, convenient direct use or on this basis for secondary development, expansion and flexibility.

Some users need to get the related event callback of easyplayer. JS to use in their own business. This article shares how easyplayer. JS listens to play related event callback.

1. When the user generates the EasyPLayerJS player tag, it needs to add the ID to get the DOM instance of the player.

<easy-player id="player" ></easy-player>
Copy the code

2. Use the ID of the player label to obtain the video instance. After obtaining the video, you can monitor the related events on the video.

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

3. Listen for playback events

<! 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 event callback: ', 'play'); }) player.addEventListener('pause', (e)=>{console.log(' pause event callback: ', 'pause'); }) } </script> <script type="text/javascript" src="EasyPlayer-element.min.js"></script></body> </html>Copy the code

A preview of the implementation of the callback is as follows:

EasyPlayer has comprehensive functions, which can dynamically set the display ratio of video output, adjust the output volume, real-time video flow data, etc. Meanwhile, it supports manual input of video source and the mode of obtaining the live video source of the specified streaming media server. Welcome to pay attention and test.