How to hide controls on video full screen while mouse is not moving?
<p>Basically I've made my own custom controls for my WEB videos. Now I need to hide my control if the video is on fullscreen mode and if the mouse is not moving.</p>

<p>So far I'm doing is this:</p>

<pre><code>var fullscreen_or_not=0;
document.addEventListener('webkitfullscreenchange', videoscreenmode, false);
document.addEventListener('mozfullscreenchange', videoscreenmode, false);
document.addEventListener('fullscreenchange', videoscreenmode, false);

function videoscreenmode(){
    if(fullscreen_or_not==0){
        fullscreen_or_not=1;
        $('.controls').css("bottom","-65px");
        document.onmousemove = function(){
            $('.controls').css("bottom","0px");
            console.log("hey");
        }
    }else{
        fullscreen_or_not=0;
    }
}
</code></pre>

<p>FYI: I need to set controls bottom position to <code>-65px</code> if mouse is not moving otherwise to <code>0</code>.</p>

<p>But this didn't worked, also once the video enters full screen the event listener for <code>onmousemove</code> start and even if I get out of it back it still is listening and outputing me on console saying <code>hey</code>.</p>

<p>I would really appreciate if someone tell me how to set my controls (contained with div) bottom position to <code>-65px</code> if mouse is not moving on document full screen else set bottom position to <code>0px</code>.</p>

<p>Thanks in advance:)</p>