Stop interval or event listener
I am going to hide a div when a video is played after 5 seconds of inactiv mouse movement. This works so far. But what don't works is that if I am going to hit a pause button that the div won't disapear anymore. How can I stop that. My code below:
function val() {
if (interval == 5) {
/* if intervall reaches 5 the user is inactive hide element/s */
$('#controls').hide();
interval = 1;
}
interval = interval + 1;
console.log(interval);
} ;
function test() {
var interval = 1;
setInterval(val, 1000);
};
$(document).bind('mousemove keypress', function () {
/* on mousemove or keypressed show the hidden input (user active) */
$('#controls').show();
interval = 1;
});
var video = document.getElementById("bgvid");
video.addEventListener("playing", test(), false);
pauseButton.addEventListener("click", function () {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
$('#vidpause').css('background-image', 'url(/frontend/test/img/pause.gif)');
} else {
vid.pause();
$('#vidpause').css('background-image', 'url(/frontend/test/img/play.gif)');
var intervalID = setInterval(val, 110000000000000000000000000000000000);
//alert(intervalID);
/* later */
clearInterval(intervalID);
}
});