onmousemove Ereignis auftritt zweimal

Ich versuche, einen benutzerdefinierten Video-Player mit Javascript erstellen, sollte der Code die Überlagerung auf onmousemove Ereignis zeigen, dass es den Code auslöst, aber aus irgendeinem Grund zweimal, ich denke, dass es wegen doppelter Vollbild divs passiert übereinander, aber ich kann den genauen Grund nicht herausfinden.onmousemove Ereignis auftritt zweimal

der HTML-Code für sie ist wie folgt

<!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>

und der Javascript-Code ist wie folgt

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

auch, wie kann ich den Cursor verstecken.

Quelle

2017-11-01 sudojdoe

Wenn Sie einen Cursor ausblenden möchten (um es zu tun, wickeln Sie alle Inhalte mit 'div'-cursor: none', nicht' body'), wie könnte der Benutzer Play/Pause-Steuerelement erreichen? – dhilt

Wie oft ein Mousemove- oder Resize-Event ausgelöst wird, hängt stark von der Browser-Implementierung ab. Manchmal wird eine Funktion wiederholt zu schnell aufgerufen. Aus diesem Grund verwenden viele Bibliotheken in solchen Fällen Entprellfunktionen.

Ich empfehle Ihnen, David Walsh's Artikel auf JavaScript Debounce Functions zu lesen. Es enthält auch eine Beispielfunktion (aus 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)

Die immediate Flagge dieser Funktion bewirkt, dass die gegebenen Ereignishandler einmal im Moment aufgerufen werden, wird das Ereignis zum ersten Mal ausgelöst, aber nicht wieder, bis das Ereignis mehr für wait Millisekunden nicht ausgelöst wird.

Quelle

2017-11-01 23:25:51 feeela

Ich habe das Problem gelöst, indem ich 500 Millisekunden gewartet habe, nachdem das Overlay verschwunden ist, danke für die Referenz, obwohl es wirklich interessant ist. – sudojdoe

onmousemove Ereignis auftritt zweimal

Antwort

Verwandte Themen