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

您可以使用搜索事件开始时触发的WebEvent seeking为seeking添加另一个事件侦听器。

请查看下面的代码段，以获取使用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>

仅在播放器暂停时显示元素

1 个答案: