Отображать элементы только когда игрок находится в режиме паузы

Question

Я хочу попытаться отобразить некоторую информацию внутри содержимого div, когда проигрыватель находится в режиме паузы, но проблема в том, что это отображается, когда проигрыватель находится в режиме паузы и когда выполняется поиск.

Я создал пример:

    var video = $('#video')[0];
    video.addEventListener("playing", function() {
	$('.text').text('playing');
     });

     video.addEventListener("pause", function() { 
	$('.text').text('pause');
     });

video {
    width:300px;
    height:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

Если вы ищете, вы увидите, что игрок меняет событие на паузу. Не удается найти решение для отображения чего-либо, только когда игрок находится в режиме паузы. Есть идеи?

Answer 1

Вы можете добавить еще один прослушиватель событий для seeking, используя WebEvent seek , который запускается при запуске операции поиска.

Проверьте фрагмент кода ниже для практического примера использования события seeking.

    var video = $('#video')[0];
    video.addEventListener("playing", function() {
	$('.text').text('playing');
     });

     video.addEventListener("pause", function() { 
	$('.text').text('pause');
     });

     video.addEventListener("seeking", function() {
       $('.text').text('seeking');
     });

video {
    width:300px;
    height:150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text">test</div>
<video id="video" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>