マウスの移動のトップバーを非表示にして、ビデオが一時停止したときに表示する

Question

ビデオプレイヤーで作業しているビデオプレーヤーで、#captionというdivがあります。ビデオを再生するときにdivを非表示にします。ビデオ私はdivを表示します。これはすべて正常に動作します。今私はマウスを移動するとdivを表示するjavascriptの小さな部分を追加し、タイムアウトでマウスを移動してもdivを再び隠す。これは正常に動作します。しかし、ビデオを一時停止してマウスを動かすと、#captionもタイムアウトして隠れます。どのようにプレイヤーが一時停止しているときに、このjavascriptを起動しないようにすると、ビデオが一時停止しているときに#captionが常に表示されます。

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> 

Answer 1

例を変更して#videoContainerに追加し、その要素をスクリプトの上に配置して見つけてください。

ビデオポーズボタンが押されたときに#captionフェードアウトタイマーが設定されている場合は、キャンセルするコードを追加しました。

ビデオが再生中（一時停止中でない）の場合にのみ、フェードアウトを開始するテストを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>