悬停3秒后保持视频控制

因此,视频控件只在将鼠标悬停在该视频上时出现,当光标离开该区域时,它们在3秒钟后消失。这是期望的行为,但它只发生在视频开始时,如果我在视频播放时悬停,它们会立即消失。也许有办法解决这个问题吗?这里有一支笔来证明: https://codepen.io/anon/pen/RJpjJQ?editors=1111

$('#video').hover(function () {
  if (this.hasAttribute("controls")) {
    var that = this;
    setTimeout(function() {
    that.removeAttribute("controls")
    }, 3000)
  } else {
    this.setAttribute("controls", "controls")
  }
});