Как EasyPlayer.JS отслеживает воспроизведение и другие связанные обратные вызовы событий?

JavaScript
Как EasyPlayer.JS отслеживает воспроизведение и другие связанные обратные вызовы событий?

Плеер EasyPlayer — это проект проигрывателя RTSP, поддерживаемый TSINGSEE Qingxi Video.EasyPlayer следует стандартному протоколу потоковой передачи мультимедиа, выполняет воспроизведение и запись потока в реальном времени, а также выполняет декодирование и отображение скорости воспроизведения потока данных и качества изображения. глубоких оптимизаций. Кроме того, EasyPlayer поддерживает многоплатформенные клиентские версии, удобные для непосредственного использования или вторичной разработки на этой основе, обладающие сильной масштабируемостью и гибкостью.

Некоторым пользователям необходимо получить соответствующие обратные вызовы событий EasyPLayer.JS в проекте и использовать их в своем бизнесе.В этой статье рассказывается, как EasyPlayer.JS отслеживает воспроизведение и другие обратные вызовы связанных событий.

1. Когда пользователь создает тег проигрывателя EasyPLayerJS, необходимо добавить идентификатор, чтобы получить экземпляр DOM проигрывателя.

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

2. Используйте идентификатор тега проигрывателя, чтобы получить экземпляр видео. После получения видео вы можете отслеживать связанные события в видео. Чтобы получить подробные сведения о событиях, вы можете запросить документ. Адрес документа:

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

3. Слушайте события воспроизведения

<!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 имеет комплексные функции.Он может динамически устанавливать коэффициент отображения выходного видеосигнала, регулировать размер выходного объема, данные видеотрафика в реальном времени и т. д. Он также поддерживает режим ручного ввода видеоисточника и получения видеоисточника в реальном времени. указанного сервера потокового мультимедиа. Приглашаем всех обратить внимание и протестировать.

Категории