Stop interval or event listener

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