Question

我正在尝试使用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;
};

我该如何隐藏光标。

Answer 1

触发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标志会导致给定的事件处理程序在第一次触发事件时被调用一次，但不会再次被调用，直到{{1}不再触发该事件为止毫秒。

onmousemove事件发生两次

1 个答案: