我正在尝试使用 javascript 创建一个自定义视频播放器，代码应该在 onmousemove 事件上显示叠加层它确实触发了代码但由于某种原因两次，我认为这是因为每个顶部都有双全屏 div其他，但我无法弄清楚确切原因。
它的HTML代码如下
<!DOCTYPE html>
<html>
<head>
<title>Video Player</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>
<style>
video { object-fit: fill; }
#video-player {
position: fixed;
top: 0;
left: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#overlay
{
top: 0;
right: 0;
bottom: 0;
left: 0;
position:fixed;
background-color: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
display: none;
}
#toggle
{
top: 50%;
left: 50%;
}
</style>
</head>
<body style="cursor: none">
<video id="video-player" width="100%" height="100%" controls>
<source src="/Users/Himanshu/Downloads/movie.mp4" type="video/mp4">
</video>
<div id="overlay">
<button id="toggle">play</button>
</div>
<script src="mediaPlayer.js" type="text/javascript"></script>
</body>
</html>
Javascript代码如下
var videoPlayer=document.getElementById("video-player");
var toggleButton=document.getElementById("toggle");
videoPlayer.controls=false;
toggleButton.addEventListener("click",function(){
if(videoPlayer.paused)
{
toggleButton.innerHTML="pause";
videoPlayer.play();
}
else
{
toggleButton.innerHTML="play";
videoPlayer.pause();
}
});
videoPlayer.onended=function(){
toggleButton.innerHTML="play";
};
var isHidden=true;
window.onmousemove=function(){
if(isHidden)
{
console.log("Mouse Move Registered right now");
isHidden=false;
document.body.style.cursor="default";
document.getElementById("overlay").style.display="inline";
setTimeout(hide,1000);
}
};
var hide=function(){
console.log("here");
document.getElementById("overlay").style.display="none";
document.body.style.cursor="none";
isHidden=true;
};
还有我如何隐藏光标。
最佳答案
mousemove 或 resize 事件的触发频率很大程度上取决于浏览器的实现。有时一个函数被反复调用是为了快。这就是为什么许多库在这种情况下使用“去抖动”功能。
我建议您阅读 David Walsh 关于 JavaScript Debounce Functions 的文章.它还包含一个示例函数(来自 Underscore.js)。
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate)
该函数的 immediate 标志导致给定的事件处理程序被调用一次，在事件第一次被触发的那一刻，但不会再次被调用，直到该事件不再被触发 wait 毫秒。
关于javascript - onmousemove 事件发生两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47065064/