如何在鼠标不移动时全屏隐藏视频控件?

时间:2016-12-28 09:11:07

标签: javascript jquery html css

基本上我已经为自己的WEB视频制作了自己的自定义控件。现在,如果视频处于全屏模式并且鼠标没有移动,我需要隐藏我的控件。

到目前为止,我正在这样做:

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;
    }
}

仅供参考:如果鼠标没有移动到-65px,我需要将控件底部位置设置为0

但是这没有用,一旦视频进入全屏,onmousemove的事件监听器就开始了,即使我退出它仍然正在监听并输出我在控制台上说{{1} }。

如果有人告诉我如何将我的控件(包含div)底部位置设置为hey,如果鼠标没有在文档全屏上移动,或者将底部位置设置为-65px,我将非常感激。< / p>

提前致谢:)

1 个答案:

答案 0 :(得分:0)

可以帮助别人。

简单易行:

var timeout = null;
$(video).on('mousemove', function() {
    clearTimeout(timeout);
    $('.controls').css("bottom","0px");
    timeout = setTimeout(function() {
        $('.vidCE').css("bottom","-65px");
    }, 3000);
});