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

基本上我已经为我的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; 
    } 
}

FYI：我需要设置控件底部位置-65px如果鼠标不动，否则要0。

但是，这并没有奏效，一旦视频进入全屏幕onmousemove开始的事件监听器，并且即使我退出它仍然在监听并输出我在控制台上说我hey。

如果有人告诉我如果鼠标不在文档全屏幕上移动，则将底部位置设置为0px，如果有人告诉我如何将我的控件（包含div）底部位置设置为-65px，我将非常感激。

感谢提前:)

来源

2016-12-28 akdsfjakls

提供一个工作示例链接，以便有人可以提供帮助。 – aavrug

嘿，你的控制台登录了吗？ – Roberrrt

@Roberrrt是的，如果视频一旦进入全屏，然后枯萎的视频出或留在它仍然输出'嘿'一遍又一遍。 – akdsfjakls

可能会帮助别人。

简单易用的方式：

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

来源

2016-12-28 12:01:48 akdsfjakls

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

回答

相关问题