Javascript 在鼠标上隐藏/显示顶部栏在视频暂停时移动和显示

我正在制作一个视频播放器，在这个视频播放器上，我有一个名为caption的div，当我播放视频时，我隐藏了div，当我暂停视频时，我显示了div。这一切都很好。现在我添加了javascript的一小部分，当我移动鼠标时显示div，如果我在超时时停止移动鼠标，则再次隐藏div。这也很好用。但是，如果我暂停视频并移动鼠标，标题也会随着超时而隐藏。如何防止播放器暂停时触发这段javascript，以便视频暂停时字幕始终可见

var video = $('#thevideo')[0];

video.addEventListener('pause', function () {
$('#caption').show();
})

video.addEventListener('playing', function () {
$('#caption').delay(2500).fadeOut();
})

var i = null;
$("#videoContainer").mousemove(function () {
        clearTimeout(i);
        $("#caption").fadeIn();

        i = setTimeout(function () {
        $("#caption").fadeOut();
        }, 2500);
 })

 <video src="iamavideo.mp4" id="thevideo"></video>
 <div id="caption">hi there!</div>

---

修改您的示例以添加到videoContainer中，并将元素放在脚本上方以便找到它们

添加了取消字幕淡出计时器的代码（如果在按下视频暂停按钮时设置了该计时器）

在mousemove中添加了一个测试，仅当视频播放未暂停时才开始淡出

<div id="videoContainer">
    <video controls muted src="BigBuck.mp4" id="thevideo"></video>
    <div id="caption">hi there!</div>
</div>

<script>

var video = $('#thevideo')[0];
var i = null;

video.addEventListener('pause', function () {
    $('#caption').show();
    // video has paused, so if the caption fadeout timer has started, cancel it
    clearTimeout(i);
})

video.addEventListener('playing', function () {
    $('#caption').delay(2500).fadeOut();    
})


$("#videoContainer").mousemove(function () {
    clearTimeout(i);
    // only start the timer if the video is not paused
    if (!video.paused) {
        $("#caption").fadeIn();

        i = setTimeout(function () {
        $("#caption").fadeOut();
        }, 2500);
    }
})

</script>

---

如果视频正在播放，您只需设置超时是的，我尝试将其添加到视频中。addEventListener“播放”，但仍会触发超时部分