마우스가 움직일 때 상단 바 숨기기/표시

Question

비디오 플레이어에서 작업 중이며 해당 비디오 플레이어에 div가 있는데 #caption이라면 비디오를 재생할 때 div를 숨기고 일시 중지하면 비디오는 div를 보여줍니다. 이 모든 것이 잘 작동합니다. 이제는 마우스를 움직일 때 div를 보여주는 자바 스크립트의 작은 부분을 추가하고 타임 아웃으로 마우스를 움직이면 div를 다시 숨 깁니다. 이것은 잘 작동합니다. 그러나 비디오를 일시 중지하고 마우스를 움직이면 #caption도 시간 초과로 숨 깁니다. 플레이어가 일시 중지 상태 일 때이 자바 스크립트가 실행되지 않게하려면 어떻게해야합니까? 비디오가 일시 중지되었을 때 #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 페이드 아웃 타이머가 설정되어 있으면 취소하는 코드가 추가되었습니다.

동영상이 재생 중이면 (일시 중지되지 않은 경우에만) fadeout을 시작하는 테스트를 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>